HOW TO: Use and add ribbon to your WPF applications?
Dear visitor: Please keep in mind that this post is originally from Vibor Cipan's personal blog, the name of which we eventually adopted as our company name together with its conveniently-named URL. We're keeping the posts on our official company blog for all the subscribers to Vibor's blog who have read and commented on his previous posts. Please be aware that this post represents Vibor's personal thinking few years ago and doesn't necessarily represent the opinions of the UX Passion as a company today.
How to add ribbon control to your Windows Presentation Foundation (WPF) application? How to add it trough Expression Blend or Visual Studio 2008? This is first part of tutorial series and it shows you how to add ribbon and how to use it in your applications.
First thing first – you will need free WPF ribbon control for completing this tutorial.
Please note that this article is first in series of tutorials in which I will go through adding, customizing and deploying your WPF solution with ribbon control. However, I will be mostly focusing on front-end (UX / UI) side of story rather than on adding programming logic in behind (but of course, we will go and write couple of C# lines, for sure).
At the end of this series you will know how to add ribbon control to your WPF application, how to decide is ribbon good solution for your application and what you should think about from the user experience perspective and many more related things.
From this point on, I will assume that you have obtained ribbon control. So, let’s start our journey and tame the WPF ribbon control.
Please note – by clicking on certain images they will open in new page and be nice and big :)
1. Start your Expression Blend 2 and create new WPF Application (.exe). Set the name for your solution, location, programming language (I will go for Visual C#, but you can use Visual Basic, too) and target platform. You should target .NET Framework 3.5 same as I did.
2. Next step is to add reference to your project. Right – click on References folder and then click on Add Reference…
3. Add Reference dialog shows. Select the RibbonControsLibrary.dll file (one that you have obtained following the instructions in this article) and click Open to add it to your project in Expression Blend.
After you click Open you should be able to see RibbonControlsLibrary.dll added to other references.
4. Click on Split button to get view on code and design surface at same time in Expression Blend 2.
Now, first step is to add XAML reference to DLL you’ve just added to your project.
You should add the following line to your code:
After you do that, your code should look like this:
5. Now we need to dig little bit more into XAML code. Next step is to use r:RibbonWindow as root element for your current window. That means that you should go in your code and add r:RibbonWindow instead of Window.
Your code will look like this after you make all changes:
6. Our next step is the first one that will bring us significantly closer to achieving our goal – adding ribbon in WPF application.
Let’s dive into code again and add this line:
<r:Ribbon Title="WPF Ribbon - Document1" x:Name="ribbon" />
Please note that you should position this line in the main grid called LayoutGrid. So, after that your code will look like this:
7. Now go and press F5 to run your solution. Ta-dam... Your ribbon interface in WPF is here! I don’t know about you but I was pretty happy when I saw this for the first time (and for the next couple of times too…)
Try clicking on bluish menu button, on arrow pointing down at QAT (you can already use some of provided functionality…)
8. Now you might go and ask yourself where are all the tabs, buttons, quick access toolbar (QAT)… Well, I will show you in next part of this tutorial how to add tabs, buttons and Quick Access Toolbar in your WPF application with ribbon interface. This was just heating up, and besides – elections in USA are today, I don’t really expect you to go implementing WPF ribbon in your applications during today. Go out and vote (if you are form USA) or stay home and hope (rest of the world).
Our next meeting, let’s say Wednesday, November 5th?
And yeah, I’ve almost forgot – full XAML code listing is here:
<r:RibbonWindow 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" x:Class="RibbonTutorial.Window1" x:Name="Window" Title="Window1" Width="640" Height="480"> <Grid x:Name="LayoutRoot"> <r:Ribbon Title="WPF Ribbon - Document1" x:Name="ribbon" /> </Grid> </r:RibbonWindow>
(Anyone know some good “code enhancers” for WordPress powered blogs like this one is? This looks ugly! Feel free to suggest in comments, I will appreciate it!)