[Expand]General Information
[Collapse]WinForms Controls
  .NET Core Support
 [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]Gantt Control
  [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

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.

Expanded Design-Time Example

  1. Create and Customize a Gallery

    Right-click the ribbonPageGroup1 and select Add new item->Image Gallery (RibbonGalleryBarItem).

    This creates an empty image gallery (a RibbonGalleryBarItem (see RibbonGalleryBarItem) object).

    Click the image gallery and switch to the Property Grid. Expand the RibbonGalleryBarItem.Gallery property and specify its settings as follows:

  2. Add Gallery Items

    You should first create a gallery item group before you add individual gallery items. This object is a container of gallery items within the gallery. This tutorial creates one group.

    Right-click the image gallery and select Add Gallery Group.

    Right-click the created group and choose Add Gallery Item.

    Add two more items in the same way.

    For each gallery item, specify a regular and hover image.

    Select the first gallery item and switch to the Property Grid. Set the GalleryItem.ImageIndex and GalleryItem.HoverImageIndex properties by selecting images from dropdown lists.

    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 display the hover images.

Expanded Runtime Example

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

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