悬停菜单项时更改背景颜色但无法在 wpf 中显示子菜单

Question

我在使用 wpf 中的 menuitem 时遇到了一些问题。我希望在悬停时更改背景颜色菜单项。我做到了。但问题是我在 menuitem 中的子菜单无法显示。请告诉我原因，如果可以请修复它。谢谢这是我的代码

我的风格代码：

<Style x:Key="BaseStyle"
       TargetType="MenuItem">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type MenuItem}">
                <Border x:Name="Bd"
                        Padding="17,0,17,0"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        SnapsToDevicePixels="True">
                    <ContentPresenter x:Name="ContentPresenter"
                                      Content="{TemplateBinding Header}"
                                      Grid.Column="1"
                                      ContentSource="Header"
                                      RecognizesAccessKey="True" />
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsHighlighted"
                             Value="True">
                        <Setter Property="Background"
                                TargetName="Bd"
                                Value="Yellow" />
                        <Setter Property="BorderBrush"
                                TargetName="Bd"
                                Value="#FF26A0DA" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

这是菜单项：

<MenuItem Name="menu_file"
          Header="File"
          Height="30"
          Style="{StaticResource BaseStyle}">
    <MenuItem Foreground="Black"
              Header="New Connection"
              HorizontalAlignment="Left"
              Width="178"
              Click="Connection_Click"
              Margin="0,0,-38,0" />
    <MenuItem Foreground="Black"
              Header="Save"
              HorizontalAlignment="Left"
              Width="140" />
    <MenuItem Foreground="Black"
              Header="Print"
              HorizontalAlignment="Left"
              Width="140" />
    <MenuItem Foreground="Black"
              Header="Export"
              HorizontalAlignment="Left"
              Width="140" />
    <Separator Foreground="Black"
               HorizontalAlignment="Left"
               Height="1"
               Width="140" />
    <MenuItem Foreground="Black"
              Header="Assesment"
              HorizontalAlignment="Left"
              Width="140"
              Height="25"
              Click="Assesment_Click" />
</MenuItem>

Answer 1

MenuItem 有 3 个独立的 Template，每个 Role 一个：TopLevelHeader、TopLevelItem、SubmenuHeader。所以你需要定制你想要的特定的。在您的情况下，这将是 TopLevelHeader.

模板：

    <ControlTemplate x:Key="MenuItemControlTemplate2" 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" Content="{TemplateBinding Icon}" ContentSource="Icon" HorizontalAlignment="Center" Height="16" Margin="3" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center" Width="16"/>
                <Path x:Name="GlyphPanel" Data="F1M10,1.2L4.7,9.1 4.5,9.1 0,5.2 1.3,3.5 4.3,6.1 8.3,0 10,1.2z" Fill="{TemplateBinding Foreground}" FlowDirection="LeftToRight" Margin="3" Visibility="Collapsed" VerticalAlignment="Center"/>
                <ContentPresenter ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="1" ContentStringFormat="{TemplateBinding HeaderStringFormat}" 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">
                    <Border x:Name="SubMenuBorder" BorderBrush="#FF999999" BorderThickness="1" Background="#FFF0F0F0" 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="#FFD7D7D7" 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="Yellow"/>
                <Setter Property="BorderBrush" TargetName="templateRoot" Value="Red"/>
            </Trigger>
            <Trigger Property="IsEnabled" Value="False">
                <Setter Property="TextElement.Foreground" TargetName="templateRoot" Value="#FF707070"/>
                <Setter Property="Fill" TargetName="GlyphPanel" Value="#FF707070"/>
            </Trigger>
            <Trigger Property="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>

然后应用您的自定义模板：

XAML:

        <MenuItem Name="menu_file"
                  Header="File"
                  Width="150"
                  Template="{DynamicResource MenuItemControlTemplate2}">
            <MenuItem Foreground="Black"
                      Header="New Connection"
                      HorizontalAlignment="Left"
                      Width="178"
                      Margin="0,0,-38,0" />
            <MenuItem Foreground="Black"
                      Header="Save"
                      HorizontalAlignment="Left"
                      Width="140" />
            <MenuItem Foreground="Black"
                      Header="Print"
                      HorizontalAlignment="Left"
                      Width="140" />
            <MenuItem Foreground="Black"
                      Header="Export"
                      HorizontalAlignment="Left"
                      Width="140" />
            <Separator Foreground="Black"
                       HorizontalAlignment="Left"
                       Height="1"
                       Width="140" />
            <MenuItem Foreground="Black"
                      Header="Assesment"
                      HorizontalAlignment="Left"
                      Width="140"
                      Height="25"/>
        </MenuItem>

悬停菜单项时更改背景颜色但无法在 wpf 中显示子菜单

Change background color when hover menuitem but can't show submenu in wpf

.net

c#

wpf

xaml

menuitem