.netwpfwpf-controls

WPF .NET app: how to set MenuItem text background style triggered when MouseOver its Parent is True


MenuItem IsHighlighted True

I've managed to edit the copy of the Menu and MenuItem template to be used as styles for respective Control Elements with the triggers shown in the code snippets below

The problem is i couldn't figure out a way to make the text's background within the MenuItem to be highlighted with similar color as its parent when the cursor is not directly over the text itself

Could anyone point me into the right direction? i'd provide any required clarifications for my post if needed and any help would be greatly appreciated, thanks in advance

snippets of the codes


Window.xaml code

    <Window
    x:Class="sdb01.MainWindowView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="clr-namespace:sdb01"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:userControls="clr-namespace:sdb01.Views.UserControls"
    xmlns:viewmodels="clr-namespace:sdb01.ViewModels"
    Title="MainWindow"
    Width="1000"
    Height="450"
    d:DataContext="{d:DesignInstance Type=viewmodels:MainWindowViewModel}"
    AllowsTransparency="True"
    Background="{StaticResource Brush.Dark.Background02.Static}"
    MouseLeftButtonDown="Window_MouseLeftButtonDown"
    WindowStartupLocation="CenterScreen"
    WindowStyle="None"
    mc:Ignorable="d">
    <WindowChrome.WindowChrome>
        <WindowChrome
            CaptionHeight="0"
            CornerRadius="0"
            GlassFrameThickness="0" />
    </WindowChrome.WindowChrome>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="40" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Border Background="{StaticResource Brush.Dark.Background01.Static}">
            <userControls:Titlebar />
        </Border>
    <!-- Window Content -->
    </Grid>
    </Window>

Titlebar.xaml code

    <UserControl
    x:Class="sdb01.Views.UserControls.Titlebar"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="clr-namespace:sdb01.Views.UserControls"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    d:Background="{StaticResource Brush.Dark.Background01.Static}"
    d:DesignHeight="50"
    d:DesignWidth="800"
    mc:Ignorable="d">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Menu
            Grid.Column="0"
            HorizontalAlignment="Left"
            VerticalAlignment="Center"
            Style="{StaticResource MenuStyle1}">
            <MenuItem Style="{StaticResource MenuItemStyle1}" Header="File">
                <Menu>
                    <MenuItem Style="{StaticResource MenuItemStyle1}" Header="Open" />
                </Menu>
                <Menu>
                    <MenuItem Style="{StaticResource MenuItemStyle1}" Header="Save" />
                </Menu>
                <Menu>
                    <MenuItem Style="{StaticResource MenuItemStyle1}" Header="Close" />
                </Menu>
            </MenuItem>

        </Menu>
        <StackPanel
            Grid.Column="1"
            HorizontalAlignment="Right"
            Orientation="Horizontal">
            <Button
                Name="MinimizeButton"
                Click="MinimizeButton_Click"
                Style="{StaticResource TitlebarButton}">
                <Viewbox>
                    <Path
                        Data="{StaticResource MinimizeIcon}"
                        Fill="{StaticResource Brush.Dark.Foreground01.Static}"
                        Stretch="Fill" />
                </Viewbox>
            </Button>
            <Button
                Name="MaximizeButton"
                Click="MaximizeButton_Click"
                Style="{StaticResource TitlebarButton}">
                <Viewbox>
                    <Path
                        Data="{StaticResource MaximizeIcon}"
                        Fill="{StaticResource Brush.Dark.Foreground01.Static}"
                        Stretch="Fill" />
                </Viewbox>
            </Button>
            <Button
                Name="CloseButton"
                Click="CloseButton_Click"
                Style="{StaticResource TitlebarButton}">
                <Viewbox>
                    <Path
                        Data="{StaticResource CloseIcon}"
                        Fill="{StaticResource Brush.Dark.Foreground01.Static}"
                        Stretch="Fill" />
                </Viewbox>
            </Button>
        </StackPanel>
    </Grid>
</UserControl>

Menu.xaml code

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style x:Key="MenuStyle1" TargetType="{x:Type Menu}">
        <Setter Property="Background" Value="{StaticResource Brush.Dark.Background02.Static}" />
        <Setter Property="FontFamily" Value="{DynamicResource {x:Static SystemFonts.MenuFontFamilyKey}}" />
        <Setter Property="FontSize" Value="{DynamicResource {x:Static SystemFonts.MenuFontSizeKey}}" />
        <Setter Property="FontStyle" Value="{DynamicResource {x:Static SystemFonts.MenuFontStyleKey}}" />
        <Setter Property="FontWeight" Value="{DynamicResource {x:Static SystemFonts.MenuFontWeightKey}}" />
        <Setter Property="Foreground" Value="{StaticResource Brush.Dark.Foreground01.Static}" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Menu}">
                    <Border
                        Padding="{TemplateBinding Padding}"
                        Background="Transparent"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="0"
                        SnapsToDevicePixels="true">
                        <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

MenuItem.xaml Code (p.s.: this is the code which contains the MenuItemStyle1 ;only relevant part is shown for brevity and not to exceed post's character limit)

<ControlTemplate.Triggers>
    <Trigger Property="IsSuspendingPopupAnimation" Value="true">
        <Setter TargetName="PART_Popup" Property="PopupAnimation" Value="None" />
    </Trigger>
    <Trigger Property="Icon" Value="{x:Null}">
        <Setter TargetName="Icon" Property="Visibility" Value="Collapsed" />
    </Trigger>
    <Trigger Property="IsChecked" Value="true">
        <Setter TargetName="GlyphPanel" Property="Visibility" Value="Visible" />
        <Setter TargetName="Icon" Property="Visibility" Value="Collapsed" />
    </Trigger>
    <Trigger Property="IsHighlighted" Value="True">
        <Setter TargetName="templateRoot" Property="Background" Value="{StaticResource MenuItem.Highlight.Background}" />
        <Setter TargetName="templateRoot" Property="BorderBrush" Value="{StaticResource MenuItem.Highlight.Border}" />
    </Trigger>
    <Trigger Property="IsEnabled" Value="False">
        <Setter TargetName="templateRoot" Property="TextElement.Foreground" Value="{StaticResource Menu.Disabled.Foreground}" />
        <Setter TargetName="GlyphPanel" Property="Fill" Value="{StaticResource Menu.Disabled.Foreground}" />
    </Trigger>
    <Trigger SourceName="SubMenuScrollViewer" Property="ScrollViewer.CanContentScroll" Value="false">
        <Setter TargetName="OpaqueRect" Property="Canvas.Top" Value="{Binding VerticalOffset, ElementName=SubMenuScrollViewer}" />
        <Setter TargetName="OpaqueRect" Property="Canvas.Left" Value="{Binding HorizontalOffset, ElementName=SubMenuScrollViewer}" />
    </Trigger>
</ControlTemplate.Triggers>

Solution

  • found the source of the problem, it's because i nested Menu element within the MenuItem element, which is unnecessary and a mistake on my part

    adjusted Titlebar.xaml code

    <Menu
        Grid.Column="0"
        HorizontalAlignment="Left"
        VerticalAlignment="Center"
        Style="{StaticResource MenuStyle1}">
        <MenuItem Header="File" Style="{StaticResource MenuItemStyle1}">
            <MenuItem
                Command="{Binding OpenCommand}"
                Header="Open"
                Style="{StaticResource MenuItemStyle1}" />
            <MenuItem
                Command="{Binding SaveCommand}"
                Header="Save"
                Style="{StaticResource MenuItemStyle1}" />
            <MenuItem Header="Close" Style="{StaticResource MenuItemStyle1}" />
        </MenuItem>
    
    </Menu>