UX Passion - All things user experience, tutorials and Microsoft

Let’s go and continue with our first tutorial on adding the WPF ribbon control in your interface. In this part I will show you how to add tabs, groups and buttons to ribbon control. Also, I will give you feeling on what can you expect in next part of this tutorial.

Before you start implementing ribbon control in your interface, you should think about organization of ribbon interface. What kind of tabs you are going to use, how will you go and group them, what buttons/commands will be part of each group.

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 3)

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

In one of the future pars of this tutorial series I will go and discuss some good and proven practices for using and implementing ribbon as major part of your user experience.

Please note that tabs, groups and commands we are going to use in this tutorial are just for demonstrational purposes and do not necessarily reflect good or suggested practice. After all, this is just tutorial showing you basic stuff about adding objects to your ribbon control.

So, enough talking, let’s start working…

1. I will go and add three tabs to ribbon control, namely: Home, Insert and Help in that particular order. Again, we should go in our XAML code and make some additions.

Basically we are adding these lines:

                <r:RibbonTab Label="Home"/>

                <r:RibbonTab Label="Insert"/>

                <r:RibbonTab Label="Help"/>

And after that our code should look like this:

If you now go and press F5 to build your project you should be able to see your application with three tabs we just added.

Notice that they are already supporting typical mouse interactions (hover, click – and visual cues too). Using the mouse wheel you can quickly change selected tabs (that is in accordance with Office 2007 apps like Office Word or Office Excel).

2. Next step is adding several groups (aka “chunks”) which will serve as containers for our controls, like buttons, which we will add later.

I won’t complicate and I will go and add just 2 groups to the first tab (you can feel free and go and add more groups if you want too).

So, I will add groups Clipboard and Fonts. That is easily accomplished by adding following lines in XAML code:

                <r:RibbonGroup Name="Clipboard">

                </r:RibbonGroup>

                <r:RibbonGroup Name="Fonts">

                </r:RibbonGroup>

After this addition our code looks like this:

3. Now to the buttons! We will add three buttons in our Clipboard group (Cut, Copy and Paste, as you might guessed already) and three to Fonts group (Bold, Italic and Underline).

We will use this basic structure:

<r:RibbonButton/>

Our code will then appear like this:

Now go and press F5 and take a look at your application. If you position mouse over buttons (yes, they ARE currently invisible) you should see them reacting and changing colors when you hover them or click on them)

Yes, and groups also appear to be nameless. We are going to fix that in next step which is slightly more complex.

In next part, tomorrow, November 6, I will guide you through adding icons, labels and even tool tips to our ribbon.

Also, I am grateful for all your comments on Facebook or via e-mail and suggestions I am receiving from you. This blog is conceived on idea that you, as readers, share your feelings, suggestions and ideas. Thank you so much for this great effort and time you are investing.