Erstellen Sie ein vertikales Menü - c #, wpf

Ich versuche ein Menü wie das Foto unten zu machen:

Ich habe diesen 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>

aber dieser Code gibt ein Menü wie in den folgenden Bildern zurück:

Zuerst erscheint das:

und wenn ich die Maus schwinge, erscheint das Item 1 wie folgt:

Ich möchte, dass die zweite Ebene des Menüs auf der rechten Seite der ersten geöffnet wird, wie im ersten Bild.

Antworten:

1 für die Antwort № 1

Sie müssen eine benutzerdefinierte Vorlage für Ihre erstellen Menu um dein Ziel zu erreichen.

Hier ist der Standardwert ControlTemplate Für Menu, denke ich, ist der einfachste Weg, damit anzufangen. Sie müssen hinzufügen HorizontalOffset und VerticalOffset für die PopUp in dem TopLevelHeader Vorlage, so können Sie es an Ihre Bedürfnisse anpassen (oder einfach einstellen Placement zu Right - was meiner Meinung nach einfacher ist).

Außerdem sollten Sie a einstellen Width für Ihr Menü (entweder direkt oder indem Sie es in einen Container setzen, der es einschränkt "s Width), sonst nimmt es den ganzen Platz ein und das PopUp ist möglicherweise nicht sichtbar.

Ich werde hier nicht den gesamten XAML replizieren, aber hier ist der wichtige Teil:

// ...
<!-- 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)

Danach können Sie Ihre verwenden Menu fast genau wie du (ich habe nur hinzugefügt 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>

Vielleicht möchten Sie die Vorlage benennen und auf diese anwenden Menu direkt, um andere nicht zu vermasseln Menus in deiner App ...

Das Ergebnis:

Natürlich braucht es mehr Styling, um das gewünschte Ergebnis zu erzielen, aber ich hoffe, Sie haben die Idee.

---