Xceed splitbutton with menu items and sub menuitems

Question

I`m trying to have a dropdown menu under a split button. Some of these menuItems should have sub-menu items. If you want an example, click on the bookmark button in Firefox (top right).

I can't use Menu, because that is always oriented horizontally. So I went with a stackpanel:

<Window x:Class="WpfApplication3.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
    Title="MainWindow" Height="350" Width="525">
<Grid>


    <xctk:SplitButton Content="SplitButton" BorderThickness="1" BorderBrush="Black" Margin="0,0,408,290">
        <xctk:SplitButton.DropDownContent>
            <StackPanel Width="161" HorizontalAlignment="Left">


                <MenuItem Header="MenuItem1" HorizontalAlignment="Left" Width="517">
                    <MenuItem.Items>
                        <MenuItem Header="submenuItem1"/>
                        <MenuItem Header="submenuItem2"/>                            
                    </MenuItem.Items>

                </MenuItem>
                <MenuItem Header="MenuItem2"/>
                <MenuItem Header="MenuItem3"/>

            </StackPanel>                   
        </xctk:SplitButton.DropDownContent>

    </xctk:SplitButton>
</Grid>

Problem here is that the sub menu items don't show up. They don't even have the little arrows next to them. You can do this without the SplitButton, just leaving the stackpanel and everything in it, you'll have the same problem. I've tried putting the parent Menu item in its own tag, but I want the sub-menu items to appear to the right of their parent (just like the firefox example: Assuming your firefox window is not maximized, and you've allowed enough screen-space for the item to appear).

Answer 1

the way you're using the MenuItem control is wrong, it is meant to be hosted inside the Menu control or another MenuItem.

As for the solution to your problem, there are two. the first one is to write a custom control that reuses the ContextMenu to host the menu items, you will write something like this:

    <m:SplitButton Content="Split Button" Placement="Bottom">
        <MenuItem Header="MenuItem 1"/> 
        <MenuItem Header="MenuItem 2"> 
             <MenuItem Header="MenuItem 1"/> 
             <MenuItem Header="MenuItem 2"/> 
        </MenuItem>
    </m:SplitButton

http://www.codeproject.com/Articles/20612/A-WPF-SplitButton

the second approach is to host the Menu control inside the DropDownContent and re-style everything, there will be a lot of xaml markup.

the Menu control will be easy to re-style, the only thing you need to do is make sure that menu items are displayed vertically instead of horizontally, using the following markup:

    <Style TargetType="Menu">
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Vertical" IsItemsHost="True" />
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
    </Style>

the hardest part is styling the MenuItems, they are styled based on their Role property. It can have four possible values:

1. TopLevelHeader : direct child of Menu with sub-menu items.
2. TopLevelItem : direct child of Menu without sub-menu items.
3. SubmenuHeader : direct child of MenuItem with sub-menu items.
4. SubmenuItem : direct child of MenuItem without sub-menu items.

Regards