.net 默认上下文菜单样式 - WPF

Default ContextMenu Style - WPF

提问by Luke

I am trying to modify the default style of the ContextMenu in WPF.

我正在尝试修改 WPF 中 ContextMenu 的默认样式。

Normally you can creat a copy of the default in Expression Blend using the Edit Control Parts (Template) > Edit a Copy menu option. However I can't work out how to do this with a ContextMenu. Any idea how I can get the default style to modify?

通常，您可以使用 Edit Control Parts (Template) > Edit a Copy 菜单选项在 Expression Blend 中创建默认值的副本。但是我不知道如何使用 ContextMenu 来做到这一点。知道如何获得要修改的默认样式吗？

I am trying to disable the left side of the context menu where the icons are normally shown.

我试图禁用通常显示图标的上下文菜单的左侧。

Thanks!

谢谢！

Update:Maybe I wasn't clear about removing the icons. For example, if you have a context menu with no icons then the whole left side of the menu is wasted space. I would like to modify the default style of the context menu background to remove this. Simply I don't know how to access this default style.

更新：也许我不清楚删除图标。例如，如果您有一个没有图标的上下文菜单，则菜单的整个左侧都是浪费空间。我想修改上下文菜单背景的默认样式以删除它。只是我不知道如何访问这种默认样式。

回答by Luke

For templates and styles that are not accessible through the Expression Interface (such as the ContextMenu template) you can use the following code to extract the template:

对于无法通过表达式接口访问的模板和样式（例如 ContextMenu 模板），您可以使用以下代码提取模板：

Dim sb As System.Text.StringBuilder = New System.Text.StringBuilder
Using Writer As TextWriter = New StringWriter(sb)
    System.Windows.Markup.XamlWriter.Save(ContextMenu.Template, Writer)
End Using
Debug.Write(sb.ToString)

Or in C#

或者在 C# 中

var str = new StringBuilder();
using (var writer = new StringWriter(str))
    XamlWriter.Save(ContextMenu.Template, writer);
Debug.Write(str);

回答by dex3703

I found the easy way to get the ContextMenu template in Blend:

我找到了在 Blend 中获取 ContextMenu 模板的简单方法：

1. I added a ContextMenu to a button with some menuitems.
2. Under "miscellaneous" in the properties pane, there's a grouped item for ContextMenu.
3. Open this. You'll find the usual Style and Template properties.
4. Click the square for the popup menu, and select Convert to New Resource...

1. 我向带有一些菜单项的按钮添加了一个 ContextMenu。
2. 在属性窗格中的“杂项”下，有一个 ContextMenu 的分组项。
3. 打开这个。您将找到常用的 Style 和 Template 属性。
4. 单击弹出菜单的方块，然后选择转换为新资源...

That's it. Pick where you want the template/style to be put, and you're done.

就是这样。选择您想要放置模板/样式的位置，然后就完成了。

Here's the markup I had:

这是我的标记：

<StackPanel x:Name="LayoutRoot">
    <Button Content="Click for ContextMenu" Width="30" HorizontalAlignment="Center" VerticalAlignment="Center">
        <Button.ContextMenu>
            <ContextMenu Template="{DynamicResource ContextMenuControlTemplate1}" Style="{DynamicResource ContextMenuStyle1}">
                <MenuItem Header="File"/>
                <MenuItem Header="Edit"/>
                <MenuItem Header="View"/>
                <MenuItem Header="Recent Files"/>
                    <MenuItem Header="file1.txt"/>
                    <MenuItem Header="file2.txt"/>
            </ContextMenu>
        </Button.ContextMenu>
    </Button>
</StackPanel>

And the style/template I got:

我得到的样式/模板：

<Style x:Key="ContextMenuStyle1" TargetType="{x:Type ContextMenu}">
    <Setter Property="Background" Value="{DynamicResource MenuBackgroundBrush}"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="BorderBrush" Value="{DynamicResource WindowBorderBrush}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ContextMenu}">
                <Border Uid="Border_93">
                    <Border.Style>
                        <Style TargetType="{x:Type Border}">
                            <Setter Property="Tag" Value="{DynamicResource {x:Static SystemParameters.DropShadowKey}}"/>
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding Tag, RelativeSource={RelativeSource Self}}" Value="True">
                                    <Setter Property="Background" Value="Transparent"/>
                                    <Setter Property="Padding" Value="0,0,5,5"/>
                                    <Setter Property="Effect">
                                        <Setter.Value>
                                            <DropShadowEffect BlurRadius="4" Opacity="0.8" ShadowDepth="1"/>
                                        </Setter.Value>
                                    </Setter>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Border.Style>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Hope this helps. In usual MS thoroughness, the brushes in the default style aren't found. :)

希望这可以帮助。在通常的 MS 彻底性中，找不到默认样式的画笔。:)

回答by Jonathan Perry

Try this: (Put this code in your Resources part of your XAML) This should remove the icon strip from the context menu.

试试这个：（将此代码放在 XAML 的资源部分）这应该从上下文菜单中删除图标条。

<Style TargetType="{x:Type ContextMenu}">
    <Setter Property="OverridesDefaultStyle" Value="True" />
    <Setter Property="SnapsToDevicePixels" Value="True" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ContextMenu}">
                <Border BorderThickness="1" CornerRadius="4" BorderBrush="Black" x:Name="Border" Background="White">
                    <StackPanel ClipToBounds="True" Orientation="Vertical" IsItemsHost="True" />
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter TargetName="Border" Property="Background" Value="White" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

回答by Jobi Joy

Actually the space is not part of the ContextMenu it is part of MenuItem. So just drag a MenuItem to your window in expression blend and create a copy of the control. Hope your ContextMenu declaration is as follows

实际上，该空间不是 ContextMenu 的一部分，而是 MenuItem 的一部分。因此，只需在表达式混合中将 MenuItem 拖到您的窗口中并创建该控件的副本。希望您的 ContextMenu 声明如下

 <ContextMenu  >
    <MenuItem Header="Copy"/>
    <MenuItem Header="Paste"/>
    <MenuItem Header="Clear"/>
 </ContextMenu>

And inside your MenuItem ControlTemplate you can see the space as bellow. So remove the Icon and First Column of the grid I marked in the screen shot.

在您的 MenuItem ControlTemplate 中，您可以看到如下所示的空间。所以删除我在屏幕截图中标记的网格的图标和第一列。

回答by Robert Macnee

The extra space on the left is due to the little check mark that appears when you set IsCheckableand IsCheckedto trueon MenuItem.

左边的额外空间是因为小对勾出现，当你设置IsCheckable和IsChecked对true上MenuItem。

The check mark is in the template for MenuItemso if you edit that you can take it out.

复选标记位于模板中，MenuItem因此如果您进行编辑，则可以将其取出。