Question

I'm currently trying to style the Submenu/SubmenuHeader in a similar way to the top level MenuItem, However I want to change the background and border to a different color (not the default)

Where in the template can I set this? or are there any better ways to go about styling the submenu?

Here is my code for the MenuItem Template:

  <!-- MenuItem Template -->
    <ControlTemplate
        x:Key="MenuItem"
        TargetType="MenuItem">
        <Border
            Name="border"
            BorderThickness="1"
            BorderBrush="Transparent"
            Background="{TemplateBinding Background}">
            <Grid>
                <ContentPresenter
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    ContentSource="Header" />
                <Popup
                    Name="Popup"
                    Placement="Bottom"
                    IsOpen="{TemplateBinding IsSubmenuOpen}"
                    AllowsTransparency="True"
                    Focusable="False"
                    PopupAnimation="Fade">
                    <Border
                        Name="SubmenuBorder"
                        SnapsToDevicePixels="True"
                        Background="{StaticResource ResourceKey=DarkGrayBrush}"
                        BorderBrush="Transparent"
                        BorderThickness="1">
                        <StackPanel
                            Name="SubMenu"
                            IsItemsHost="True"
                            KeyboardNavigation.DirectionalNavigation="Cycle" />
                    </Border>
                </Popup>
            </Grid>
        </Border>
        <ControlTemplate.Triggers>
            <Trigger
                Property="IsMouseOver"
                Value="True">
                <Setter
                    TargetName="border"
                    Property="BorderBrush"
                    Value="Transparent" />
                <Setter
                    Property="Background"
                    Value="#00948d" />
            </Trigger>
            <Trigger
                Property="IsSuspendingPopupAnimation"
                Value="true">
                <Setter
                    TargetName="Popup"
                    Property="PopupAnimation"
                    Value="None" />
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

Answer 1

使用样式和VisualState PointerOver：

            <Style x:Key="MenuItemStyle" TargetType="MenuItem">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="MenuItem">
                            <Grid x:Name="Root">
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="MenuItemCommonStates">
                                        <VisualState x:Name="PointerOver">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root"
                                                                               Storyboard.TargetProperty="Background">
                                                    <DiscreteObjectKeyFrame KeyTime="0"
                                                                            Value="{ThemeResource AppBarBackgroundThemeBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

Styling MouseOver SubMenuItem WPF/XAML

1 个答案: