默认上下文菜单样式 - WPF

13

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

通常情况下,您可以使用Expression Blend中的“编辑控件部分(模板)> 编辑副本”菜单选项创建默认样式的副本。但是我不知道如何在ContextMenu中执行此操作。您有什么想法,我该如何获取默认样式并进行修改?

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

谢谢!

更新:也许我没有清楚地表达移除图标的意思。举个例子,如果您有一个没有图标的上下文菜单,则整个左侧空间都被浪费了。我想修改上下文菜单背景的默认样式以删除这个区域。简单来说,我不知道如何访问此默认样式。


Luke,你解决了这个问题吗?我对下面所有不同的想法都有点困惑。感谢任何提示! - stefan.at.kotlin
是的,我使用下面的答案获取了模板,并从那里进行了修改。 - Luke
5个回答

19

对于通过表达式界面无法访问的模板和样式(例如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)

或者在C#中

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

6
请注意,为了在上下文菜单中获取模板,您至少需要向其Items集合添加一个MenuItem。否则,ContextMenu.Template为空。 - Julio Garcia
我喜欢Stack Overflow。非常感谢这些回复,正是我需要的。 - scobi
这将为我节省大量时间。多么好的提示。 - Thick_propheT
我看到你的操作了。无论如何,这很酷。如果可以的话,我会给更多赞的。 - Mike Nakis

10

我发现了在Blend中获取ContextMenu模板的简单方法:

  1. 我添加了一个带有一些菜单项的ContextMenu到按钮上。
  2. 在属性面板的“其他杂项”中,有一个分组项用于ContextMenu。
  3. 打开它。你会发现通常的样式和模板属性。
  4. 点击弹出菜单的正方形,并选择“转换为新资源...”

就这样。选择你想要放置模板/样式的位置,然后完成即可。

以下是我使用的标记:

<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>

我得到的样式/模板如下:

<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>

希望这能有所帮助。通常情况下,由于微软的严谨性,在默认样式中找不到画笔。:)


哈哈!:我找到了在Blend中获取ContextMenu模板的简单方法 - 看起来确实是最简单的方式! - bgmCoder
7
似乎不是完整的XAML。在哪里定义了“ContextMenuControlTemplate1”? - Alex Klaus

4

请尝试以下代码:(将此代码放入XAML的Resources部分)这应该会从上下文菜单中删除图标条。

<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>

1

实际上,空间不是上下文菜单的一部分,而是菜单项的一部分。因此,只需在Expression Blend中将一个菜单项拖到您的窗口中并创建控件的副本即可。希望您的ContextMenu声明如下:

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

在您的 MenuItem ControlTemplate 中,您可以看到以下空间。因此,请删除我在屏幕截图中标记的网格的图标和第一列。

alt text


这让我得到了 MenuItem 的默认样式,但它并不能让我得到 ContextMenu 的样式。Expression Blend 不允许我向窗口添加 ContextMenu。 - Luke
如果我将ContextMenu添加到窗口中,它会显示一个错误:“ContextMenu不能有逻辑或视觉父级”。 - Luke
1
是的,左侧菜单中还有ContextMenu内的样式需要删除。这些ContextMenu的样式我无法使用Expression界面访问。我已经在下方发布了一个代码解决方案来提取模板。 - Luke

-1

左侧的额外空间是由于在MenuItem上设置IsCheckableIsCheckedtrue时出现的小勾号。

勾号位于MenuItem的模板中,因此如果您编辑该模板,则可以将其删除。


IsCheckable 属性影响用户与菜单项的交互,而不是菜单中是否显示检查/图标区域。实际上,默认值已经是 False。将其设置为 True 只是使得每次用户选择该菜单项时,复选标记自动切换。 - Peter Duniho

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接