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);
}

 

效果圖：

進階版效果圖，詳情可查看源碼：