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

灰太狼 2023-07-25 12:35 31阅读 0赞

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIwOTc1OTA_size_16_color_FFFFFF_t_70][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIwOTc1OTA_size_16_color_FFFFFF_t_70 1][]

![20200414224420905.png][]![20200414224436366.png][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIwOTc1OTA_size_16_color_FFFFFF_t_70 2][]

大致的添加分组和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);
    }

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIwOTc1OTA_size_16_color_FFFFFF_t_70 3][]

进阶版效果图，详情可[查看源码][Link 1]：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIwOTc1OTA_size_16_color_FFFFFF_t_70 4][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIwOTc1OTA_size_16_color_FFFFFF_t_70]: /images/20230528/5035c8374a2c432db5a0259d91a23306.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIwOTc1OTA_size_16_color_FFFFFF_t_70 1]: /images/20230528/d3428921aca84b6d90ebf82f55606f37.png
[20200414224420905.png]: https://img-blog.csdnimg.cn/20200414224420905.png
[20200414224436366.png]: /images/20230528/e23ef6b1d9e04b42a6512f5f4331f5f2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIwOTc1OTA_size_16_color_FFFFFF_t_70 2]: /images/20230528/76bc3f5bbe6e45ec80e817f1161e9de8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIwOTc1OTA_size_16_color_FFFFFF_t_70 3]: /images/20230528/c4f878930e5b4fea86f85b72976f09da.png
[Link 1]: https://download.csdn.net/download/u012097590/12327520
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIwOTc1OTA_size_16_color_FFFFFF_t_70 4]: /images/20230528/535cc613f3d547c785e330c6899c6e3f.png