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>

Nov 05 Chakkaradeep | WPF

Comments (0)

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>