The official blog of the Windows Presentation Foundation Team
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.
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}" />
<!-- RibbonToggleButton -->
<Style TargetType="{x:Type ribbon:RibbonToggleButton}"
<Setter Property="IsChecked" Value="{Binding IsChecked}" />
</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.)
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
LargeImageSource and Label are visible
SmallImageSource and Label are visible
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.
Hi, I'm sure I must be missing something obvious... If I add a second RibbonTab how do I show it in the VS designer?
Found it - check the IsSelected property.