Tayyab Bin Tariq

In this tutorial I would explain how to create a simple Ribbon Control using Windows Presentation Foundation.

Image Courtesy MSDN.

The WPF team is sharing new WPF Ribbon control starting on Monday, October 27, 2008! Binaries and source code for the Ribbon can be downloaded at the Office UI Licensing site.

So, your first step is to go to Office UI Licensing site and get yourself a free WPF ribbon control. You must accept and sign license (it’s not a big deal) and download free WPF ribbon control. Just follow this link.

What is Ribbon Control?

Ribbons are the modern way to help users find, understand, and use commands efficiently and directly—with a minimum number of clicks, with less need to resort to trial-and-error, and without having to refer to Help.

The preview version of the WPF Ribbon includes many of the features which Independent Software Vendors (ISVs) need to add a Ribbon control to their WPF applications. Ribbon is a command bar that organizes a program’s features into a series of tabs at the top of a window. The Ribbon UI was designed by Microsoft Office to increase discoverability of features and functions, enable quicker learning of the program as a whole, and make users feel more in control of their experience with the program. The Ribbon is designed to replace the traditional menu bar and toolbars. The WPF Ribbon will include all of the basic Ribbon features and functionality, including tabs, groups, controls (buttons, split buttons, galleries, etc.), title bar integration of the application menu button and quick access toolbar, and resizing with dynamic layout.

For more information, follow this link.

Step 1: Adding The Ribbon Control to your WPF Application

1. Create a new WPF Project using Visual Studio .NET 2008.

2. Add a reference to “RibbonControlsLibrary.dll” that you downloaded earlier.

3. Add the XAML Reference to the DLL you have just added to your project by adding this line to your XAML code.

xmlns:r="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"

4. Change the root element of your XAML code to r:RibbonWindow instead of Window.

   1: <r:RibbonWindow x:Class="FirstRibbonApplication.Window1"

   2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

   3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   4:     xmlns:r="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"

   5:     Title="Window1" Height="300" Width="300">

   6:     <Grid>

   7:         

   8:     </Grid>

   9: </r:RibbonWindow>

5. Add the r:Ribbon tag to your XAML code.

<r:Ribbon Title="WPF Ribbon - Document1" x:Name="ribbon" />

Your XAML code should now look like this;

<r:RibbonWindow x:Class="FirstRibbonApplication.Window1"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:r="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"

    Title="Window1" Height="300" Width="300">

    <Grid>

       <r:Ribbon Title="WPF Ribbon - Document1" x:Name="ribbon" />

    </Grid>

</r:RibbonWindow>

Congratulations! you have successfully added a ribbon control to your WPF application. Before you can see the control you would need to make a few changes to the accompanying cs file. Open the cs and add the following library and make sure that the partial class inherits from RibbonWindow instead of Window.

using Microsoft.Windows.Controls.Ribbon;

Compile and run the application to see the results.

Step 2: Adding Tabs, Groups and Buttons

As described earlier a ribbon control contains different tabs, each tab contains a groups and groups in turn contain buttons. In this step we would create tabs, groups and buttons.

1. To add tabs to your ribbon control add the r:RibbonTab tag within the r:Ribbon tag you added in the last step.

<r:RibbonTab Label="Home">

</r:RibbonTab><r:RibbonTab Label="Insert">

</r:RibbonTab><r:RibbonTab Label="Help">

</r:RibbonTab>

 

<r:RibbonGroup Name="Clipboard"></r:RibbonGroup><r:RibbonGroup Name="Fonts"></r:RibbonGroup>

<r:RibbonButton ></r:RibbonButton>

<r:RibbonWindow x:Class="FirstRibbonApplication.Window1"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:r="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"

    Title="Window1" Height="300" Width="300">

    <Grid>

        <r:Ribbon Title="Window1" x:Name="ribbon">

            <r:RibbonTab Label="Home">

                <r:RibbonGroup Name="Clipboard">

                    <r:RibbonButton ></r:RibbonButton>

                </r:RibbonGroup>

                <r:RibbonGroup Name="Fonts">

                    <r:RibbonButton ></r:RibbonButton>

                </r:RibbonGroup>

            </r:RibbonTab>

            <r:RibbonTab Label="Insert">

            </r:RibbonTab>

            <r:RibbonTab Label="Help">

            </r:RibbonTab>

        </r:Ribbon>

    </Grid>

</r:RibbonWindow>

Step 3: Adding Commands to Ribbon Groups and Ribbon Buttons

<r:RibbonWindow.Resources><ResourceDictionary></ResourceDictionary></r:RibbonWindow.Resources>

<r:RibbonCommand x:Key="ClipboardGroupCommand"CanExecute="OnCanExecute"Executed="OnShowClipboardGroup"LabelTitle="Clipboard"/>

<r:RibbonGroup Name="Clipboard">

<r:RibbonGroup Name="Clipboard" HasDialogLauncher="True" Command="{StaticResource ClipboardGroupCommand}">

Now, we have connected our resource with RibbonGroup. I have added HasDialogLauncher=”True” because that will allow us to fire OnShowClipboardGroup  event when user clicks on dialog launcher.

5. Go to your CS code-behind file and add these lines:

private void OnCanExecute(object target, CanExecuteRoutedEventArgs args){args.CanExecute = true;}

private void OnShowClipboardGroup(object target, ExecutedRoutedEventArgs args){MessageBox.Show("This is the Clipboard!.", "Clipboard Dialog");}

In principal we are done with this step and the essential concepts have been learnt. You can now learn your application and test to see that the message box is displayed.

Similar to step 4 and 5 create another RibbonCommand, add the resource to the Copy Button and write the corresponding cs code.

Creating another RibbonCommand;

<r:RibbonCommandx:Key="CopyCommand"CanExecute="OnCanExecute"Executed="OnCopyCommand"LabelTitle="Copy"LargeImageSource="Images\copy.png"ToolTipTitle="Copy (Ctrl+C)"ToolTipDescription="Copies the selected content on to the clipboard"></r:RibbonCommand>

<r:RibbonButton Name="Copy" Command="{StaticResource CopyCommand}"></r:RibbonButton>

private void OnCopyCommand(object target, ExecutedRoutedEventArgs args){    MessageBox.Show("This is the copy button!.", "Copy Dialog");}

<r:RibbonWindow x:Class="FirstRibbonApplication.Window1"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:r="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"

    Title="Window1" Height="600" Width="400">

    <r:RibbonWindow.Resources>

        <ResourceDictionary>

            <r:RibbonCommand x:Key="ClipboardGroupCommand"

                             CanExecute="OnCanExecute"

                             Executed="OnShowClipboardGroup"

                             LabelTitle="Clipboard">

            </r:RibbonCommand>

            <r:RibbonCommand

                x:Key="CopyCommand"

                CanExecute="OnCanExecute"

                Executed="OnCopyCommand"

                LabelTitle="Copy"

                LargeImageSource="Images\copy.png"

                ToolTipTitle="Copy (Ctrl+C)"

                ToolTipDescription="Copies the selected content on to the clipboard">

            </r:RibbonCommand>

        </ResourceDictionary>

    </r:RibbonWindow.Resources>

    <Grid  HorizontalAlignment="Stretch" VerticalAlignment="Top">

        <r:Ribbon Title="Window1" x:Name="ribbon"  VerticalAlignment="Top">

            <r:RibbonTab Label="Home">

                <r:RibbonGroup Name="Clipboard" HasDialogLauncher="True" Command="{StaticResource ClipboardGroupCommand}">

                    <r:RibbonButton Name="Copy" Command="{StaticResource CopyCommand}"></r:RibbonButton>

                </r:RibbonGroup>

                <r:RibbonGroup Name="Fonts">

                    <r:RibbonButton  Name="Paste"></r:RibbonButton>

                </r:RibbonGroup>

            </r:RibbonTab>

            <r:RibbonTab Label="Insert">

            </r:RibbonTab>

            <r:RibbonTab Label="Help">

            </r:RibbonTab>

        </r:Ribbon>

    </Grid>

</r:RibbonWindow>

 

Share on Facebook