WPF MenuItem 模板使子项背景透明

Question

我想修改 TopLevelHeader 使其不显示任何边框和悬停效果。为此，我使用以下 MSDN 示例覆盖了默认的 MenuItem 样式：

http://msdn.microsoft.com/en-us/library/ms747082(v=vs.90).aspx

我的问题是，使用这种样式时，子项以透明背景显示。我也尝试使用 aero.normalcolor.xaml 样式，但问题仍然存在，子项具有透明背景。

相关部分：

<Style x:Key="SimpleMenuItemBasic" TargetType="{x:Type MenuItem}">    
        <Style.Triggers>
            <Trigger Property="Role" Value="TopLevelHeader">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type MenuItem}">
                            <Border Name="Border" >
                                <Grid>
                                    <ContentPresenter ContentSource="Header" RecognizesAccessKey="True" />
                                    <Popup Name="Popup" 
                                           Placement="Bottom" 
                                           IsOpen="{TemplateBinding IsSubmenuOpen}" 
                                           AllowsTransparency="True" 
                                           Focusable="False" 
                                           PopupAnimation="Fade">
                                        <Border Name="SubmenuBorder" SnapsToDevicePixels="True" 
                                                Background="{DynamicResource WindowBackgroundBrush}"
                                                BorderBrush="{DynamicResource SolidBorderBrush}"
                                                BorderThickness="1">
                                            <ItemsPresenter KeyboardNavigation.DirectionalNavigation="Cycle"
                                                                                KeyboardNavigation.TabNavigation="Cycle"
                                                                                Margin="0,0,0,1"
                                                                                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                                        </Border>
                                    </Popup>
                                </Grid>
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsSuspendingPopupAnimation" Value="true">
                                    <Setter TargetName="Popup" Property="PopupAnimation" Value="None"/>
                                </Trigger>
                                <Trigger Property="IsHighlighted" Value="true">
                                    <Setter TargetName="Border" Property="Background" Value="{DynamicResource NormalBrush}"/>
                                    <Setter TargetName="Border" Property="BorderBrush" Value="Transparent"/>
                                </Trigger>
                                <Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="True">
                                    <Setter TargetName="SubmenuBorder" Property="CornerRadius" Value="0,0,4,4"/>
                                    <Setter TargetName="SubmenuBorder" Property="Padding" Value="0,0,0,3"/>
                                </Trigger>
                                <Trigger Property="IsEnabled" Value="False">
                                    <Setter Property="Foreground" Value="{DynamicResource DisabledForegroundBrush}"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Setter Property="Grid.IsSharedSizeScope" Value="true"/>
            </Trigger>
        </Style.Triggers>
    </Style>

以及用法示例：

<Menu>
    <MenuItem Header="menuItem1" Style="{StaticResource SimpleMenuItemBasic}">
        <MenuItem Header="subitem1" />
        <MenuItem Header="subitem2" />
    </MenuItem>
</Menu>

Answer 1

第 1 步 - 打开 Blend for Visual Studio（以前的 Expression Blend）

Blend for Visual Studio 是用于样式的工具。它很棒，每个造型师都应该经常使用它。

使用 Visual Studio 2012 和 2013，您应该通过 MSDN 订阅获得 Blend。

第 2 步 - 在 Blend 中打开您的解决方案。

第 3 步 - 右键单击​​您的 MenuItem 并选择 Edit Template |编辑副本。

这会创建一个使用的默认样式的副本。它会创建整个样式的副本。这将是很多 Xaml。我通常在一个单独的 ResourceDictionary 文件中创建它，但对于这个示例，我将它放在 MainWindow 资源中。

第 4 步 - 注释掉默认样式中影响 Top MenuItem 的突出显示内容。

第 5 步 - 仅保留您更改的内容。

我们只需要在一个控件模板中注释掉一个触发器。因此，让我们删除除那个 ControlTemplate 之外的所有额外内容。

注意：我留下了我注释掉的内容，以便您查看。

现在，当您突出显示顶部的 MenuItems 时，什么也没有发生。但是当你右击并弹出子菜单时，一切都和平常一样。

这是生成的 Xaml。希望对您有所帮助。

MainWindow.xaml

<Window x:Class="StackOverflowMenuTransparent.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">    
    <Grid>
        <Grid.Resources>
            <!--<SolidColorBrush x:Key="MenuItem.Highlight.Background" Color="#3D26A0DA"/>
            <SolidColorBrush x:Key="MenuItem.Highlight.Border" Color="#FF26A0DA"/>-->
            <SolidColorBrush x:Key="Menu.Disabled.Foreground" Color="#FF707070"/>
            <SolidColorBrush x:Key="Menu.Static.Border" Color="#FF999999"/>
            <SolidColorBrush x:Key="Menu.Static.Background" Color="#FFF0F0F0"/>
            <SolidColorBrush x:Key="Menu.Static.Separator" Color="#FFD7D7D7"/>
            <Geometry x:Key="Checkmark">F1 M 10.0,1.2 L 4.7,9.1 L 4.5,9.1 L 0,5.2 L 1.3,3.5 L 4.3,6.1L 8.3,0 L 10.0,1.2 Z</Geometry>
            <ControlTemplate x:Key="NoHoverMenuItemTemplate" TargetType="{x:Type 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" ContentSource="Icon" HorizontalAlignment="Center" Height="16" Margin="3" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center" Width="16"/>
                        <Path x:Name="GlyphPanel" Data="{StaticResource Checkmark}" Fill="{TemplateBinding Foreground}" FlowDirection="LeftToRight" Margin="3" Visibility="Collapsed" VerticalAlignment="Center"/>
                        <ContentPresenter Grid.Column="1" ContentSource="Header" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                        <Popup x:Name="PART_Popup" AllowsTransparency="true" Focusable="false" IsOpen="{Binding IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}" PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}" Placement="Bottom" PlacementTarget="{Binding ElementName=templateRoot}">
                            <Border x:Name="SubMenuBorder" BorderBrush="{StaticResource Menu.Static.Border}" BorderThickness="1" Background="{StaticResource Menu.Static.Background}" 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="{StaticResource Menu.Static.Separator}" 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="{StaticResource MenuItem.Highlight.Background}"/>
                        <Setter Property="BorderBrush" TargetName="templateRoot" Value="{StaticResource MenuItem.Highlight.Border}"/>
                    </Trigger>-->
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="TextElement.Foreground" TargetName="templateRoot" Value="{StaticResource Menu.Disabled.Foreground}"/>
                        <Setter Property="Fill" TargetName="GlyphPanel" Value="{StaticResource Menu.Disabled.Foreground}"/>
                    </Trigger>
                    <Trigger Property="ScrollViewer.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>
        </Grid.Resources>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Menu Grid.Row="0">
            <MenuItem Header="_File" Template="{DynamicResource NoHoverMenuItemTemplate}" >         
                <MenuItem Header="_Open" />
                <MenuItem Header="_Save" />
            </MenuItem>
            <MenuItem Header="_Help" Template="{DynamicResource NoHoverMenuItemTemplate}" >         
                <MenuItem Header="_About" />
            </MenuItem>
        </Menu>
        <TextBox Grid.Row="1" AcceptsReturn="True">
            <TextBox.ContextMenu>
                <ContextMenu>

                </ContextMenu>
            </TextBox.ContextMenu>
        </TextBox>

    </Grid>
</Window>