I've managed to edit the copy of the Menu and MenuItem template to be used as styles for respective Control Elements with the following triggers
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>
