Wpf-Ribbon™ includes complete Office 2007 User Interface Guidelines compatible Galleries feature implementation including optional features. This topic gives you an overview of the functionality and related properties so you can start using Galleries feature right away. Image below shows typical Gallery appearances:

To start using Galleries you simply declare the Gallery object in XAML markup like so:

<dc:Gallery Header="Quick Styles" Height="56" SuggestedContainerWidth="300">
  <dc:Gallery.Image>
    <Image Source="images/ChangeStyles32.png"/>
  </dc:Gallery.Image>

Following is the list of some key Gallery properties:

Height property specifies the gallery height, you should always specify the Gallery height so only one row of commands is visible as per Office 2007 UI Design Guidelines.

SuggestedContainerWidth property specifies the desired width for the Gallery container (part of gallery which contains command and it excludes the scroll buttons). Note that width specified here will be used only if there is enough space available on Ribbon to display the gallery. Otherwise Gallery will be automatically scaled to fit the space available.

IsCollapsible property indicates whether Gallery can collapse into the drop-down button when there is not enough space to display the Gallery. Default value is true.

IsResizeEnabled property indicates whether Gallery drop-down can be resized by end-user (See image above). Default value is true.

Image property specifies the image that will be used when Gallery is collapsed. Gallery will be automatically collapsed into the button when there is not enough space available to display the Gallery.

Specifying Gallery Content

Following markup shows how to specify the Gallery content. Note for coders, since Gallery is based on HeaderItemsControl the content is added to the Items collection.

<dc:Gallery Header="Quick Styles" Height="56" SuggestedContainerWidth="300">
  <dc:Gallery.Image>
    <Image Source="images/ChangeStyles32.png"/>
  </dc:Gallery.Image>
  <dc:ButtonDropDown Header="Apex" ImagePosition="Top" PartVisibility="ImageOnly">
    <dc:ButtonDropDown.Image>
      <Image Source="images/Apex.png"/>
    </dc:ButtonDropDown.Image>
  </dc:ButtonDropDown>
  <dc:ButtonDropDown Header="Aspect" ImagePosition="Top" PartVisibility="ImageOnly">
    <dc:ButtonDropDown.Image>
      <Image Source="images/Aspect.png"/>
    </dc:ButtonDropDown.Image>
  </dc:ButtonDropDown>

Specifying extra menu items for drop-down Gallery

Wpf-Ribbon™ Galleries support addition of the extra menu items that are displayed only when gallery is expanded i.e. displayed on drop-down. You can see an example of such items in picture above. To add extra menu items add them to the Gallery MenuItems collection. Following markup shows how to do that:

<dc:Gallery Header="Quick Styles" Height="56" SuggestedContainerWidth="300">
  <dc:Gallery.Image>
    <Image Source="images/ChangeStyles32.png"/>
  </dc:Gallery.Image>
  <dc:Gallery.MenuItems>
    <dc:ButtonDropDown Header="More Themes Online..." Role="MenuItem"/>
    <dc:ButtonDropDown Header="Browse for Themes" Role="MenuItem"/>
    <dc:ButtonDropDown Header="Save Current Theme..." Role="MenuItem"/>
  </dc:Gallery.MenuItems>

Setting Category for Gallery items

When Gallery content is displayed on drop-down as shown in picture above, you can choose to Categorize items into the categories for easier selection. Note that this is not required and you can use Galleries without setting the category for the items it contains.

Category for items added to the Gallery is specified through Gallery Category attached property. Following markup shows how to assign category for gallery content:

<dc:Gallery Header="Quick Styles" Height="56" SuggestedContainerWidth="300">
  <dc:Gallery.Image>
    <Image Source="images/ChangeStyles32.png"/>
  </dc:Gallery.Image>
  <dc:ButtonDropDown Header="Apex" ImagePosition="Top" PartVisibility="ImageOnly" dc:Gallery.Category="Default">
    <dc:ButtonDropDown.Image>
      <Image Source="images/Apex.png"/>
    </dc:ButtonDropDown.Image>
  </dc:ButtonDropDown>
  <dc:ButtonDropDown Header="Aspect" ImagePosition="Top" PartVisibility="ImageOnly" dc:Gallery.Category="Professional">
    <dc:ButtonDropDown.Image>
      <Image Source="images/Aspect.png"/>
    </dc:ButtonDropDown.Image>
  </dc:ButtonDropDown>

Related posts:

  1. How to implement Live Preview using DotNetBar for WPF
  2. How to selectively display Gallery items based on Gallery state, popup or inline
  3. How To Add GalleryGroup to GalleryContainer
  4. How To Start Using Wpf-Ribbon Control
  5. Key Wpf-Ribbon RibbonBar Control Properties