WPF Ribbon - ApplicationSplitMenuItem

If you have started working on the newly released WPF Ribbon, you would have noticed that you can use ApplicationMenuItem and ApplicationSplitMenuItem to create menus. What is the basic difference between them?

To start with, let me show you via some screenshots:

Below is an ApplicationMenuItem

And, below is an ApplicationSplitMenuItem

As the name suggests, it adds a split functionality with it’s submenu. The parent ApplicationSplitMenuItem responds to commands whereas the parent ApplicationMenuItem does not. I think it again drills down to which one to use based on your application requirements, but Office 2007 can be taken as an excellent example to compare the usage.

Below is the code snippet to create Application Split Menu

<r:RibbonApplicationSplitMenuItem>    <r:RibbonApplicationSplitMenuItem.Command>        <r:RibbonCommand             LabelTitle="Menu"            LargeImageSource="images/windows.png"            Executed="RibbonCommand_Executed_14"/>    </r:RibbonApplicationSplitMenuItem.Command>    <r:RibbonApplicationSplitMenuItem>        <r:RibbonApplicationMenuItem.Command>            <r:RibbonCommand LabelTitle="Submenu 1"                              LargeImageSource="images\favorites-large.png"                             Executed="RibbonCommand_Executed_15"/>        </r:RibbonApplicationMenuItem.Command>    </r:RibbonApplicationSplitMenuItem>    <r:RibbonApplicationSplitMenuItem>        <r:RibbonApplicationMenuItem.Command>            <r:RibbonCommand LabelTitle="Submenu 2"                             LargeImageSource="images\favorites-large.png"                             Executed="RibbonCommand_Executed_16"/>        </r:RibbonApplicationMenuItem.Command>    </r:RibbonApplicationSplitMenuItem>    <r:RibbonApplicationSplitMenuItem>        <r:RibbonApplicationMenuItem.Command>            <r:RibbonCommand LabelTitle="Submenu 3"                             LargeImageSource="images\favorites-large.png"                             Executed="RibbonCommand_Executed_17"/>        </r:RibbonApplicationMenuItem.Command>    </r:RibbonApplicationSplitMenuItem></r:RibbonApplicationSplitMenuItem>

Proper way to create Menus + Submenus in WPF Ribbon

My last post on WPF Ribbon had a working sample with Menus and Submenus in the Office Button, but something was wrong there. If you had downloaded the sample, sure you would have noticed it. Below is a screenshot:

You can see that the submenu isn’t showing the full list as in the below screenshot

What was going wrong? I wasn’t sure, may be menu needed more items? I posted this in the WPF Controls Codeplex forums, below is the reply from Samantha (MSFT :

Hi, I think you're seeing this issue because you only have 2 top-level items.  The ApplicationMenu is set to be only as tall as it takes to display all of the top-level items, so when the sub menu opens, there's not enough space to display all of your children items.

A work-around you could try would be to set something with enough height in the RibbonApplicationMenu.RecentItemList.  This can even be a blank control, like the Rectangle in the following example:

<Ribbon.ApplicationMenu>
    <RibbonApplicationMenu Command="...">
        <RibbonApplicationMenu.RecentItemList>
            <Rectangle Height="300"/>
        </RibbonApplicationMenu.RecentItemList>
        <RibbonApplicationMenuItem Command="..."/>
        <RibbonApplicationMenuItem Command="...">
            <RibbonApplicationMenuItem Command="..."/>
            <RibbonApplicationMenuItem Command="..."/>
            <RibbonApplicationMenuItem Command="..."/>
        </RibbonApplicationMenuItem Command="..."/>
    </RibbonApplicationMenu>
</Ribbon.ApplicationMenu>

Alternatively, you may want to display some recent documents (or whatever makes sense for you scenario) in the RecentItemList.  The RibbonHighlightingList is an ItemsControl which has the same highlighting and selection behavior as in Office, and can be used in place of the Rectangle in the above example to display a list of recent documents.

So there it is, ApplicationMenu’s height is the default height even for submenu items :)

Went ahead and did the workaround. Hurray! It worked!

My previous code sample didn’t have the proper code to create menus and submenus. I have changed them now.

Proper way to create menus and submenus is:

<r:RibbonApplicationMenuItem>    <r:RibbonApplicationMenuItem.Command>        <r:RibbonCommand             LabelTitle="Menu"            Executed="RibbonCommand_Executed_14"/>    </r:RibbonApplicationMenuItem.Command>    <r:RibbonApplicationMenuItem>        <r:RibbonApplicationMenuItem.Command>            <r:RibbonCommand LabelTitle="Submenu 1"                              Executed="RibbonCommand_Executed_15"/>        </r:RibbonApplicationMenuItem.Command>    </r:RibbonApplicationMenuItem>    <r:RibbonApplicationMenuItem>        <r:RibbonApplicationMenuItem.Command>            <r:RibbonCommand LabelTitle="Submenu 2"                             Executed="RibbonCommand_Executed_16"/>        </r:RibbonApplicationMenuItem.Command>    </r:RibbonApplicationMenuItem>    <r:RibbonApplicationMenuItem>        <r:RibbonApplicationMenuItem.Command>            <r:RibbonCommand LabelTitle="Submenu 3"                             Executed="RibbonCommand_Executed_17"/>        </r:RibbonApplicationMenuItem.Command>    </r:RibbonApplicationMenuItem></r:RibbonApplicationMenuItem>

You can download the updated sample below

Getting Started with the WPF Ribbon [Preview] Control

Microsoft introduced the Ribbon Interface with its Office 2007 release. Very soon, many developers (like, DevComponents’s WPF Ribbon Control and this CodeProject article) started developing their own controls.

At PDC this year, Scott Gu announced about the new WPF Ribbon Control added to the WPF Toolkit! Currently it is in its preview stage, but really stable to try some cool UI with the Ribbon :)

Where do I get the Control?

To get your copy of the WPF Ribbon (along with its source code), visit here. Its a bit complex process (doh!) that you need to accept the Office UI License, which then will give you link to download the binary and source code.

How do I start developing?

To be frank, building a Ribbon needs good ground work. You need to:

1. Understand the structure of the Ribbon and its components
2. Have a good understanding on how your application is going to use the Ribbon

It isn’t Menus now, its all Tabs :)

Lets get started

First, you need to understand the components of the Ribbon. The ‘basic’ components include:

• Application Menu
• Quick Access ToolBar
• Tabs
• Groups

Below is a more detailed diagram on the components which includes all the components

(Image Courtesy : MSDN)

You can read more about the above components and guidelines in this MSDN article

Any working Sample?

Yes, WindowsClient website has a good article on building Ribbon Control (without sample) and you can download the Hands On Lab here (which has an excellent sample!)

What about me? :D

Here is a screenshot of what I built

Sample is only for demonstration and none of the ‘twitter functions’ work.

You can download my sample below: