Add more content to my Simple Ribbon Application
To add more content to the Simple Ribbon Application that we created in the previous post, you can drag-drop variety of elements from the VS toolbox onto the Ribbon.
- Drag RibbonGroup to the Home Tab and name it Group2.
- Drag three RibbonCheckBox controls to Group2 and set the SmallImageSource property on each using the property inspector.
The resultant XAML is as follows.
<Grid x:Name="LayoutRoot">
<Grid.Resources>
<!-- RibbonControl -->
<Style x:Key="RibbonControlStyle">
<Setter Property="ribbon:RibbonControlService.Label"
Value="{Binding Label}" />
<Setter Property="ribbon:RibbonControlService.LargeImageSource"
Value="{Binding LargeImage}" />
<Setter Property="ribbon:RibbonControlService.SmallImageSource"
Value="{Binding SmallImage}" />
<Setter Property="ribbon:RibbonControlService.ToolTipTitle"
Value="{Binding ToolTipTitle}" />
<Setter Property="ribbon:RibbonControlService.ToolTipDescription"
Value="{Binding ToolTipDescription}" />
<Setter Property="ribbon:RibbonControlService.ToolTipImageSource"
Value="{Binding ToolTipImage}" />
<Setter Property="ribbon:RibbonControlService.ToolTipFooterTitle"
Value="{Binding ToolTipFooterTitle}" />
<Setter Property="ribbon:RibbonControlService.ToolTipFooterDescription"
Value="{Binding ToolTipFooterDescription}" />
<Setter Property="ribbon:RibbonControlService.ToolTipFooterImageSource"
Value="{Binding ToolTipFooterImage}" />
...
</Style>
<!-- RibbonButton -->
<Style TargetType="{x:Type ribbon:RibbonButton}"
BasedOn="{StaticResource RibbonControlStyle}">
<Setter Property="Command" Value="{Binding Command}" />
</Style>
<!-- RibbonToggleButton -->
<Style TargetType="{x:Type ribbon:RibbonToggleButton}"
BasedOn="{StaticResource RibbonControlStyle}">
<Setter Property="Command" Value="{Binding Command}" />
<Setter Property="IsChecked" Value="{Binding IsChecked}" />
</Style>
...
</Grid.Resources>
</Grid>
As you may have already noted, the main Ribbon control is similar to a TabControl and contains RibbonTabs, which contain RibbonGroups, which in turn contain a variety of different Ribbon controls. (This is not an exhaustive list.)
- RibbonButton
- RibbonToggleButton
- RibbonRadioButton
- RibbonCheckBox
- RibbonTextBox
- RibbonMenuButton
- RibbonSplitButton
- RibbonComboBox
It is important to note that there are primarily three properties that constitute the content model for these controls.
These three properties enable a control to exist in a variety of different size variants. The three popular size variants are
- Large
LargeImageSource and Label are visible
- Medium
SmallImageSource and Label are visible
- Small
Only the SmallImageSource is visible
These size variants for each control are pertinent to the resizing behavior of the Ribbon.
Read next post to learn to bind your Ribbon UI to a data model.