WPF ContextMenu Submenu Style
How does one set the style of a sub-menu under a ContextMenu?
Here is the code for ContextMenu:
<ListView.ContextMenu>
<fw:AcrylicContextMenu Style="{StaticResource NowPlayingContextMenuStyle}" ItemContainerStyle="{StaticResource NowPlayingContextMenuItemStyle}">
<MenuItem>
<MenuItem.Header>
<TextBlock Text="Play" Style="{StaticResource NowPlayingContextMenuItemHeader}" />
</MenuItem.Header>
<MenuItem.Icon>
<materialDesign:PackIcon Kind="Play" />
</MenuItem.Icon>
</MenuItem>
<!-- ... -->
<MenuItem>
<MenuItem.Header>
<TextBlock Text="Sort" Style="{StaticResource NowPlayingContextMenuItemHeader}" />
</MenuItem.Header>
<MenuItem.Icon>
<materialDesign:PackIcon Kind="Sort" />
</MenuItem.Icon>
<!--#region SubMenu Sort-->
<MenuItem>
<MenuItem.Header>
<TextBlock Text="Ascending" Style="{StaticResource NowPlayingContextMenuItemHeader}" />
</MenuItem.Header>
<MenuItem.Icon>
<materialDesign:PackIcon Kind="SortAscending" />
</MenuItem.Icon>
</MenuItem>
<MenuItem>
<MenuItem.Header>
<TextBlock Text="Descending" Style="{StaticResource NowPlayingContextMenuItemHeader}" />
</MenuItem.Header>
<MenuItem.Icon>
<materialDesign:PackIcon Kind="SortDescending" />
</MenuItem.Icon>
</MenuItem>
<!--#endregion SubMenu Sort-->
</MenuItem>
</fw:AcrylicContextMenu>
</ListView.ContextMenu>
The styles have been defined in this way:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:V_Player.Resources.Styles"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes">
<Style x:Key="NowPlayingListViewItemStyle" BasedOn="{StaticResource MaterialDesignListBoxItem}" TargetType="ListViewItem">
<Setter Property="Height" Value="32" />
<Setter Property="Padding" Value="8,8,8,8" />
</Style>
<Style x:Key="NowPlayingContextMenuStyle" BasedOn="{StaticResource MaterialDesignMenu}" TargetType="ContextMenu">
<Setter Property="Foreground" Value="White" />
<Setter Property="Opacity" Value="0.7" />
<Setter Property="FontSize" Value="14" />
<Setter Property="MinWidth" Value="128" />
</Style>
<Style x:Key="NowPlayingContextMenuItemStyle" BasedOn="{StaticResource MaterialDesignMenuItem}" TargetType="MenuItem">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Margin" Value="0" />
<Setter Property="Padding" Value="8, 0, 8, 0" />
</Style>
<Style x:Key="NowPlayingContextMenuSeparatorStyle" BasedOn="{StaticResource MaterialDesignSeparator}" TargetType="Separator">
<Setter Property="Margin" Value="0" />
<Setter Property="Padding" Value="0" />
<Setter Property="Height" Value="1" />
</Style>
<Style x:Key="NowPlayingContextMenuItemHeader" BasedOn="{StaticResource MaterialDesignTextBlock}" TargetType="TextBlock">
<Setter Property="Margin" Value="-12, 0, 0, 0" />
</Style>
</ResourceDictionary>
And results are not quite right... For sub menus of course.
Menu background is Acrylic and transparent, but sub menu no, it is gray and has material design style.
What can i do for fix it?
Solution
This style work for me:
<!-- Separator -->
<Style x:Key="SeparatorStyle" TargetType="{x:Type Separator}">
<Setter Property="Height" Value="1" />
<Setter Property="Background" Value="#0f3c5a" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Separator}">
<Rectangle Height="{TemplateBinding Height}" Fill="White" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- Outer menu items -->
<Style TargetType="{x:Type MenuItem}">
<Setter Property="Background" Value="{StaticResource ToolBarBackground}" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Margin" Value="5"/>
<Style.Triggers>
<Trigger Property="IsHighlighted" Value="True">
<Setter Property="Background" Value="Black" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="LightGray" />
</Trigger>
</Style.Triggers>
</Style>
<!-- Outer menu -->
<Style TargetType="{x:Type ContextMenu}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Grid.IsSharedSizeScope" Value="true" />
<Setter Property="HasDropShadow" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ContextMenu}">
<!-- Here is where you change the border thickness to zero on the menu -->
<Border
x:Name="Border"
BorderThickness="0">
<StackPanel
ClipToBounds="True"
IsItemsHost="True"
KeyboardNavigation.DirectionalNavigation="Cycle"
Orientation="Vertical" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="HasDropShadow" Value="true">
<Setter TargetName="Border" Property="Padding" Value="0,3,0,3" />
<Setter TargetName="Border" Property="CornerRadius" Value="4" />
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="Border" Property="Background" Value="{StaticResource ToolBarBackground}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- SubmenuItem -->
<ControlTemplate x:Key="{x:Static MenuItem.SubmenuItemTemplateKey}" TargetType="{x:Type MenuItem}">
<Border Name="Border">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="Icon" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" SharedSizeGroup="Shortcut" />
<ColumnDefinition Width="13" />
</Grid.ColumnDefinitions>
<ContentPresenter
Name="Icon"
Margin="6,0,6,0"
VerticalAlignment="Center"
ContentSource="Icon" />
<Border
Name="Check"
Width="13"
Height="13"
Margin="6,0,6,0"
Background="{StaticResource ToolBarBackground}"
BorderBrush="#5082a4"
BorderThickness="1"
Visibility="Collapsed">
<Path
Name="CheckMark"
Width="7"
Height="7"
Data="M 0 0 L 7 7 M 0 7 L 7 0"
SnapsToDevicePixels="False"
Stroke="#5082a4"
StrokeThickness="2"
Visibility="Hidden" />
</Border>
<ContentPresenter
Name="HeaderHost"
Grid.Column="1"
ContentSource="Header"
RecognizesAccessKey="True" />
<TextBlock
x:Name="InputGestureText"
Grid.Column="2"
Margin="5,2,0,2"
DockPanel.Dock="Right"
Text="{TemplateBinding InputGestureText}" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Icon" Value="{x:Null}">
<Setter TargetName="Icon" Property="Visibility" Value="Hidden" />
</Trigger>
<Trigger Property="IsChecked" Value="true">
<Setter TargetName="CheckMark" Property="Visibility" Value="Visible" />
</Trigger>
<Trigger Property="IsCheckable" Value="true">
<Setter TargetName="Check" Property="Visibility" Value="Visible" />
<Setter TargetName="Icon" Property="Visibility" Value="Hidden" />
</Trigger>
<Trigger Property="IsHighlighted" Value="true">
<Setter TargetName="Border" Property="Background" Value="#5082a4" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#0f3c5a" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<!-- SubmenuHeader -->
<ControlTemplate x:Key="{x:Static MenuItem.SubmenuHeaderTemplateKey}" TargetType="{x:Type MenuItem}">
<Border Name="Border">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="Icon" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" SharedSizeGroup="Shortcut" />
<ColumnDefinition Width="13" />
</Grid.ColumnDefinitions>
<ContentPresenter
Name="Icon"
Margin="6,0,6,0"
VerticalAlignment="Center"
ContentSource="Icon" />
<ContentPresenter
Name="HeaderHost"
Grid.Column="1"
ContentSource="Header"
RecognizesAccessKey="True" />
<TextBlock
x:Name="InputGestureText"
Grid.Column="2"
Margin="5,2,2,2"
DockPanel.Dock="Right"
Text="{TemplateBinding InputGestureText}" />
<Path
Grid.Column="3"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M 0 0 L 0 7 L 4 3.5 Z"
Fill="#0f3c5a" />
<Popup
Name="Popup"
AllowsTransparency="True"
Focusable="False"
HorizontalOffset="-4"
IsOpen="{TemplateBinding IsSubmenuOpen}"
Placement="Right"
PopupAnimation="Fade">
<Border
Name="SubmenuBorder"
Background="{StaticResource ToolBarBackground}"
BorderBrush="{StaticResource ToolBarBackground}"
BorderThickness="1"
SnapsToDevicePixels="True">
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Cycle" />
</Border>
</Popup>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Icon" Value="{x:Null}">
<Setter TargetName="Icon" Property="Visibility" Value="Collapsed" />
</Trigger>
<Trigger Property="IsHighlighted" Value="true">
<Setter TargetName="Border" Property="Background" Value="#5082a4" />
</Trigger>
<Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="True">
<Setter TargetName="SubmenuBorder" Property="CornerRadius" Value="4" />
<Setter TargetName="SubmenuBorder" Property="Padding" Value="0,3,0,3" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#0f3c5a" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
- Event Triggers in WPF binding doesnt work
- How do I create a menu separator bar in WPF using code
- Integrating help in a WPF application
- Using a trigger to set a TextBlock foreground on MouseOver
- Wavy underlines in a FlowDocument
- "The calling thread must be STA, because many UI components require this."
- Windows 10 all icon resolutions on all DPI settings? Format? Pixel art as icon? Large size icon in start menu medium tile?
- How to have a summary-like textbox
- Why is the user control not showing everything in the window?
- WPF IOException Cannot locate resource
- How can I override default "global" keyboard shortcuts and create my own instead?
- Copying From and To Clipboard loses image transparency
- WPF Change Background color of a Combobox
- What kind of object should I create to have its property be bound to a control's property
- MVVM- View Model-View Model Communications
- How do I "restore" the Caret Position in a Wpf RichTextBox?
- WPF Highlight multiple nodes/leaves in a treeview based on selection
- How do I make two asymmetrically linked CheckBoxes in XAML?
- Slider \ ScrollViewer in a touch interface not working properly
- How do you add an Icon to a WPF App?
- Is it possible to add Avalonia controls to a Microsoft WPF application?
- XAML to Rtf conversion in C#?
- How to create a WPF Cursor from an IntPtr handle
- How to shorten the length of a .Net C# System.Windows.Shapes.Line at runtime?
- How to control the scroll position of a ListBox in a MVVM WPF app
- InputBindings work only when focused
- CefSharp with WPF MVVM
- WPF: Grid with column/row margin/padding?
- WPF reset maxWidth and maxHeight to default
- Message box repeating under loop with Cancellation Token