HOW TO: Use and add ribbon to your WPF applications? (Part 3)
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)
HOW TO: Use and add ribbon to your WPF applications (Part 5)
HOW TO: Use and add ribbon to your WPF applications (Part 6)
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!
47 Responses to “ HOW TO: Use and add ribbon to your WPF applications? (Part 3) ”
Trackbacks
- HOW TO: Use and add ribbon to your WPF applications? (Part 2)
- HOW TO: Use and add ribbon to your WPF applications?
- Download free WPF ribbon control (Windows Scenic and Office 2007 style, too)
- HOW TO: Use and add ribbon to your WPF applications? (Part 4)
- Some new C# Tutorials | Pocko.org
why i did exactly the same, but at the code InitializeComponet() here i got this error?
Cannot convert string ‘NearestNeighbor’ in attribute ‘BitmapScalingMode’ to object of type ‘System.Windows.Media.BitmapScalingMode’. NearestNeighbor is not a valid value for BitmapScalingMode. Error at object ‘System.Windows.Setter’.
@tao: Would you mind sending me your code to t(dash)vicip(at)microsoft(dot)com so I can take a look at it?
I have same problem
Cannot convert string ‘NearestNeighbor’ in attribute ‘BitmapScalingMode’ to object of type ‘System.Windows.Media.BitmapScalingMode’. NearestNeighbor is not a valid value for BitmapScalingMode. Error at object ‘System.Windows.Setter’.
My copy code to XAML in MS Ex blend 2
I’m getting the same error as the two above me. Has there been any solution found as to why we are getting it?
This is interesting. Guys, do you have .NET Framework 3.5 SP 1 on your machines? Can some of you send me your code so I can take a look at it? I’ve gone trough this tutorial again by myself and it works just fine.
NearestNeighbor did not exist in .Net 3.0. According to MSDN it was not introduced until .Net 3.5.
Excellent tutorial!
@Chris: Thanks so much Chris for nice words and for your insight! Really appreciated!
Nice tutorial. What about creating a “RibbonTab” XAML only.
I have an plugin-based application. Each plugin adds a new tab to the ribbon whenever it is enabled. At the moment I’ve been doing it programmatically, which is a PITA. Could I do this in a similar fashion that for a window?
Hello Vibor!
Really nice tutorial for the RibbonControl. Thanks for your work.
What I don’t get together is the Office 2007 Look for the Ribbon. Probably some of the next topics?
Regards
Carsten
@Carlos – I am not sure on what you are thinking about? Are you referencing on generating tabs during runtime or something else?
@Carsten: Thank you for nice comment. Next tutorial (due to end of this week) will explain how to use Office 2007 theme and even how to create you own themes! Feel free (other readers too) to suggest other topics that might be interesting to you.
Hey Carsten, as promised: http://www.uxpassion.com/2008/12/how-to-use-add-ribbon-to-wpf-applications-part-4/
I have created the app just as you explain, but when i created iteams in other tabs such at the help tab, when i click it i get an error… its a nullref was un handled
the code is the same as what is on the home tab, and that works fine, but when i move it to the help tab it doesnt work any ideas?
@Edward: I will take a look at this case and let you know. As far I as I remember, I was not having this problem…
Dear Permalink
I have same problem
Cannot convert string ‘NearestNeighbor’ in attribute ‘BitmapScalingMode’ to object of type ‘System.Windows.Media.BitmapScalingMode’. NearestNeighbor is not a valid value for BitmapScalingMode. Error at object ‘System.Windows.Setter’.
Please solve it as soon as possible i want see some thing THNAKX
Dear Permalink
I have same problem
Cannot convert string ‘NearestNeighbor’ in attribute ‘BitmapScalingMode’ to object of type ‘System.Windows.Media.BitmapScalingMode’. NearestNeighbor is not a valid value for BitmapScalingMode. Error at object ‘System.Windows.Setter’.
Please solve it as soon as possible i want see some thing THNAKX
Guys, you will need .NET Framework 3.5 with Service Pack 1 for this to work.
how to add image in Ribbon Button.plz quickly tell me
It is explained in 5th part of this tutorial so you might want to take a look there. I hope it helps!
Gut!
Thanks for the tutorial – it really helped me getting started with the control
Be aware that using RibbonCommand with code-behind event listeners appears to create a severe memory leak. I outlined the issue along with a sample on my blog:
http://www.hardcodet.net/2009/04/wpf-ribboncommand-memory-leak
Cheers,
Philipp
Thanks for pointing this out! Again, I guess this will be fixed by the time ribbon becomes part of WPF 4.0 as it was planned…
hello ux !
I get a error when I add these line codes on the above root grid.
Error 1 The attached property ‘RibbonWindow.Resources’ is not defined on ‘Window’ or one of its base classes. C:\Users\quangtran\Documents\Visual Studio 2008\Projects\tamanh\tamanh\Wnd_Main.xaml
pls help me
The tooltips are displaying at the outer edge of the application window instead of near/relative to the buttons. Anyone have an idea on what is wrong?
I don’t know any fixes for this – I guess WPF team will solve it by final release if it is considered to be a bug!
I can’t seem to write code … I meant
…Ribbon Margin=”1,1,1,0″ Height=”139″ VerticalAlignment=”Top” …
Hey there, great tutorial.
Regarding Tooltips coming at the bottom, it is a setting for the itself. You have to make sure that the Ribbon is not resizing vertically according to the main window.
In my case I used the following:
….
What do you need help with?
thank you very much for your great tutorial about using ribbon user interface on this page
I have a little problem that I wish you help me solve it , I followed
your instruction step by step and every thing is almost good except for
one bad thing,
when I run the application I see both the old user
interface (the traditional one) with the ribbon user interface above it
not covering it completely , I mean I see two user interfaces so the
ribbon is no completely covering the old UI
so how can I apply the ribbon UI to the whole form and cover the old UI
best regards
taaemoh
Why can’t I see the text of my RibbonGroup?
All of my “chunks” and buttons are disabled. I set the “IsEnabled” property to “True”, and they still are dimmed out and won’t click. What is wrong?
Hey there! Great tutorial!!
Everything goes good till the step where I type:
I get this error:
“The atachable property ‘Resources’ was not found in type ‘RibbonWindow”
Someone could help me??
Thanks in advance.
Ok it is fixed … don’t know how but it is fixed
Main form must be derived from RibbonWindow.
By the way, is there a way to use Resources while not deriving main form from RibbonWindow? Under XP it’s the only way for main window to look… er, normal, changing it to RibbonWindow screws the look (it looks very 95-ish)
Hi, with VS2010 & Net 4 i recieve this error:
‘RibbonTutorial.Window1′ does not contain a definition for ‘OnShowClipboardGroup’ and no extension method ‘OnShowClipboardGroup’ accepting a first argument of type ‘RibbonTutorial.Window1′ could be found (are you missing a using directive or an assembly reference?) c:\users\xarkam\documents\visual studio 2010\Projects\WpfApplication1\WpfApplication1\MainWindow.xaml
Resolved.
Faster than I was even able to take a look at the problem
Glad it’s all great now!
and the solution is ?
Thanks to share when you find.
First, I’d like to thank to people like you over the net for shring these great capabilities.
I have a “small” question. When I shrink the r:Window to minimum (VS says that Height =-1) the application crashes. Any Ideas?
Regards,
Igal
Igal Kroyter, why don’t you use minWidth and minHeight? I think this will prevent this exception.
And I also have one question. I want to load dynamic resource to the RibbonCommand’s LabelTitle property.
So the construction is like this: LabelTitle=”{DynamicResource appclose}”
But LabelTitle is not a DependencyProperty and I get an exception when try to run the application.
Does anyone have an idea of possible workaround of this problem?
The HasDialogLauncher property seems to be missing in current releases of the WPF Ribbon. How to achive the same behaviour as described here in new releases?
How Can I get the same structure in the clipboard as in Office?? Cut ,Copy and Delete are one below the other ??