logo标签列表

WPF子菜单样式化

wpfcontextmenumenuitemstyling
11
如果我为菜单项添加一个子菜单，那么子菜单的样式将无法正确应用。此时只能对菜单项进行样式设置，而无法对实际的子菜单进行样式设置。因此，无法更改IsMouseOver样式，只能保持Windows主题的默认设置。如何设置子菜单的样式？
    <Style TargetType="{x:Type MenuItem}">
        <Setter Property="Background" Value="#0f3c5a"></Setter>
        <Setter Property="Foreground" Value="White"></Setter>
        <Style.Triggers>
            <Trigger Property="IsHighlighted" Value="True">
                <Setter Property="Background" Value="Black"></Setter>
            </Trigger>
            <Trigger Property="IsEnabled" Value="False">
                <Setter Property="Foreground" Value="LightGray"></Setter>
            </Trigger>
        </Style.Triggers>
    </Style>
    <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}">
                    
                    <!--Here is where you change the border thickness to zero on the menu-->
                    <Border BorderThickness="0" x:Name="Border"  >
                     <StackPanel ClipToBounds="True" Orientation="Vertical"
                     IsItemsHost="True"/>
                     </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter TargetName="Border" Property="Background" Value="#5082a4" />
                        </Trigger>
                    </ControlTemplate.Triggers>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>

然后菜单的部分可以这样做

<ContextMenu Closed="ContextMenu_Closed"  >
    <MenuItem  Command="k:Window1.NewCommand" > 
       <MenuItem  Command="k:Window1.DeleteCommand"/> 
    </MenuItem>
    ...

在NewCommand层中的所有内容都已经被正确地样式化了，在查看DeleteCommand时，菜单项本身也已被正确地样式化，但实际的菜单却使用了Windows主题的默认样式，目前我还没有发现覆盖它的方法。最重要的是要让子菜单的IsMouseOver状态保持与主菜单结构相同的外观和感觉。

3个回答
22

如约而至，这是代码。感谢您的帮助Jay，引导我找到了MSDN上的答案：http://msdn.microsoft.com/en-us/library/ms752296.aspx MenuItem和ContextMenu控制基本菜单的样式，另外两个则用于子菜单项。Jay的方法也许可行，但不幸的是我无法成功。这个方案完美地解决了问题，并且可能允许更多地控制子菜单的样式。

    <UserControl.Resources>

    <!-- Separator -->
    <Style TargetType="{x:Type Separator}"
           x:Key="SeparatorStyle">
        <Setter Property="Height"
                Value="1" />
        <Setter Property="Background"
                Value="#0f3c5a" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Separator}">
                    <Rectangle Height="{TemplateBinding Height}"
                               Fill="White" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!--Outer menu items-->
    <Style TargetType="{x:Type MenuItem}">
        <Setter Property="Background"
                Value="#0f3c5a"></Setter>
        <Setter Property="Foreground"
                Value="White"></Setter>
        <Style.Triggers>
            <Trigger Property="IsHighlighted"
                     Value="True">
                <Setter Property="Background"
                        Value="Black"></Setter>
            </Trigger>
            <Trigger Property="IsEnabled"
                     Value="False">
                <Setter Property="Foreground"
                        Value="LightGray"></Setter>
            </Trigger>
        </Style.Triggers>
    </Style>

    <!-- Outer menu -->
    <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}">

                    <!--Here is where you change the border thickness to zero on the menu-->
                    <Border BorderThickness="0"
                            x:Name="Border"
                            Background="Transparent">
                        <StackPanel ClipToBounds="True"
                                    Orientation="Vertical"
                                    IsItemsHost="True" />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver"
                                 Value="true">
                            <Setter TargetName="Border"
                                    Property="Background"
                                    Value="#0f3c5a" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!-- SubmenuItem -->

    <ControlTemplate x:Key="{x:Static MenuItem.SubmenuItemTemplateKey}"
                     TargetType="{x:Type MenuItem}">
        <Border Name="Border">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"
                                      SharedSizeGroup="Icon" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto"
                                      SharedSizeGroup="Shortcut" />
                    <ColumnDefinition Width="13" />
                </Grid.ColumnDefinitions>
                <ContentPresenter Name="Icon"
                                  Margin="6,0,6,0"
                                  VerticalAlignment="Center"
                                  ContentSource="Icon" />
                <Border Name="Check"
                        Width="13"
                        Height="13"
                        Visibility="Collapsed"
                        Margin="6,0,6,0"
                        Background="#0f3c5a"
                        BorderThickness="1"
                        BorderBrush="#5082a4">
                    <Path Name="CheckMark"
                          Width="7"
                          Height="7"
                          Visibility="Hidden"
                          SnapsToDevicePixels="False"
                          Stroke="#5082a4"
                          StrokeThickness="2"
                          Data="M 0 0 L 7 7 M 0 7 L 7 0" />
                </Border>
                <ContentPresenter Name="HeaderHost"
                                  Grid.Column="1"
                                  ContentSource="Header"
                                  RecognizesAccessKey="True" />
                <TextBlock x:Name="InputGestureText"
                           Grid.Column="2"
                           Text="{TemplateBinding InputGestureText}"
                           Margin="5,2,0,2"
                           DockPanel.Dock="Right" />
            </Grid>
        </Border>
        <ControlTemplate.Triggers>
            <Trigger Property="Icon"
                     Value="{x:Null}">
                <Setter TargetName="Icon"
                        Property="Visibility"
                        Value="Hidden" />
            </Trigger>
            <Trigger Property="IsChecked"
                     Value="true">
                <Setter TargetName="CheckMark"
                        Property="Visibility"
                        Value="Visible" />
            </Trigger>
            <Trigger Property="IsCheckable"
                     Value="true">
                <Setter TargetName="Check"
                        Property="Visibility"
                        Value="Visible" />
                <Setter TargetName="Icon"
                        Property="Visibility"
                        Value="Hidden" />
            </Trigger>
            <Trigger Property="IsHighlighted"
                     Value="true">
                <Setter TargetName="Border"
                        Property="Background"
                        Value="#5082a4" />
            </Trigger>
            <Trigger Property="IsEnabled"
                     Value="false">
                <Setter Property="Foreground"
                        Value="#0f3c5a" />
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

    <!-- SubmenuHeader -->

    <ControlTemplate x:Key="{x:Static MenuItem.SubmenuHeaderTemplateKey}"
                     TargetType="{x:Type MenuItem}">
        <Border Name="Border">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"
                                      SharedSizeGroup="Icon" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto"
                                      SharedSizeGroup="Shortcut" />
                    <ColumnDefinition Width="13" />
                </Grid.ColumnDefinitions>
                <ContentPresenter Name="Icon"
                                  Margin="6,0,6,0"
                                  VerticalAlignment="Center"
                                  ContentSource="Icon" />
                <ContentPresenter Name="HeaderHost"
                                  Grid.Column="1"
                                  ContentSource="Header"
                                  RecognizesAccessKey="True" />
                <TextBlock x:Name="InputGestureText"
                           Grid.Column="2"
                           Text="{TemplateBinding InputGestureText}"
                           Margin="5,2,2,2"
                           DockPanel.Dock="Right" />
                <Path Grid.Column="3"
                      HorizontalAlignment="Center"
                      VerticalAlignment="Center"
                      Data="M 0 0 L 0 7 L 4 3.5 Z"
                      Fill="#0f3c5a" />
                <Popup Name="Popup"
                       Placement="Right"
                       HorizontalOffset="-4"
                       IsOpen="{TemplateBinding IsSubmenuOpen}"
                       AllowsTransparency="True"
                       Focusable="False"
                       PopupAnimation="Fade">
                    <Border Name="SubmenuBorder"
                            SnapsToDevicePixels="True"
                            Background="#0f3c5a"
                            BorderBrush="#0f3c5a"
                            BorderThickness="1">
                        <StackPanel IsItemsHost="True"
                                    KeyboardNavigation.DirectionalNavigation="Cycle" />
                    </Border>
                </Popup>
            </Grid>
        </Border>

        <ControlTemplate.Triggers>
            <Trigger Property="Icon"
                     Value="{x:Null}">
                <Setter TargetName="Icon"
                        Property="Visibility"
                        Value="Collapsed" />
            </Trigger>
            <Trigger Property="IsHighlighted"
                     Value="true">
                <Setter TargetName="Border"
                        Property="Background"
                        Value="#5082a4" />
            </Trigger>
            <Trigger SourceName="Popup"
                     Property="Popup.AllowsTransparency"
                     Value="True">
                <Setter TargetName="SubmenuBorder"
                        Property="CornerRadius"
                        Value="4" />
                <Setter TargetName="SubmenuBorder"
                        Property="Padding"
                        Value="0,3,0,3" />
            </Trigger>
            <Trigger Property="IsEnabled"
                     Value="false">
                <Setter Property="Foreground"
                        Value="#0f3c5a" />
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
感谢您发布这个问题；请不要忘记将其标记为答案。 - Jay
@Jay，我还有53分钟才能在Stackoverflow上标记我的答案:-P - user64718
1

你是如何应用你的样式的？

通常，如果你在“高级”或“外部”元素的资源中定义一个样式，并且不给它一个键，它将应用于下面所有目标类型的项目。

你是否这样做并看到了意外的行为，或者你正在尝试在每个级别上定义/应用样式？

编辑1

查看你的XAML，我认为问题在于你正在给ContextMenu设置样式，但下面的菜单是Menu类型。我建议你尝试更改Style的TargetType属性为Menu。看看它是否适用于所有级别。如果不行，我会把它改回来，并添加另一个针对Menu的Style，看看那个是否适用于子菜单。

编辑2

好的，我想我明白了你的问题。子菜单实际上是一个MenuItem，当查看XAML而不是结果时很明显。您在ContextMenu上设置的模板和样式也必须设置在任何子菜单中的MenuItem上。我尝试了一下，并创建了一个针对MenuItem的样式，其中包含控件模板和IsMouseOver触发器，它似乎可以实现您想要的效果。

杰伊，那并没有解决任何问题，子菜单没有采用样式。这是一个非常奇怪的问题。 - user64718
Jay，我不太确定你是怎么做的让你的代码工作的，但当我尝试时它没有任何反应。不过，你的帖子确实帮助我最终找到了正确的答案！我很快会在新的回答中发布代码，只是需要稍微整理一下。 - user64718
0
为避免重复模板，最好创建一个同时包含PART_Popup和子菜单箭头的模板，但在触发Role为SubmenuHeader之前隐藏错误。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接