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

This part explains how to add application menu (Jewl / Orb) into WPF ribbon control. I am explaining how to add list of recent files, menu commands (including SplitButton type and cascading menu structure), separator as well as Exit and Options button in the application menu footer part.

Be sure to check previous parts of this tutorial because I am building this tutorial on the premise that you have grasped concepts introduced earlier in tutorials.

Upfront, my apologies for ugly code listing, I’m still looking for good code-formatter / styler for Word Press so if someone knows for good one, please let me know in comments. This code looks just ugly now

Here are the all previous tutorials:

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)

So, idea in this tutorial is to build application menu (Jewl / Orb) menu which is a part of our WPF ribbon control. So, let’s get started.

First we need to define RibbonCommand with the following characteristics:

<r:RibbonCommand x:Key="ApplicationButton"
Executed="OnApplicationButtonExecuted"
CanExecute="OnCanExecute"
LabelTitle="Application Button"
LabelDescription="Close the application."
LargeImageSource="Images\ReadingModeHH.png"
SmallImageSource="Images\ExitHS.png"
ToolTipTitle="Office Ribbon"
ToolTipDescription="Click here to open, save, or print, and to see everything else you can do with your document."
ToolTipImageSource="Images\ParagraphMarkHT.png"
ToolTipFooterTitle="Press F1 for more help."
ToolTipFooterImageSource="Images\OutlookSearchHelpHS.png"/>

We have set several properties defining the basic look and the feel of our application button. When you position your mouse over application button it will look somewhat like this:

Now let’s move further.

We know that if we open our application menu we will see number of commands and also number of recently opened files. We will add some code that will generate fake list of recent files.

In your code-behind file add the following:

#region MostRecentFileSelected
 private void ribbonApplicationMenu_MostRecentFileSelected(object sender, MostRecentFileSelectedEventArgs e)
 {
 MessageBox.Show(((MostRecentFile)e.SelectedItem).Name, "Most Recent File Selected:");
 }
 #endregion

 public class MostRecentFiles : ObservableCollection<MostRecentFile>
 {
 public MostRecentFiles()
 {
 Add(new MostRecentFile("First document.docx", true));
 Add(new MostRecentFile("Second document.docx", false));
 Add(new MostRecentFile("Ribbon Design Document.docx", false));
 }
 }

 public class MostRecentFile
 {
 public MostRecentFile(string name, bool isFixed)
 {
 Name = name;
 IsFixed = isFixed;
 }

 public string Name
 {
 get;
 set;
 }

 public bool IsFixed
 {
 get { return _isFixed; }
 set { _isFixed = value; }
 }
 bool _isFixed;
 }

Note that we have defined event handler for MostRecentFileSelected and we will call it from our XAML code. We will also use class from above as Dynamic Resource. In XAML it will appear like:

<r:RibbonApplicationMenu.RecentItemList>
<r:RibbonHighlightingList 
MostRecentFileSelected="ribbonApplicationMenu_MostRecentFileSelected"
ItemsSource="{DynamicResource MostRecentFiles}"
DisplayMemberPath="Name" />
</r:RibbonApplicationMenu.RecentItemList>

Basically, we want to achieve this look:

What about the footer part with Options and Exit button? It’s fairly simple to define it like this:

<r:RibbonApplicationMenu.Footer>
 <DockPanel LastChildFill="False" >
 <r:RibbonButton DockPanel.Dock="Right" Margin="2" Command="{StaticResource Exit}" />
 <r:RibbonButton DockPanel.Dock="Right" Margin="2" Command="{StaticResource Options}" />
 </DockPanel>
 </r:RibbonApplicationMenu.Footer>

All magic is in using the DockPanel and two regular RibbonButtons. Hey, don’t forget to define Exit and Options as Resources (you can see earlier parts of the tutorial to see how it was done).

Okay, let’s move to the left part of the application menu with commands like New, Open, Save, Save As…

First note that we have several types of buttons there and even separator. They are defined in the following way:

<r:RibbonApplicationMenuItem Command="{StaticResource New}" />
<r:RibbonApplicationMenuItem Command="{StaticResource Open}" />
<r:RibbonApplicationMenuItem Command="{StaticResource Save}" />

But then, we can see that “Save As” button is a split button. And when we click on it, it looks like this:

First we will use RibbonApplicationSplitMenuItem to define Save As as a split button and then we will define its child elements.
And here is how it looks in XAML:

<r:RibbonApplicationSplitMenuItem Command="{StaticResource SaveAs}" >

 <r:RibbonApplicationMenuItem Command="{StaticResource New}" />

 <r:RibbonApplicationMenuItem Command="{StaticResource Open}" />

 <r:RibbonApplicationMenuItem Command="{StaticResource Save}" />

 <r:RibbonApplicationMenuItem Command="{StaticResource SaveAs}" />

 <r:RibbonApplicationMenuItem Command="{StaticResource New}" />

 </r:RibbonApplicationSplitMenuItem>

 <Separator />

Yup, I’ve added little Separator at the end, just to be there

But we can have even more complicated scenario where one of the buttons in the right part of the menu is split button with its own menu.

Basically, we might ask ourselves how to achieve this specific scenario shown on next picture:

Though it looks a bit complex, XAML is pretty straightforward and you can get it easily (and yes that is MenuItem in there):

<r:RibbonApplicationMenuItem Command="{StaticResource Publish}">

 <r:RibbonApplicationMenuItem Command="{StaticResource New}" />

 <r:RibbonApplicationMenuItem Command="{StaticResource Open}" />

 <r:RibbonApplicationMenuItem Command="{StaticResource Save}" />

 <r:RibbonApplicationMenuItem Command="{StaticResource New}" >

 <r:RibbonApplicationMenuItem Command="{StaticResource New}" />

 <r:RibbonApplicationMenuItem Command="{StaticResource New}" >

 <r:RibbonApplicationMenuItem Command="{StaticResource New}" />

 <MenuItem Header="Regular MenuItem" IsCheckable="True" IsChecked="True" />

 <r:RibbonApplicationMenuItem Command="{StaticResource New}" />

 </r:RibbonApplicationMenuItem>

 </r:RibbonApplicationMenuItem>

 </r:RibbonApplicationMenuItem>

And now, all XAML code in single, though huge, piece for your enjoyment. Don’t forget to define all StaticResources like we did for all commands before in previous tutorials.

XAML code listing

<r:Ribbon.ApplicationMenu>
<r:RibbonApplicationMenu Command = "{StaticResource ApplicationButton}">

<r:RibbonApplicationMenu.RecentItemList>

<r:RibbonHighlightingList

MostRecentFileSelected="ribbonApplicationMenu_MostRecentFileSelected"

ItemsSource="{DynamicResource MostRecentFiles}"

DisplayMemberPath="Name" />

</r:RibbonApplicationMenu.RecentItemList>

<r:RibbonApplicationMenu.Footer>

<DockPanel LastChildFill="False" >

<r:RibbonButton DockPanel.Dock="Right" Margin="2" Command="{StaticResource Exit}" />

<r:RibbonButton DockPanel.Dock="Right" Margin="2" Command="{StaticResource Options}" />

</DockPanel>

</r:RibbonApplicationMenu.Footer>

<r:RibbonApplicationMenuItem Command="{StaticResource New}" />

<r:RibbonApplicationMenuItem Command="{StaticResource Open}" />

<r:RibbonApplicationMenuItem Command="{StaticResource Save}" />

<r:RibbonApplicationSplitMenuItem Command="{StaticResource SaveAs}" >

<r:RibbonApplicationMenuItem Command="{StaticResource New}" />

<r:RibbonApplicationMenuItem Command="{StaticResource Open}" />

<r:RibbonApplicationMenuItem Command="{StaticResource Save}" />

<r:RibbonApplicationMenuItem Command="{StaticResource SaveAs}" />

<r:RibbonApplicationMenuItem Command="{StaticResource New}" />

</r:RibbonApplicationSplitMenuItem>

<Separator />

<r:RibbonApplicationSplitMenuItem Command="{StaticResource Print}">

<r:RibbonApplicationMenuItem Command="{StaticResource New}" />

<r:RibbonApplicationMenuItem Command="{StaticResource Open}" />

<r:RibbonApplicationMenuItem Command="{StaticResource Save}" />

</r:RibbonApplicationSplitMenuItem>

<r:RibbonApplicationMenuItem Command="{StaticResource Prepare}">

<r:RibbonApplicationMenuItem Command="{StaticResource New}" />

<r:RibbonApplicationMenuItem Command="{StaticResource Open}" />

<r:RibbonApplicationMenuItem Command="{StaticResource Save}" />

<r:RibbonApplicationMenuItem Command="{StaticResource New}" />

<r:RibbonApplicationMenuItem Command="{StaticResource Open}" />

<r:RibbonApplicationMenuItem Command="{StaticResource Save}" />

<r:RibbonApplicationMenuItem Command="{StaticResource New}" />

<r:RibbonApplicationMenuItem Command="{StaticResource Open}" />

<r:RibbonApplicationMenuItem Command="{StaticResource Save}" />

<r:RibbonApplicationMenuItem Command="{StaticResource New}" />

<r:RibbonApplicationMenuItem Command="{StaticResource Open}" />

<r:RibbonApplicationMenuItem Command="{StaticResource Save}" />

<r:RibbonApplicationMenuItem Command="{StaticResource New}" />

<r:RibbonApplicationMenuItem Command="{StaticResource Open}" />

<r:RibbonApplicationMenuItem Command="{StaticResource Save}" />

</r:RibbonApplicationMenuItem>

<r:RibbonApplicationMenuItem Command="{StaticResource Send}">

<r:RibbonApplicationMenuItem Command="{StaticResource New}" />

<r:RibbonApplicationMenuItem Command="{StaticResource Open}" />

<r:RibbonApplicationMenuItem Command="{StaticResource Save}" />

</r:RibbonApplicationMenuItem>

<r:RibbonApplicationMenuItem Command="{StaticResource Publish}">

<r:RibbonApplicationMenuItem Command="{StaticResource New}" />

<r:RibbonApplicationMenuItem Command="{StaticResource Open}" />

<r:RibbonApplicationMenuItem Command="{StaticResource Save}" />

<r:RibbonApplicationMenuItem Command="{StaticResource New}" >

<r:RibbonApplicationMenuItem Command="{StaticResource New}" />

<r:RibbonApplicationMenuItem Command="{StaticResource New}" >

<r:RibbonApplicationMenuItem Command="{StaticResource New}" />

<MenuItem Header="Regular MenuItem" IsCheckable="True" IsChecked="True" />

<r:RibbonApplicationMenuItem Command="{StaticResource New}" />

</r:RibbonApplicationMenuItem>

</r:RibbonApplicationMenuItem>

</r:RibbonApplicationMenuItem>

<Separator />

<r:RibbonApplicationMenuItem Command="{StaticResource Workflows}" />

<Separator />

<r:RibbonApplicationMenuItem Command="{StaticResource Close}" />

</r:RibbonApplicationMenu>

</r:Ribbon.ApplicationMenu>

So, this concludes yet another free WPF ribbon control tutorial explaining you how to add application menu and application menu items and number of different goodies in there.

Stay tuned for more stuff to come in future and thanks for your suggestions and ideas for new parts of this tutorial series.

24 Responses to “ HOW TO: Use and add ribbon to your WPF applications? (Part 6) ”

1. WEB Developer says:

   August 7, 2009 at 2:53

   Hi. I’m C# developer and I’m working on my new project. It is a program to decorate photo (Photo Workshop). I still working and I’m using Ribbon in the project. Right now I’m writing code for recent files store and representation. You article saved me a lot of time. Thank you.

   Reply
   • UXPassion.com says:

     August 8, 2009 at 0:04

     No problem, I’m happy it was useful to you. In case you need more help, suggestions or anything – just let me know! Good luck with the work!

     Reply
2. pooran says:

   August 24, 2009 at 11:33

   Can you please share the code with out the dll. I have already downloaded the dll

   Reply
   • UXPassion.com says:

     August 24, 2009 at 14:34

     Hi pooran,

     Have you read this: http://www.uxpassion.com/2009/08/wpf-ribbon-control-roadmap-and-look-into-the-future/ My code might not be of much value to you now…

     Vibor

     Reply
3. Matteo says:

   August 26, 2009 at 17:02

   Hello,
   I’m trying to use ribbon under Windows XP and it shows up kinda ugly.. I mean, ribbon bar area looks good but outer border of the window seems not antialiased and also looks flat blue (with default blue windows xp style). Setting Grid background to any color brings to worst results, close, minimize and maximize buttons are hidden and window area looks like a colored rectangle above a rounded blue larger rectangle.

   Reply
   • Spook says:

     May 31, 2010 at 8:48

     I tried using it under XP with the same results. Any ideas?

     Reply
4. san says:

   September 16, 2009 at 21:38

   Hello,

   First all thank you for the tutorials

   I having problem running, it complains about the “MostRecentFileSelectedEventArgs” in

   ribbonApplicationMenu_MostRecentFileSelected(object sender, MostRecentFileSelectedEventArgs e)

   Am I missing a reference or do I need to define MostRecentFileSelectedEventArgs. I am don’t know how or where to define “MostRecentFileSelectedEventArgs”.

   Reply
5. Stiaan vd Westhuizen says:

   October 19, 2009 at 17:51

   Hi

   I’ve got a ObservableCollection Menus property in my VeiwModel, I use the XAML code

   Now it generates the Menu but is shows blank, in other words when I hover with my mouse over it, it shows the Menus but no text what Am I doing wrong

   Please Help

   regards

   Stiaan

   Reply
   • UXPassion.com says:

     October 19, 2009 at 18:09

     Hi and thanks for your comment. Unfortunately, I don’t know the answer myself, but I hope some of our readers will know the solution for your problem and help you out. Again, thanks for comment!

     Reply
6. Steve says:

   November 8, 2009 at 19:55

   Would it be possible to provide the xaml and code behind for these tutorials? I’m just starting out and have followed each of the tutorials you provided however there are some pieces left out, specifically in the code behind.

   Reply
   • UXPassion.com says:

     November 8, 2009 at 20:46

     Hi Steve,
     Thanks for your comment and feedback. I’d love to share all the code but due to licensing reasons I’m not able to. Fact is that under the WPF Ribbon EULA I’m not allowed to share the Ribbon control itself and without – code does not make much sense.

     However, I will look into other options (your suggestions are welcomed as well) and see what can I do.

     Again, thanks so much!

     Reply
     • Steve says:

       November 9, 2009 at 1:47

       Thanks for the quick response. I understand the restricitions of licensing, it’s just a shame because the ribbon is a powerful tool that can be used in so many situations. Unfortuneately I don’t have a great deal of knowledge with some of these more advanced topics so when I see some of it and want to use it all I can do is just stumble around to figure it out or not. I think I’ve found one that will work with winforms rather than wpf so I’ll give that a shot. thanks again

       Reply
       • UXPassion.com says:

         November 9, 2009 at 4:37

         No problem Steve. I’d suggest you to go and read this article so you can see what the WPF ribbon roadmap looks: http://www.uxpassion.com/2009/08/wpf-ribbon-control-roadmap-and-look-into-the-future/

         Thanks again for comment and your visit!

         Reply
7. Rick says:

   January 2, 2010 at 19:15

   Hi, I’m VB Developper and I wrote this Code in VB, of course. Thank you for your Code Sample and your description. Unfortunately in step 6 is a big mistake!
   Always in running mode I get the message
   “Unable to perform action because the specified Storyboard was never applied to this object for interactive control.; Action=’Stop’; Storyboard=’System.Windows.Media.Animation.Storyboard’; Storyboard.HashCode=’4322080′; Storyboard.Type=’System.Windows.Media.Animation.Storyboard’; TargetElement=’Microsoft.Windows.Controls.Ribbon.RibbonApplicationMenu Items.Count:0′ ”

   Can You tell me in detail where I have to put in the code snippets of part 6?

   Thank You very much for your help

   Rick (a little bit angry )

   Reply
   • UXPassion.com says:

     January 3, 2010 at 2:50

     Hi Rick,
     My code samples here are in C# – all XAML code lines should go into the .XAML file and all programming logic should go to the *.CS file. Are you sure that you are running .NET Framework 3.5 with Service Pack 1?

     As for error you are receiving – it looks like some WPF ribbon error since there is a number of internally defined Storyboard objects within the control itself. However, before you decide to continue your development – I’d suggest you go and read this article regarding the future of the WPF ribbon control and see what possible implications (if any) this might have regarding your future development with this control: http://www.uxpassion.com/2009/08/wpf-ribbon-control-roadmap-and-look-into-the-future/

     Reply
8. Collin says:

   February 5, 2010 at 0:06

   Great Stuff!

   Can you show how to make a gallery?

   Reply
9. CsMisi says:

   February 6, 2010 at 23:21

   First of all, congrats, great work. I have just one question:

   I want to have my program icon on the orb, but I don’t want to use the menu … I presume is simple. but what I had tried it didn’t worked … So that’s all: I just want my icon on the orb and nothing more …

   Reply
   • CsMisi says:

     February 7, 2010 at 22:48

     never mind Here it is for everybody, add this to your RibbonApplicationMenu (not Ribbon.ApplicationMenu as I did for the first time and it didn’t worked )

     Reply
10. Vlad says:

    May 29, 2010 at 14:08

    Hi,

    Just wanted to congratulate you for this great tutorial.

    Vlad

    Reply
    • UXPassion.com says:

      May 30, 2010 at 15:01

      Thanks so much, Vlad!

      Reply

Trackbacks

1. Vibor Cipan
2. Vibor Cipan
3. Download free WPF ribbon control (Windows Scenic and Office 2007 style, too)
4. Vibor Cipan