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.

 

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.)

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.