The following lines define the help pane:

<Ribbon.HelpPaneContent>
    <RibbonButton SmallImageSource="Images\help.png" />
</Ribbon.HelpPaneContent>

The quick access toolbar (Ribbon.QuickAccessToolBar) is located in the upper-left corner (see Figure 6).

Figure 6: The quick access toolbar displaying the ribbon split menu item for the Undo ribbon split menu.

In this example, the quick access toolbar shows one save button (RibbonButton) and two ribbon split buttons (RibbonSplitButton). The two ribbon split buttons are the typical Undo and Redo menus that provide a list of actions as ribbon split menu items (RibbonSplitMenuItem). The following lines define the quick access toolbar and the items for each ribbon split menu:

<Ribbon.QuickAccessToolBar>
    <RibbonQuickAccessToolBar>
        <RibbonButton x:Name ="Save" SmallImageSource="Images\save.png" />
        <RibbonSplitButton x:Name ="Undo" SmallImageSource="Images\undo.png" >
            <RibbonSplitMenuItem Header="Undo action #1" />
            <RibbonSplitMenuItem Header="Undo action #2" />
            <RibbonSplitMenuItem Header="Undo action #3" />
        </RibbonSplitButton>
        <RibbonSplitButton x:Name="Redo" SmallImageSource="Images\redo.png" >
            <RibbonSplitMenuItem Header="Redo action #1" />
            <RibbonSplitMenuItem Header="Redo action #2" />
        </RibbonSplitButton>
    </RibbonQuickAccessToolBar>
</Ribbon.QuickAccessToolBar>

The application menu (Ribbon.ApplicationMenu) is located at the left-hand side and it displays a down arrow (see Figure 7).

Figure 7: The application menu displaying the two menu options.

In this example, the application menu shows two ribbon application menu items (RibbonApplicationMenuItem): Options and Exit. The application menu has an accelerator, also known as a keyboard shortcut or access key (KeyTip). You can preview the accelerators defined for the Ribbon sub-controls in the XAML preview by pressing the Alt key when the Ribbon is selected (see Figure 8).

Figure 8: Visualizing accelerators in the XAML preview.

The following lines define the application menu and the two ribbon application menu items:

  <Ribbon.ApplicationMenu>
    <RibbonApplicationMenu KeyTip="F">
        <RibbonApplicationMenuItem Header="Options" ImageSource="Images\options.png" />
        <RibbonApplicationMenuItem Header="Exit" ImageSource="Images\quit.png" />
    </RibbonApplicationMenu>
</Ribbon.ApplicationMenu>

Ribbon tabs (RibbonTab) are located on the right-hand side of the application menu. In this example, the ribbon shows two tabs: Home and Launch (see Figure 9).

Figure 9: Home and Launch tabs.

Each ribbon tab has an accelerator and two ribbon groups (RibbonGroup). The following lines define the Home tab with two ribbon groups: Clipboard and Colors (see Figure 10).

Figure 10: Two ribbon groups within the Home ribbon tabs — Clipboard and Colors.

<RibbonTab Header="Home" KeyTip="H" >
    <!-- Home/Clipboard group-->
    <RibbonGroup x:Name="ClipboardGroup" Header="Clipboard">
        <RibbonMenuButton LargeImageSource="Images\paste.png" Label="Paste" KeyTip="V">
            <RibbonMenuItem ImageSource="Images\paste.png" Header="Keep Text Only" KeyTip="T"/>
            <RibbonMenuItem ImageSource="Images\paste.png" Header="Paste Special..." KeyTip="S"/>
        </RibbonMenuButton>
        <RibbonButton SmallImageSource="Images\cut.png" Label="Cut" KeyTip="X" />
        <RibbonButton SmallImageSource="Images\copy.png" Label="Copy" KeyTip="C" />
        <RibbonButton SmallImageSource="Images\format_painter.png" Label="Format Painter" KeyTip="FP" />
    </RibbonGroup>
    <!-- Home/Colors group-->
    <RibbonGroup x:Name="Color" Header="Colors">
        <RibbonRadioButton LargeImageSource="Images\red.png" Label="Red" KeyTip="R" IsChecked="True"/>
        <RibbonRadioButton LargeImageSource="Images\green.png" Label="Green" KeyTip="G"/>
        <RibbonRadioButton LargeImageSource="Images\blue.png" Label="Blue" KeyTip="B"/>
    </RibbonGroup>
</RibbonTab>