Ribbon Control in WPF 4.5

WPF 4.5 has been extended by a new feature called Ribbon control that hosts quick access to the toolbar, Application Menu and tabs. The Ribbon is a way to organize the related commands shown as control on the Ribbon so that they are easier to find. The controls are organized as groups along the horizontal strip at the top of application windows. Related groups are organized into tabs.

After using this feature there is no need to incorporate separate downloads for our project.

The following shows how to use a Ribbon Control in a WPF application.



Step 1

First create a WPF application.

Step 2

By default, a new WPF project does not include the library reference to start using the Ribbon control and related sub-controls. So before adding a Ribbon control to a project we need to add a reference to the system.

The reference for the Ribbon control is "System.Windows.Controls.Ribbon".

So to add this reference we need to use the following procedure.

Go to the project of your WPF application in Solution Explorer then right-click on References then choose Add referencethen activate the check box for "System.Windows.Controls.Ribbon".



Step 3

The we need to  add a new Ribbon Control to the project.

After adding this reference we can input the XAML code to define a new Ribbon control and we will see it in the XAML preview. This is an empty Ribbon.



Example: We can understand it by adding many sub-controls.

Add a folder named "images" to your WPF application then drag some images to it (I just dragged 3 images for making a short application).



The purpose of adding these images is that the Ribbon Control usees these images as icons inside the application.

Procedure to make this application

Step 1

Locate an image (treated as a Help icon) at the right hand side of the page.





Step 2

Add a quick Access toolbar to the left corner as in the following:





Step 3

Create an application menu at the bottom of the page as in the following:





Step 4

Create a Home clipboard and copy and paste a button to the existing application.




Step 5

Add a Home colors group to the page as in the following:



Step 6

Now add a Ribbon tab launch for #2:





The following is the final code for this application:

<Window x:Class="WpfApplication3.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>

            <Ribbon x:Name="Ribbon" SelectedIndex="0">
            <!-- Help Pane, located at the right-hand side -->
            <Ribbon.HelpPaneContent>
                <RibbonButton SmallImageSource="Images\Tulips.jpg" />
            </Ribbon.HelpPaneContent>
            <!-- Quick Access Toolbar - located at the upper-left corner -->
            <Ribbon.QuickAccessToolBar>
                <RibbonQuickAccessToolBar>
                    <RibbonButton x:Name ="Save" SmallImageSource="Images\Desert.jpg" />
                    <RibbonSplitButton x:Name ="Undo" SmallImageSource="Images\Tulips.jpg" >
                        <RibbonSplitMenuItem Header="Undo action #1" />
                        <RibbonSplitMenuItem Header="Undo action #2" />
                        <RibbonSplitMenuItem Header="Undo action #3" />
                    </RibbonSplitButton>
                    <RibbonSplitButton x:Name="Redo" SmallImageSource="Images\Desert.jpg" >
                        <RibbonSplitMenuItem Header="Redo action #1" />
                        <RibbonSplitMenuItem Header="Redo action #2" />
                    </RibbonSplitButton>
                </RibbonQuickAccessToolBar>
            </Ribbon.QuickAccessToolBar>
            <!-- Application Menu, located at the left-hand side (down arrow) -->
            <Ribbon.ApplicationMenu>
                <RibbonApplicationMenu KeyTip="F">
                    <RibbonApplicationMenuItem Header="Options" ImageSource="Images\Tulips.jpg" />
                    <RibbonApplicationMenuItem Header="Exit" ImageSource="Images\Tulips.jpg" />
                </RibbonApplicationMenu>
            </Ribbon.ApplicationMenu>
            <!-- Ribbon Tab #1: Home -->
            <RibbonTab Header="Home" KeyTip="H" >
                <!-- Home/Clipboard group-->
                <RibbonGroup x:Name="ClipboardGroup" Header="Clipboard">
                    <RibbonMenuButton LargeImageSource="Images\Tulips.jpg" Label="Paste" KeyTip="V">
                        <RibbonMenuItem ImageSource="Images\Tulips.jpg" Header="Keep Text Only" KeyTip="T"/>
                        <RibbonMenuItem ImageSource="Images\Tulips.jpg" Header="Paste Special..." KeyTip="S"/>
                    </RibbonMenuButton>
                    <RibbonButton SmallImageSource="Images\Tulips.jpg" Label="Cut" KeyTip="X" />
                    <RibbonButton SmallImageSource="Images\Tulips.jpg" Label="Copy" KeyTip="C" />
                    <RibbonButton SmallImageSource="Images\Tulips.jpg" Label="Format Painter" KeyTip="FP" />
                </RibbonGroup>
                <!-- Home/Colors group-->
                <RibbonGroup x:Name="Color" Header="Colors">
                    <RibbonRadioButton LargeImageSource="Images\Tulips.jpg" Label="Red" KeyTip="R" IsChecked="True"/>
                    <RibbonRadioButton LargeImageSource="Images\Tulips.jpg" Label="Green" KeyTip="G"/>
                    <RibbonRadioButton LargeImageSource="Images\Tulips.jpg" Label="Blue" KeyTip="B"/>
                </RibbonGroup>
            </RibbonTab>
            <!-- Ribbon Tab #2: Launch -->
            <RibbonTab Header="Launch" KeyTip="L">
                <!-- Launch/Applications group-->
                <RibbonGroup x:Name="DesktopApplication" Header="Desktop Applications">
                </RibbonGroup>
                <!-- Launch/Games group-->
                <RibbonGroup x:Name="App" Header="Apps">
                </RibbonGroup>
                </RibbonTab>
        </Ribbon>
    </Grid>
</Window>