WPF MenuItem模板使子项背景透明

时间:2014-03-27 19:12:26

标签: wpf xaml

我想修改 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>

1 个答案:

答案 0 :(得分:2)

第1步 - 为Visual Studio打开混合(以前的表达式混合)

Visual Studio的Blend是样式工具。它很棒,每个造型的人都应该更频繁地使用它。

使用Visual Studio 2012和2013,您应该使用MSDN订阅进行混合。

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

第3步 - 右键单击​​MenuItem,然后选择“编辑模板”编辑副本。

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

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

第5步 - 只保留你改变的内容。

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

注意:我留下了我注释掉的东西,所以你可以看到它。

现在,当您突出显示顶部MenuItem时,没有任何反应。但是当您右键单击并弹出子菜单时,一切都与正常情况相同。

这是由此产生的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>