UX Passion - All things user experience, tutorials and Microsoft

How about adding icons, labels and tooltips to our free WPF ribbon control? Well, in this, 3rd part of tutorial I will show you how to do just that and how to assign basic commands that will be executed when user clicks on button in ribbon control. Let’s start!

In case you are joining this tutorial series now, you might want to take a look at previous parts of this series, as well as on article explaining how to go and download free WPF ribbon controls.

How to get free WPF ribbon? Read this article and you will get all details there.

HOW TO: Use and add ribbon to your WPF applications (Part 1)

HOW TO: Use and add ribbon to your WPF applications (Part 2)

HOW TO: Use and add ribbon to your WPF applications (Part 4)

1. I will assume that you have previous, at least really basic, understanding of resources concept in WPF / Blend. Now we will populate our buttons and groups but we will put all required information in Resources so that we can easily change them and in case of need - reuse them at later time.

First step might be adding images that we are going to use in our ribbon. For that purpose, I will create folder Images in my project. To do that - right click on name of your project in Project pane in Blend and select Add New Folder option.

Name your folder Images.

Now you should go and add images for your buttons in Images folder. Remember that you need image for every button you are creating (in this example I need images for Copy, Cut, Paste, Bold, Italic and Underline options).

Right-click on folder Images and select Add Existing Item… New dialog window will open and from there you can select images and add them to your project. After you add all images, your folder structure will look somewhat like this:

TIP: Consider using icon files (.ICO) or, even better, nice 32-bit PNG image with alpha channel (transparency features).

Ignore the fact that I am currently using icons that are pretty small; this is only for demonstration purposes only

So, after adding all required images, we can continue our work.

2. Defining our buttons as resources. This is probably most important step in this tutorial. I will go and define ResourceDictionary and I will define it within out RibbonWindow. To do that, use the following XAML code and add it above root grid definition:

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

Your XAML code should look like this:

3. Now let’s go and add several resources.

First, for “chunks”. For Clipboard chunk, it will look like this:

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

Let’s explain this: x:Key is the name we can use later on to reference to this element, CanExecute and Executed are holding names for events that will be fired in case of user interaction (more on that a bit later) and LabelTitle holds exactly that - label title for specific chunk.

You are supposed to add this part of code in your RD, so it will look like this:

With this, we have defined one resource. Now let’s go and apply it to our chunk defined earlier. Find this part of XAML in your code:

<r:RibbonGroup Name="Clipboard">

And, now rewrite it to this:

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

Now we should dig into C# code and add event handlers for OnCanExecute and OnShowClipboardGroup events.

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");
}

HINT: Where is my code-behind file? Find your XAML file in Project tree and expand it. You will find file with same name but with .cs extension. Double-click on it and it will open in Visual Studio 2008 (you must have it for this tutorial, or you can go and hand-edit all those lines of code).

So, after you have added those event handlers, your CS file should look like this:

Note that you must have all lines outlined in red rectangle. They are:

using System;
using System.IO;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using Microsoft.Windows.Controls.Ribbon;
using System.Windows.Data;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Navigation;
using System.Collections.ObjectModel;
using System.Windows.Input;

Now, go back to Blend, save all changes and hit F5. Your application starts, and now you see Clipboard label and dialog launcher at bottom right corner. Click on it - and message box appears.

Congratulations, you have executed your first command in ribbon-powered WPF application.

4. OK, this was pretty intense; I think that the rest of this part should be easier.

After we have defined resource for our Clipboard group/chunk and added some code to make it react, I will go and add button command in pretty much the same way.

So, first step is to define button command as resource and then apply it to button.

We will go and start with Copy button, first one in Clipboard group.

Define resource like this:

<r:RibbonCommand x:Key="CopyCommand"
CanExecute="OnCanExecute"
LabelTitle="Copy"
LargeImageSource="Images\copy.png"
ToolTipDescription="Copy the selection and put it on the Clipboard."
ToolTipTitle="Copy (Ctrl+C)" />

I believe that this part of XAML code is pretty self-explanatory.
Add it just after previously defined resource for Clipboard group in your XAML code.

Find following line in XAML (first RibbonButton definition in Clipboard group):

<r:RibbonButton/>

… and change it to this:

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

Now your complete XAML looks like this:

Feel free to click on picture and it will be in its original size.

Go hit F5 and enjoy your first button

5. For your own exercise, go and add more buttons and groups in existing tabs and let me know if you find some problems. Next tutorial will explain how to add buttons in quick access toolbar and I will also show you how to add application menu.

Stay tuned, and once again, thank you for all feedback!