上下文菜单背景着色答案

【问题标题】：Context Menu background coloring上下文菜单背景着色
【发布时间】：2012-01-04 21:52:39
【问题描述】：

我尝试在 XAML 中创建的上下文菜单有点问题。它应该相当简单，只是一个菜单项列表，偶尔带有分隔符。

我已经能够正确安排它，所有项目都在正确的位置，现在我将继续对其进行造型和主题化。我们通过公开一些在应用程序级别换出的命名画笔来进行主题化，因此在我的上下文菜单、菜单项和分隔符控件的样式中，我将这些名称绑定为动态资源。到目前为止，所有这些都是沼泽标准。

我看到的问题是，对于我的分隔符，我在上下文菜单的左侧有一大块空间，它与菜单的其余部分显示的背景不同，这在视觉上非常分散注意力。您可以查看一个示例，并想象在我们较暗的主题上它是如何变得更糟的！

在我们的黑暗风格中：

这是我用于上下文菜单和分隔符的样式：

<Style TargetType="{x:Type ContextMenu}">
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="{DynamicResource HighlightBrush}"/>
        </Trigger>
        <DataTrigger Binding="{Binding ContextMenu.IsOpen,RelativeSource={RelativeSource Mode=Self}}" Value="True">
            <Setter Property="Background" Value="{DynamicResource HighlightBrush}"/>
        </DataTrigger>
    </Style.Triggers>
    <Setter Property="Background" Value="{DynamicResource BackgroundLight}" />
    <Setter Property="Foreground" Value="{DynamicResource ForegroundText}" />
    <Setter Property="BorderThickness" Value="1" />
</Style>

<Style x:Key="{x:Static MenuItem.SeparatorStyleKey}" TargetType="{x:Type Separator}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Separator}">
                <Grid Margin="0,6,0,4" SnapsToDevicePixels="true">
                    <Rectangle Margin="30,0,1,1" Height="1" Fill="{DynamicResource BackgroundLight}"/>
                    <Rectangle Margin="30,1,1,0" Height="1" Fill="{DynamicResource ContextMenuSeparator}"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

我不知道这该死的东西是从哪里来的，当我窥探应用程序的可视化树时，我只看到一个带有白色 Canvas 的 ContentPresenter，我不知道如何删除它。有人见过这个吗？

【问题讨论】：

见Menu Styles and Templates
@sll 所以你认为我可以使用我的 Border 属性的主题颜色来覆盖上下文菜单的 ControlTemplate，如该示例所示，这可能会解决它？
@ChesterHusk 从我在网上看到的情况来看，您似乎必须编辑模板才能摆脱该空间。
你们俩都非常有帮助。我终于开始修改 Blend 中默认为这些控件生成的 ControlTemplates 以获得所需的背景行为。

标签： c# wpf user-interface

【解决方案1】：

先生，您应该可以通过MenuItem.SeparatorStyleKey Property 获得您想要的行为。

默认样式看起来是这样的：

<Style x:Key="{x:Static MenuItem.SeparatorStyleKey}"
       TargetType="{x:Type Separator}">
    <Setter Property="MinHeight" Value="2"/>
    <Setter Property="Margin" Value="2,4,2,3"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Separator}">
                <theme:ClassicBorderDecorator BorderStyle="HorizontalLine"
                                              BorderBrush="{x:Static theme:ClassicBorderDecorator.ClassicBorderBrush}"
                                              BorderThickness="1"/>

            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

您可以通过 ClassicBorderBrush 的 Background 属性引发黑客攻击。（模板绑定？）

【讨论】：