CODEWITHSUNDEEP
c#wpf
Rafael
Rafael

Reputation: 85

Create Vertical Menu

I am try do a menu like the photo below:

This is the menu I am trying do

I have this code:

    <Menu >
        <Menu.ItemsPanel>
            <ItemsPanelTemplate>
                <VirtualizingStackPanel Orientation="Vertical"/>
            </ItemsPanelTemplate>
        </Menu.ItemsPanel>
        <MenuItem Header="Item1">
            <MenuItem Header="SubItem 1">
                <MenuItem Header="SubItem 1.1"></MenuItem>
                <MenuItem Header="SubItem 1.2"></MenuItem>
                <MenuItem Header="SubItem 1.3"></MenuItem>
                <MenuItem Header="SubItem 1.4"></MenuItem>
            </MenuItem>
            <MenuItem Header="SubItem 2"></MenuItem>
            <MenuItem Header="SubItem 3"></MenuItem>
            <MenuItem Header="SubItem 4"></MenuItem>
        </MenuItem>
        <MenuItem Header="Item2">
            <MenuItem Header="SubItem 1"></MenuItem>
            <MenuItem Header="SubItem 2"></MenuItem>
            <MenuItem Header="SubItem 3"></MenuItem>
        </MenuItem>
    </Menu>

but this code returns a menu like in the pictures below:

First appears this:

enter image description here

and when I put the mouse hover the Item 1 appears like this:

enter image description here

I want to that the second level of the Menu open on the right side of the first, like in the first image.

Upvotes: 3

Views: 2133

Answers (1)

qqbenq
qqbenq

Reputation: 10460

You have to create a custom template for your Menu to achieve your goal.

Here is the default ControlTemplate for Menu, I think the easiest way is to start from that. You will have to add HorizontalOffset and VerticalOffset for the PopUp in the TopLevelHeader template, so you can align it to your needs (or simply set Placement to Right - which is easier in my opinion).

Also, you should set a Width for your menu (either directly or by placing it inside some container that restricts it's Width), otherwise it will take up all the space and the PopUp might not be visible .

I will not replicate the whole XAML here, but here is the important part:

// ...
<!-- TopLevelHeader -->
    <ControlTemplate x:Key="{x:Static MenuItem.TopLevelHeaderTemplateKey}"
             TargetType="MenuItem">
        <Border Name="Border" >
            <Grid>
                <ContentPresenter 
                    Margin="6,3,6,3" 
                    ContentSource="Header"
                    RecognizesAccessKey="True" />
                  <Popup 
                    Name="Popup"
                    Placement="Right"  <!-- This is modified -->
                    IsOpen="{TemplateBinding IsSubmenuOpen}"
                    AllowsTransparency="True" 
                    Focusable="False"
                    PopupAnimation="Fade">
// ... (You need all the XAML from the linked MSDN site in your Resources somewhere)

After that you can use your Menu almost exactly like you did (I only added Width):

<Menu Width="300">
    <Menu.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel Orientation="Vertical"/>
        </ItemsPanelTemplate>
    </Menu.ItemsPanel>
    <MenuItem Header="Item1">
        <MenuItem Header="SubItem 1">
            <MenuItem Header="SubItem 1.1"></MenuItem>
            <MenuItem Header="SubItem 1.2"></MenuItem>
            <MenuItem Header="SubItem 1.3"></MenuItem>
            <MenuItem Header="SubItem 1.4"></MenuItem>
        </MenuItem>
        <MenuItem Header="SubItem 2"></MenuItem>
        <MenuItem Header="SubItem 3"></MenuItem>
        <MenuItem Header="SubItem 4"></MenuItem>
    </MenuItem>
    <MenuItem Header="Item2">
        <MenuItem Header="SubItem 1"></MenuItem>
        <MenuItem Header="SubItem 2"></MenuItem>
        <MenuItem Header="SubItem 3"></MenuItem>
    </MenuItem>
</Menu>

You might want to name the template and apply it to this Menu directly, not to mess up other Menus in your app...

The result:

vertical menu

Of course some more styling is needed to get the exact result you want, but I hope you got the idea.

Upvotes: 2

Related Questions