in WPF

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:

image

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

image

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!

proper-ribbon

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

 

 

Write a Comment

Comment

Time limit is exhausted. Please reload the CAPTCHA.