HOW TO: Use and add ribbon to your WPF applications?
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.
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 3)
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)
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:
xmlns:r="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"
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!)
HOW TO: Use and add ribbon to your WPF applications (Part 2)
28 Responses to “ HOW TO: Use and add ribbon to your WPF applications? ”
Trackbacks
- Download free WPF ribbon control (Windows Scenic and Office 2007 style, too)
- HOW TO: Use and add ribbon to your WPF applications? (Part 2)
- HOW TO: Use and add ribbon to your WPF applications? (Part 3)
- Taekyun Kim
- Taekyun Kim
- Taekyun Kim
- Martin H. Normark
- Martin H. Normark
- Martin H. Normark
- WPF ribbon control roadmap and look into the future
- Digital Thoughts @ Wesstyware » Blog Archive » Microsoft Ribbon UI/UX Resources - Ideas about user interface design, development, and other digital fun.
- Dev Info
How to add shortcut keys support in ribbon control.
sir:
how to create ribbon control in windows appliction using vb.net. and how to add images ,function in ribbon button on windows application.please can u tell me sir
Hii,
i did all the previous steps but at “Window1.xaml.cs” there is an error (Partial declaration of RibbonTutorial.Window1 must not specify different base classes)
how can i solve this problem
i have this exception:
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’.
how can i solve it?!
Please Help Me!
Error 1 ‘RibbonTutorial.Window1′ does not contain a definition for ‘OnCanExecute’ and no extension method ‘OnCanExecute’ accepting a first argument of type ‘RibbonTutorial.Window1′ could be found (are you missing a using directive or an assembly reference?) C:\Users\Влад\Documents\Visual Studio 2008\Projects\ReadMe! RSS Reader\ReadMe! RSS Reader\Window1.xaml 13 146 ReadMe! RSS Reader
I fixed the build issues by going into the MainWindow.xaml.cs and removing the ” : Window” from the “public partial class MainWindow : Window” line.
After edit the MainWindow.xaml.cs looks like this…
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
namespace SQLMaintWPF
{
///
/// Interaction logic for MainWindow.xaml
///
public partial class MainWindow
{
public MainWindow()
{
this.InitializeComponent();
// Insert code required on object creation below this point.
}
}
}
how can this project “with ribbon control” open in visual statue 2008 ????????????????
Where can I download the source for this project along with images used? Can’t seem to find a link.
Hi,
I’m sorry but due to distribution rights / licensing I’m not able to share the source since the whole project uses ribbon DLL and in order to use it you need to download it from Microsoft site and accept the EULA. Srry.
Dear Sir,
I get an error message early on saying “Ribbon is not supported in a Windows Presentation Foundation (WPF) project and this was using Expression Blend 3. Therefore the instructions did not work in this case.
Paul
Hi Paul,
Have you tried using it with Visual Studio 2008? Do you get the same error there?
I have my XAML below and I’m dynamically instantiating and adding a UserControl to the pnlMainView (Grid) using the pnlMainView.Children.Add(MyUserControl) method.
My problem is that the background of my UserControl is black when it shows, but it’s not supposed to be. I can easily set my UserControl background to WhiteSmoke, but I don’t want to have to do this because it will become problematic when applying themes.
About code enchancers – you can take a look at me WordPress Plugin:
http://www.fractalizer.ru/freeware-projects/wordpress-plugins/wp-synhighlight/
esra:
Cannot convert string ‘NearestNeighbor’ in attribute ‘BitmapScalingMode’
You need to install sp1 for .net 3.5
Thanks for answering this question!
This get screwed up in Windows 7 when maximized. The RibbonWindow goes black and you cannot access the Title bar.