Intersoft ClientUI Documentation
UXRibbonGallery Overview
Intersoft ClientUI 8 > ClientUI Controls > Control Library > Ribbon Controls Overview > UXRibbonBar > UXRibbonGallery Overview

UXRibbonGallery is an items control that displays a list of items in horizontal direction. Unlike common items control, the gallery control provides a unique way to present user options graphically on the ribbon. You can use UXRibbonGallery as a standalone control, or embed it as an item of other controls such as UXRibbonDropDownButton and UXRibbonSplitButton.

This topic contains the following sections.

Using UXRibbonGallery

UXRibbonGallery can be used as a standalone control or used together with supported controls such as UXRibbonDropDownButton, UXRibbonSplitButton and UXRibbonGalleryList.

The following code shows how to use UXRibbonGallery as a standalone control.

XAML
Copy Code 
<Intersoft:UXRibbonGallery> 
        <Intersoft:UXRibbonGalleryItem DisplayMode="Image" ImageWidth="64" ImageHeight="48" Icon="/RibbonSample;component/Assets/Images/Doc/Item/paragraph.png" /> 
        <Intersoft:UXRibbonGalleryItem DisplayMode="Image" ImageWidth="64" ImageHeight="48" Icon="/RibbonSample;component/Assets/Images/Doc/Item/paragraph1.png" /> 
        <Intersoft:UXRibbonGalleryItem DisplayMode="Image" ImageWidth="64" ImageHeight="48" Icon="/RibbonSample;component/Assets/Images/Doc/Item/paragraph2.png" /> 
        <Intersoft:UXRibbonGalleryItem DisplayMode="Image" ImageWidth="64" ImageHeight="48" Icon="/RibbonSample;component/Assets/Images/Doc/Item/paragraph3.png" /> 
        <Intersoft:UXRibbonGalleryItem DisplayMode="Image" ImageWidth="64" ImageHeight="48" Icon="/RibbonSample;component/Assets/Images/Doc/Item/paragraph4.png" /> 
        <Intersoft:UXRibbonGalleryItem DisplayMode="Image" ImageWidth="64" ImageHeight="48" Icon="/RibbonSample;component/Assets/Images/Doc/Item/paragraph5.png" /> 
        <Intersoft:UXRibbonGalleryItem DisplayMode="Image" ImageWidth="64" ImageHeight="48" Icon="/RibbonSample;component/Assets/Images/Doc/Item/paragraph6.png" /> 
        <Intersoft:UXRibbonGalleryItem DisplayMode="Image" ImageWidth="64" ImageHeight="48" Icon="/RibbonSample;component/Assets/Images/Doc/Item/paragraph7.png" /> 
        <Intersoft:UXRibbonGalleryItem DisplayMode="Image" ImageWidth="64" ImageHeight="48" Icon="/RibbonSample;component/Assets/Images/Doc/Item/paragraph8.png" /> 
        <Intersoft:UXRibbonGalleryItem DisplayMode="Image" ImageWidth="64" ImageHeight="48" Icon="/RibbonSample;component/Assets/Images/Doc/Item/paragraph9.png" /> 
</Intersoft:UXRibbonGallery>

The result looks like the following figure.

Understanding UXRibbonGalleryItem

UXRibbonGallery supports selection capability and provides UXRibbonGalleryItem as the item to support the selection infrastructure that complies with MVVM pattern.

UXRibbonGallery uses content control architecture which allows you to put any arbitrary object to its Content. UXRibbonGallery extends the content model with ImageContent presentation to provide an efficient way to display an image in addition to the content itself.

Understanding UXRibbonGalleryCategory

UXRibbonGallery also supports grouped items by category by defining the items within UXRibbonGalleryCategory. When defined, it will automatically create a new row next to the specified item.

The following code shows you to configure UXRibbonGalleryCategory in the gallery control.

XAML
Copy Code 
<Intersoft:UXRibbonGallery> 
        <Intersoft:UXRibbonGalleryCategory Content="Style 1" /> 
        <Intersoft:UXRibbonGalleryItem DisplayMode="Image" ImageWidth="64" ImageHeight="48" Icon="/RibbonSample;component/Assets/Images/Doc/Item/paragraph.png" /> 
        <Intersoft:UXRibbonGalleryItem DisplayMode="Image" ImageWidth="64" ImageHeight="48" Icon="/RibbonSample;component/Assets/Images/Doc/Item/paragraph1.png" /> 
        <Intersoft:UXRibbonGalleryItem DisplayMode="Image" ImageWidth="64" ImageHeight="48" Icon="/RibbonSample;component/Assets/Images/Doc/Item/paragraph2.png" /> 
        <Intersoft:UXRibbonGalleryCategory Content="Style 2" /> 
        <Intersoft:UXRibbonGalleryItem DisplayMode="Image" ImageWidth="64" ImageHeight="48" Icon="/RibbonSample;component/Assets/Images/Doc/Item/paragraph3.png" /> 
        <Intersoft:UXRibbonGalleryItem DisplayMode="Image" ImageWidth="64" ImageHeight="48" Icon="/RibbonSample;component/Assets/Images/Doc/Item/paragraph4.png" /> 
        <Intersoft:UXRibbonGalleryItem DisplayMode="Image" ImageWidth="64" ImageHeight="48" Icon="/RibbonSample;component/Assets/Images/Doc/Item/paragraph5.png" /> 
        <Intersoft:UXRibbonGalleryItem DisplayMode="Image" ImageWidth="64" ImageHeight="48" Icon="/RibbonSample;component/Assets/Images/Doc/Item/paragraph6.png" /> 
        <Intersoft:UXRibbonGalleryItem DisplayMode="Image" ImageWidth="64" ImageHeight="48" Icon="/RibbonSample;component/Assets/Images/Doc/Item/paragraph7.png" /> 
        <Intersoft:UXRibbonGalleryItem DisplayMode="Image" ImageWidth="64" ImageHeight="48" Icon="/RibbonSample;component/Assets/Images/Doc/Item/paragraph8.png" /> 
        <Intersoft:UXRibbonGalleryItem DisplayMode="Image" ImageWidth="64" ImageHeight="48" Icon="/RibbonSample;component/Assets/Images/Doc/Item/paragraph9.png" /> 
        </Intersoft:UXRibbonGallery>

The result looks like the following figure.

Using Gallery as Command

In addition to selection control, UXRibbonGallery can also be used as command control which allows you to use controls that support command such as UXRibbonButton. The ability to define command controls in the gallery conforms to the latest Office ribbon specifications which is crucial in building rich ribbon-friendly applications.

The following code shows how to configure UXRibbonGallery and use command control such as UXRibbonButton as the child item.

XAML
Copy Code 
<Intersoft:UXRibbonGallery Margin="10" ItemHeight="25" ItemWidth="120"> 
        <Intersoft:UXRibbonButton Size="Medium" Content="Move to: ?" 
                        HorizontalContentAlignment="Left" Icon="/RibbonSample;component/Assets/Images/Outlook/16/move_to.png" 
                        Command="{Binding TriggerCommand}" CommandParameter="Move To"/> 
        <Intersoft:UXRibbonButton Size="Medium" Content="To Manager" 
                        HorizontalContentAlignment="Left" Icon="/RibbonSample;component/Assets/Images/Outlook/16/to_manager.png" 
                        Command="{Binding TriggerCommand}" CommandParameter="To Manager"/> 
        <Intersoft:UXRibbonButton Size="Medium" Content="Team E-mail" 
                        HorizontalContentAlignment="Left" Icon="/RibbonSample;component/Assets/Images/Outlook/16/team_email.png"/> 
        <Intersoft:UXRibbonButton Size="Medium" Content="Done" 
                        HorizontalContentAlignment="Left" Icon="/RibbonSample;component/Assets/Images/Outlook/16/done.png" 
                        Command="{Binding TriggerCommand}" CommandParameter="Done"/> 
        <Intersoft:UXRibbonButton Size="Medium" Content="Reply & Delete" 
                        HorizontalContentAlignment="Left" Icon="/RibbonSample;component/Assets/Images/Outlook/16/reply_n_delete.png" 
                        Command="{Binding TriggerCommand}" CommandParameter="Replay & Delete"/> 
        <Intersoft:UXRibbonButton Size="Medium" Content="Create New" 
                        HorizontalContentAlignment="Left" Icon="/RibbonSample;component/Assets/Images/Outlook/16/create_new.png"/> 
</Intersoft:UXRibbonGallery>

The result looks like the following figure.

Using Gallery with Other Controls

Thanks to the solid architecture, UXRibbonGallery also works well with other ribbon-friendly controls such as:

See Also
Ribbon Controls Overview
UXRibbonBar
Customizing Fluent Resizing Behaviors in UXRibbonBar
Commanding Overview
MVVM Pattern Overview

Other Resources

Walkthroughs and How-to Topics