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.

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.

Setting project type and related properties

Setting project type and related properties

2. Next step is to add reference to your project. Right – click on References folder and then click on Add Reference…

Adding reference to WPF project

Adding reference to WPF project

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.

Add reference dialog in Expression Blend 2

Add reference dialog in Expression Blend 2

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:

XAML: Adding reference to Rfree WPF ribbon control

XAML: Adding reference to Rfree WPF ribbon control

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:

XAML: Adding r:RibbonWindow

XAML: Adding r:RibbonWindow

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:

XAML: Adding ribbon title

XAML: Adding ribbon title

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

Simple WPF ribbon interface implemented

Simple WPF ribbon interface implemented

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)

Comments (33)

  1. How to add shortcut keys support in ribbon control.

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

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

    • 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.Navigation;
      using System.Windows.Shapes;

      namespace RibbonTutorial
      {
      ///
      /// Interaction logic for MainWindow.xaml
      ///
      public partial class RibbonWindow : MainWindow
      {
      public RibbonWindow()
      {
      InitializeComponent();
      }
      }
      }

  4. 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?!

    • your class should inherit from RibbonWindow
      so omit window and replace it with RibbonWindow

      your class definition will be :
      public partial class MainWindow : RibbonWindow

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

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

  7. how can this project “with ribbon control” open in visual statue 2008 ????????????????

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

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

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

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

  12. This get screwed up in Windows 7 when maximized. The RibbonWindow goes black and you cannot access the Title bar.

    • Anyone found a solution to this problem ?

    • This happens to me but only when I run on multiple monitors.

    • I have a similar problem too on Windows 7 and VS 2010 Ultimate (trial).

      All is working fine except that the background of the window becomes black.

      it turns to black when I change this: <window ….. to <r:RibbonWindow

      If I use the Ribbon in the standard <Window…. the background has the right color…..

  13. I found out that this Library seems not to be compatible with Visual Studio 2010 :(

  14. http://alexgorbatchev.com/wiki/SyntaxHighlighter

    this will do the syntax high light trick in wordpress ;)

  15. Hi,

    Can you please tell me about “RibbonControlsLibrary.dll”…like how can i get this file, is there any licensing issues…etc..

    upul

  16. Hi,

    any way to get the : “RibbonControlsLibrary.dll” i appreciate the effort and like the tutorial, but im still having problems making it running, and still need some dll files i think, could you please provide us some more clarification…

  17. my code same this tutorial, but result is not expected, border and title of old window style still appearance, i don’t understand, please help me.

  18. Where is the download, i can not seem to find it.

  19. Where is the dll download, i can not seem to find it.

  20. Replace :
    xmlns:r=”clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary”
    with :
    xmlns:ribbon=”http://schemas.microsoft.com/winfx/2006/xaml/presentation/ribbon”

    and delete “: Window” in *.cs

    :) Enjoy

  21. Hurray! quite quickly got step 1 working, in VS 20xx you will need this in the RibbonWindow class

    using Microsoft.Windows.Controls.Ribbon;

    namespace yournamespace
    {

    public partial class MainRibbonWindow : RibbonWindow
    {
    public MainRibbonWindow()
    {
    InitializeComponent();
    }
    }
    }

  22. This is awsome! I have just been tasked with building a new a new app and need to make it fit well with our Win 7 Office 2010 rollout. The company has still has not approved VS 2010 for development. So, I am stuck with 2008. This helps me sooooo much!
    Thank you!

  23. Give me the location to down load the Ribboncontrollibrary.dll
    is it available in your site please reply me

  24. Im sorry. im a little bit slow. i can’t get this line of yours “Now, first step is to add XAML reference to DLL you’ve just added to your project.”

Trackbacks

  1. Pingback: Download free WPF ribbon control (Windows Scenic and Office 2007 style, too)

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

  3. Pingback: HOW TO: Use and add ribbon to your WPF applications? (Part 3)

  4. Pingback: Taekyun Kim

  5. Pingback: Taekyun Kim

  6. Pingback: Taekyun Kim

  7. Pingback: Martin H. Normark

  8. Pingback: Martin H. Normark

  9. Pingback: Martin H. Normark

  10. Pingback: WPF ribbon control roadmap and look into the future

  11. Pingback: Digital Thoughts @ Wesstyware » Blog Archive » Microsoft Ribbon UI/UX Resources – Ideas about user interface design, development, and other digital fun.

  12. Pingback: Dev Info

  13. Pingback: WPF Ribbon (CTP) – Part 1 « Shadow of the mind

  14. Pingback: WPF Ribbon (CTP) – Part 1 – Add Ribbon and Customize « Shadow of the mind – Nadia's Blog

  15. Pingback: sampath

  16. Pingback: How to make a ribbon style menu in vb.net | IdealProgrammer.com

  17. Pingback: userbarna

  18. Pingback: Marilyn