windowsforms-2667-controls-and-libraries-ribbon-bars-and-menu-examples-ribbon-how-to-create-an-in-ribbon-gallery.md
This example demonstrates how to create an In-Ribbon Gallery at design time and runtime.
Start with a form that contains a RibbonControl and two ImageCollection objects. The imageCollection1 contains regular images for gallery items, while imageCollection2 contains enlarged versions of these images. These large images are displayed when an end user hovers the mouse pointer over gallery items.
Create and Customize a Gallery
Add Gallery Items
Run the project
The following code is equivalent to the design-time example above.
using DevExpress.XtraBars;
using DevExpress.XtraBars.Ribbon;
// Create an image gallery (RibbonGalleryBarItem).
RibbonGalleryBarItem galleryBarItem = new RibbonGalleryBarItem(RibbonControl1.Manager);
// Bind the image collections that contain regular and hover images to the gallery.
galleryBarItem.Gallery.Images = imageCollection1;
galleryBarItem.Gallery.HoverImages = imageCollection2;
// Enable external hover images.
galleryBarItem.Gallery.AllowHoverImages = true;
// Create a gallery item group and add it to the gallery.
GalleryItemGroup itemGroup1 = new GalleryItemGroup();
galleryBarItem.Gallery.Groups.Add(itemGroup1);
// Create gallery items and add them to the group.
GalleryItem item1 = new GalleryItem();
item1.ImageOptions.ImageIndex = item1.ImageOptions.HoverImageIndex = 0;
GalleryItem item2 = new GalleryItem();
item2.ImageOptions.ImageIndex = item2.ImageOptions.HoverImageIndex = 1;
GalleryItem item3 = new GalleryItem();
item3.ImageOptions.ImageIndex = item3.ImageOptions.HoverImageIndex = 2;
itemGroup1.Items.AddRange(new GalleryItem[] { item1, item2, item3 });
// Specify the number of items to display horizontally.
galleryBarItem.Gallery.ColumnCount = 3;
// Display the created In-Ribbon gallery within the first RibbonControl's page group.
RibbonControl1.Pages[0].Groups[0].ItemLinks.Add(galleryBarItem);
Imports DevExpress.XtraBars
Imports DevExpress.XtraBars.Ribbon
' Create an image gallery (RibbonGalleryBarItem).
Dim galleryBarItem As New RibbonGalleryBarItem(RibbonControl1.Manager)
' Bind the image collections that contain regular and hover images to the gallery.
galleryBarItem.Gallery.Images = ImageCollection1
galleryBarItem.Gallery.HoverImages = ImageCollection2
' Enable external hover images.
galleryBarItem.Gallery.AllowHoverImages = True
' Create a gallery item group and add it to the gallery.
Dim itemGroup1 As New GalleryItemGroup()
galleryBarItem.Gallery.Groups.Add(itemGroup1)
' Create gallery items and add them to the group.
Dim item1 As New GalleryItem()
item1.ImageOptions.ImageIndex = 0
item1.ImageOptions.HoverImageIndex = 0
Dim item2 As New GalleryItem()
item2.ImageIndex = 1
item2.ImageOptions.HoverImageIndex = 1
Dim item3 As New GalleryItem()
item3.ImageOptions.ImageIndex = 2
item3.ImageOptions.HoverImageIndex = 2
itemGroup1.Items.AddRange(New GalleryItem() {item1, item2, item3})
' Specify the number of items to display horizontally.
galleryBarItem.Gallery.ColumnCount = 3
' Display the created In-Ribbon gallery within the first RibbonControl's page group.
RibbonControl1.Pages(0).Groups(0).ItemLinks.Add(galleryBarItem)