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);
}
效果图:
进阶版效果图,详情可查看源码: