[Expand]General Information
[Collapse]WinForms Controls
 [Expand]What's Installed
 [Expand]Build an Application
 [Collapse]Controls and Libraries
  [Expand]Forms and User Controls
  [Expand]Messages, Notifications and Dialogs
  [Expand]Editors and Simple Controls
  [Collapse]Ribbon, Bars and Menu
   [Expand]Popup Menus
    Radial Menu
   [Expand]Common Features
      How to: Add Bar Items to the Tab Header Area
      How to: Apply the Button Group layout to a set of bar item links
      How to: Create a multi-level BackstageView Control
      How to: Create a RibbonControl in Code
      How to: Create an In-Ribbon Gallery
      How to: Create Contextual Tabs
      How to: Custom Draw Gallery Items
      How to: Customize a RibbonControl's Customization Menu
      How to: Get Visible and All Ribbon Pages
      How to: Merge Ribbon Controls
      How to: Merge RibbonStatusBar Objects
    [Expand]Popup Menus
  [Expand]Application UI Manager
  [Expand]Docking Library
  [Expand]Data Grid
  [Expand]Vertical Grid
  [Expand]Property Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Chart Control
  [Expand]Map Control
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Sunburst Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

How to: Create an In-Ribbon Gallery

This example demonstrates how to create an In-Ribbon Gallery at design time and runtime.

Expanded Prerequisites

It is assumed that the form already contains a RibbonControl, and ImageCollection objects (imageCollection1 and imageCollection2) that will provide images for gallery items. imageCollection1 contains regular images for gallery items, while imageCollection2 contains enlarged versions of these images, which will be displayed when a specific gallery item is hovered over.

Expanded Design-Time Example

  1. Create and Customize a Gallery

    Open the Design view in Visual Studio. Right-click the RibbonPageGroup's client area and select Add RibbonGalleryBarItem.

    This creates a RibbonGalleryBarItem object designed to display an In-Ribbon Gallery. To access and customize the gallery settings using the Properties window, ensure that the created RibbonGalleryBarItem object is selected in the Design view.

    Once the RibbonGalleryBarItem is selected, expand the RibbonGalleryBarItem.Gallery property in the Properties window, and set the gallery settings as follows.

    • Set BaseGallery.AllowHoverImages to true. This property enables the hover images mode, in which special hover images pop up when you move the mouse cursor over gallery items. Hover images are stored in imageCollection2 and they will be assigned to items in the following step.
    • Set BaseGallery.ColumnCount to 3. This property specifies the number of gallery items horizontally displayed within the gallery.
    • Set BaseGallery.Images to imageCollection1. This property specifies the collection of regular images for gallery items that will be displayed when gallery items are in their normal state.
    • Set BaseGallery.HoverImages to imageCollection2. This property specifies the collection of hover images for gallery items. Hover images automatically appear over gallery items when the mouse cursor moves over them.

    The modified properties are marked in the following image.

  2. Add Gallery Items

    Before adding individual gallery items, first create a gallery item group, which is an immediate container of gallery items within the gallery. The gallery can contain multiple gallery item groups. In this tutorial, only one titleless group is created.

    Right-click the RibbonGalleryItem's client area and select Add Gallery Group.

    To create a gallery item, right-click the created group and choose Add Gallery Item.

    Add two more items in the same way.

    For each gallery item, regular and hover images need to be specified. In this tutorial, gallery item images are stored in ImageCollection objects. Thus, to assign individual images from these collections to items, the GalleryItem.ImageIndex and GalleryItem.HoverImageIndex properties are used.

    Select the first gallery item and click the item's smart tag, to open the Tasks pane.

    Set the ImageIndex and HoverImageIndex properties by selecting the proper images from the dropdown lists.


    If you are observing empty dropdown lists in your case, this means that the image collections assigned to the BaseGallery.Images and BaseGallery.HoverImages properties do not contain any images.

    Assign images to the other two gallery items in the same way.

  3. Run the project

    Run the project and move the mouse over the gallery items to see the hover images feature in action.

Expanded Runtime Example

The following code is equivalent to the design-time example above.

Is this topic helpful?​​​​​​​