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>
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>