DevExpress WinForm 利用GalleryDropDown+RibbonControl 来实现Office 好看的按钮下拉内容

DevExpress Winform 提供了GalleryControl来实现多组图片展览和分组展示，譬如其自带的ImagePicker图片选择器，就是用到GalleryControl来实现的，如下图：

对于office当中以下的这种效果，dev提供了另外一个组件，就是GalleryDropDown，它拥有GalleryControl的特点，同时也能在RibbonControl上被利用显示，接下来将介绍如何使用GalleryDropDown来实现类似的功能。

在RibbonControl上新建一个BarButtonItem，然后修改barButtonItem的 ButtonStyle属性为DropDown，此时的Button就会出现下拉按钮的标识，接着从工具箱拖出一个GalleryDropDown组件到界面上，然后将BarButtonItem的DropDownControl属性选择对应的gallerydropdown1,这样基本设置就完成了，接下来只需往gallerydropdown里面添加分组和item即可

大致的添加分组和Item代码如下

//添加组
galleryDropDown1.Gallery.Groups.Add(new DevExpress.XtraBars.Ribbon.GalleryItemGroup() { Caption = "分组1" });
            galleryDropDown1.Gallery.Groups.Add(new DevExpress.XtraBars.Ribbon.GalleryItemGroup() { Caption = "分组2" });
//添加Item
var strs = System.IO.Directory.GetFiles("images", "*.*", System.IO.SearchOption.TopDirectoryOnly).Where(s => s.EndsWith(".jpg") || s.EndsWith(".gif") || s.EndsWith(".bmp") || s.EndsWith(".png")).ToList();
            for (int i = 0; i < strs.Count(); i++)
            {
                var item = strs[i];

                var image = Image.FromFile(item);
                var gitem = new DevExpress.XtraBars.Ribbon.GalleryItem(image, Path.GetFileNameWithoutExtension(item), "");
                if (i > strs.Count / 2)
                {
                    galleryDropDown1.Gallery.Groups[1].Items.Add(gitem);
                   
                }
                else
                {
                    galleryDropDown1.Gallery.Groups[0].Items.Add(gitem);
                   
                }
            }

//galleryDropDown基础设置
void Init()
{
    galleryDropDown1.Gallery.ItemImageLayout = ImageLayoutMode.ZoomInside;
    galleryDropDown1.Gallery.ColumnCount = 4;//显示列数
    galleryDropDown1.Gallery.ImageSize=new Size(97, 135);//图片的尺寸
    //添加按钮在下拉的内容里面
    galleryDropDown1.ItemLinks.Add(barButtonItem2);
    galleryDropDown1.ItemLinks.Add(barButtonItem3);
}

 

效果图：

进阶版效果图，详情可查看源码：