WPF中垂直菜单如何在右侧弹出而非下方弹出？

Question

我正在尝试获得像下面图片中 Blend 工具栏一样的东西：

我已经得到了一个垂直菜单，就像你在下面的图片中看到的：

我使用了以下 XAML 来获得垂直菜单：

<Menu .........>

    <Menu.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel Orientation="Vertical"/>
        </ItemsPanelTemplate>
    </Menu.ItemsPanel>

    ....
    ....
    ....

</Menu>

现在，当我点击任何菜单项时，弹出窗口会在底部打开，如下图所示：

但是，我希望它像图1中所示一样在右侧打开。我该怎么做？

更新：

在使用模板属性的样式和setter后，我将弹出窗口放在了右侧。但是，文本没有正确定位。我可以看到左侧没有图片空间，分隔符显示在文本上方。请看下面的图片：

- Vishal

Answer 1

更新的答案

Xaml 代码

<Window.Resources>
<Style x:Key="MainMenuitem" TargetType="MenuItem">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="MenuItem">
                    <Border x:Name="templateRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
                        <Grid VerticalAlignment="Center">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>
                            <ContentPresenter x:Name="Icon" Content="{TemplateBinding Icon}" ContentSource="Icon" HorizontalAlignment="Center" Height="16" Margin="3" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center" Width="16"/>
                            <Path x:Name="GlyphPanel" Data="F1M10,1.2L4.7,9.1 4.5,9.1 0,5.2 1.3,3.5 4.3,6.1 8.3,0 10,1.2z" Fill="#FF212121" FlowDirection="LeftToRight" Margin="3" Visibility="Collapsed" VerticalAlignment="Center"/>
                            <ContentPresenter TextElement.FontSize="20" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="1" ContentStringFormat="{TemplateBinding HeaderStringFormat}" ContentSource="Header" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="Icon" Value="{x:Null}">
                            <Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>
                        </Trigger>
                        <Trigger Property="IsChecked" Value="True">
                            <Setter Property="Visibility" TargetName="GlyphPanel" Value="Visible"/>
                            <Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>
                        </Trigger>
                        <Trigger Property="IsHighlighted" Value="True">
                            <Setter Property="Background" TargetName="templateRoot" Value="#3D26A0DA"/>
                            <Setter Property="BorderBrush" TargetName="templateRoot" Value="#FF26A0DA"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="TextElement.Foreground" TargetName="templateRoot" Value="#FF707070"/>
                            <Setter Property="Fill" TargetName="GlyphPanel" Value="#FF707070"/>
                        </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsHighlighted" Value="True"/>
                                <Condition Property="IsEnabled" Value="False"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="Background" TargetName="templateRoot" Value="#0A000000"/>
                            <Setter Property="BorderBrush" TargetName="templateRoot" Value="#21000000"/>
                        </MultiTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="EditSubMenuitem" TargetType="MenuItem">
        <Setter Property="FontSize" Value="20"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="MenuItem">
                    <Border x:Name="templateRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
                        <Grid VerticalAlignment="Center">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>
                            <ContentPresenter x:Name="Icon"  Content="{TemplateBinding Icon}" ContentSource="Icon" HorizontalAlignment="Center" Height="16" Margin="3" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center" Width="16"/>
                            <Path x:Name="GlyphPanel" Data="F1M10,1.2L4.7,9.1 4.5,9.1 0,5.2 1.3,3.5 4.3,6.1 8.3,0 10,1.2z" Fill="{TemplateBinding Foreground}" FlowDirection="LeftToRight" Margin="3" Visibility="Collapsed" VerticalAlignment="Center"/>
                            <ContentPresenter TextElement.FontSize="20"  ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="1" ContentStringFormat="{TemplateBinding HeaderStringFormat}" ContentSource="Header" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                            <Popup Grid.Column="1" x:Name="PART_Popup"  AllowsTransparency="True" Focusable="False" IsOpen="{Binding IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}" PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}" Placement="Right">
                                <Border x:Name="SubMenuBorder" BorderBrush="#FF999999" BorderThickness="1" Background="#FFF0F0F0" Padding="2">
                                    <ScrollViewer x:Name="SubMenuScrollViewer" Style="{DynamicResource {ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly={x:Type FrameworkElement}}}">
                                        <Grid RenderOptions.ClearTypeHint="Enabled">
                                            <Canvas HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0">
                                                <Rectangle x:Name="OpaqueRect" Fill="{Binding Background, ElementName=SubMenuBorder}" Height="{Binding ActualHeight, ElementName=SubMenuBorder}" Width="{Binding ActualWidth, ElementName=SubMenuBorder}"/>
                                            </Canvas>
                                            <Rectangle Fill="#FFD7D7D7" HorizontalAlignment="Left" Margin="29,2,0,2" Width="1"/>
                                            <ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Cycle" Grid.IsSharedSizeScope="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" KeyboardNavigation.TabNavigation="Cycle"/>
                                        </Grid>
                                    </ScrollViewer>
                                </Border>
                            </Popup>
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSuspendingPopupAnimation" Value="True">
                            <Setter Property="PopupAnimation" TargetName="PART_Popup" Value="None"/>
                        </Trigger>
                        <Trigger Property="Icon" Value="{x:Null}">
                            <Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>
                        </Trigger>
                        <Trigger Property="IsChecked" Value="True">
                            <Setter Property="Visibility" TargetName="GlyphPanel" Value="Visible"/>
                            <Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>
                        </Trigger>
                        <Trigger Property="IsHighlighted" Value="True">
                            <Setter Property="Background" TargetName="templateRoot" Value="#3D26A0DA"/>
                            <Setter Property="BorderBrush" TargetName="templateRoot" Value="#FF26A0DA"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="TextElement.Foreground" TargetName="templateRoot" Value="#FF707070"/>
                            <Setter Property="Fill" TargetName="GlyphPanel" Value="#FF707070"/>
                        </Trigger>
                        <Trigger Property="CanContentScroll" SourceName="SubMenuScrollViewer" Value="False">
                            <Setter Property="Canvas.Top" TargetName="OpaqueRect" Value="{Binding VerticalOffset, ElementName=SubMenuScrollViewer}"/>
                            <Setter Property="Canvas.Left" TargetName="OpaqueRect" Value="{Binding HorizontalOffset, ElementName=SubMenuScrollViewer}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

<Grid x:Name="gd">
    <Menu x:Name="MainMenu">           
        <Menu.ItemsPanel>
            <ItemsPanelTemplate>
                <VirtualizingStackPanel Orientation="Vertical"/>
            </ItemsPanelTemplate>
        </Menu.ItemsPanel>                     
    </Menu>
</Grid>

C# 代码

 void MainWindow_Loaded(object sender, RoutedEventArgs e)
    {
        MainMenu.ItemContainerStyle = (Style)(this.Resources["MainMenuitem"]); 
        MenuItem CreateMenu = new MenuItem();
        CreateMenu.Header = "Create";
        MainMenu.Items.Add(CreateMenu);

        MenuItem EditMenu = new MenuItem();
        EditMenu.HorizontalAlignment = HorizontalAlignment.Left;
        EditMenu.Style = (Style)(this.Resources["EditSubMenuitem"]); 
        EditMenu.Header = "Edit";

        MainMenu.Items.Add(EditMenu);
        MenuItem AddEditInMainMenu = (MenuItem)MainMenu.Items[1];
        MenuItem EditMenuOptiop1 = new MenuItem();
        EditMenuOptiop1.Header = "Edit";
        MenuItem EditMenuOptiop2 = new MenuItem();
        EditMenuOptiop2.Header = "Edit Multiple";
        AddEditInMainMenu.Items.Add(EditMenuOptiop1);
        AddEditInMainMenu.Items.Add(EditMenuOptiop2);
        AddEditInMainMenu.Template = (ControlTemplate)this.Resources["MenuItemTemplate"];

        MenuItem DeleteMenu = new MenuItem();
        DeleteMenu.Header = "Delete";
        MainMenu.Items.Add(DeleteMenu);

        MenuItem PrintMenu = new MenuItem();
        PrintMenu.Header = "Print";
        MainMenu.Items.Add(PrintMenu);          
    }

输出

- Heena

---

我的菜单是动态生成的。因此，我将您在上面解决方案中提到的控件模板放在Menu.Resources而不是MenuItem.Resources中。但我看不到任何区别。 - Vishal

没错，就是这样。再次感谢你解决我的问题。 - Vishal

Answer 2

您可以使用ContextMenu.Placement属性。您可以通过设置PlacementTarget、PlacementRectangle、Placement、HorizontalOffset和VerticalOffsetProperty属性来定位ContextMenu。这些属性的行为与Popup相同。有关更多信息，请参见Popup Placement Behavior。

- Mohd Ahmed

---

我已经尝试了ContextMenu.Placement="Right"，但输出结果没有任何变化。 - Vishal

Answer 3

您可以通过更改Placement属性来改变弹出窗口的位置。默认值为底部，但是您可以将其设置为任何此处。

- Dutts