Using the Office 2010 Ribbon UI in WPF applications – Part 2

The Office 2010 UI Ribbon control is similar to the Tab container and contains tabs, you can use to group your commands/ module commands into these ribbon tabs. The ribbon tab supports usage of ribbon implementation of almost all the controls in the library. To add a ribbon tab to the application we created in the previous post you need to add a ribbon tab below the application menu item.

<my:RibbonTab Header="Gifts" KeyTip="G" Height="95">

   

my:RibbonTab>

Inside the tab you can have groups with controls inside each group.

<my:RibbonGroup Height="83" VerticalAlignment="Top" >

    <my:RibbonButton LargeImageSource="/Office2010RibbonUI.Samples;component/Images/Christmas-Bells.png" Label="Bells" />

    <my:RibbonButton LargeImageSource="/Office2010RibbonUI.Samples;component/Images/Star.png" Label="Golden Star" />

    <StackPanel Orientation="Vertical">

        <my:RibbonButton SmallImageSource="/Office2010RibbonUI.Samples;component/Images/Sphere_Glow.png" Label="Sphere" />

        <my:RibbonButton SmallImageSource="/Office2010RibbonUI.Samples;component/Images/SantasBag.png" Label="Bag" />

        <my:RibbonButton SmallImageSource="/Office2010RibbonUI.Samples;component/Images/Sock.png" Label="Sock" />

    StackPanel>

    <my:RibbonSplitButton LargeImageSource="/Office2010RibbonUI.Samples;component/Images/Gift.png" Label="Gifts">

        <my:RibbonMenuItem Header="Gift1" />

        <my:RibbonMenuItem Header="Gift2" />

        <my:RibbonMenuItem Header="Gift3" />

    my:RibbonSplitButton>

my:RibbonGroup>

I have added some buttons and a split button to this group. You can also embed combo boxes and checkboxes inside ribbon groups like.

<my:RibbonGroup Width="176" Height="83" VerticalAlignment="Top">

    <StackPanel Orientation="Horizontal" VerticalAlignment="Center">

        <StackPanel Orientation="Vertical">

            <my:RibbonComboBox ItemsSource="{Binding FormattingOptions}" DisplayMemberPath="Option">my:RibbonComboBox>

            <my:RibbonCheckBox Label="Check one" />

            <my:RibbonCheckBox Label="Check two" />

        StackPanel>

        <StackPanel Orientation="Vertical">

            <my:RibbonToggleButton Label="Bold" VerticalAlignment="Top" Margin="10 0 0 0" HorizontalAlignment="Left" />

            <my:RibbonToggleButton Label="Italics" VerticalAlignment="Top" Margin="10 0 0 0" HorizontalAlignment="Left" />

            <my:RibbonToggleButton Label="Strikeout" VerticalAlignment="Top" Margin="10 0 0 0" HorizontalAlignment="Left" />

        StackPanel>

    StackPanel>

my:RibbonGroup>

The final implementation looks like

Quick access toolbar buttons are added as

<my:Ribbon.QuickAccessToolBar>

    <my:RibbonQuickAccessToolBar>

        <my:RibbonButton SmallImageSource="/Office2010RibbonUI.Samples;component/Images/Gift.png" />

        <my:RibbonButton SmallImageSource="/Office2010RibbonUI.Samples;component/Images/Star.png" />

        <my:RibbonButton SmallImageSource="/Office2010RibbonUI.Samples;component/Images/SantasBag.png" Label="Pick from bag" />

    my:RibbonQuickAccessToolBar>

my:Ribbon.QuickAccessToolBar>