✅ MenuItem outline WPF
I cant remove the default outlines on the MenuItem. I've tried lots of stuff and can't figure it out
c#
<Style TargetType="MenuItem">
<Setter Property="Background" Value="#2C2C2C"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="BorderThickness" Value="0"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#383838"/>
</Trigger>
</Style.Triggers>
</Style>
c#
<Style TargetType="MenuItem">
<Setter Property="Background" Value="#2C2C2C"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="BorderThickness" Value="0"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#383838"/>
</Trigger>
</Style.Triggers>
</Style>
c#
<DockPanel>
<Menu DockPanel.Dock="Top"
Background="#2C2C2C"
Foreground="White"
BorderBrush="#404040"
BorderThickness="0,0,0,1" Height="25">
<MenuItem Header="File" Height="25">
<MenuItem Header="New Tab" Click="NewTab_Click"/>
</MenuItem>
</Menu>
<TabControl x:Name="EditorTabs" Background="#272727" BorderThickness="0"/>
</DockPanel>
c#
<DockPanel>
<Menu DockPanel.Dock="Top"
Background="#2C2C2C"
Foreground="White"
BorderBrush="#404040"
BorderThickness="0,0,0,1" Height="25">
<MenuItem Header="File" Height="25">
<MenuItem Header="New Tab" Click="NewTab_Click"/>
</MenuItem>
</Menu>
<TabControl x:Name="EditorTabs" Background="#272727" BorderThickness="0"/>
</DockPanel>
5 Replies
is the style in the
<Resource> of your UserControl? or try to put it in <Menu.Resource>This is how ive got it
Ive tried doing
c#
<Window x:Class="LuaNote.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:wv2="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"
Background="#272727"
Title="LuaNote" Height="450" Width="800">
<Window.Resources>
<Style TargetType="Menu">
<Setter Property="Background" Value="#2C2C2C"/>
<Setter Property="Foreground" Value="White"/>
</Style>
<Style TargetType="MenuItem">
<Setter Property="Background" Value="#2C2C2C"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="BorderThickness" Value="0"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#383838"/>
</Trigger>
</Style.Triggers>
</Style>
<Style TargetType="TabControl">
<Setter Property="Background" Value="#2C2C2C"/>
<Setter Property="BorderBrush" Value="Transparent"/>
</Style>
<Style TargetType="TabItem">
<Setter Property="Foreground" Value="White"/>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="Padding" Value="10,5"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<Border Name="Bd"
Background="#2C2C2C"
BorderBrush="Transparent"
BorderThickness="1,1,1,0"
CornerRadius="3,3,0,0"
Padding="{TemplateBinding Padding}">
<ContentPresenter x:Name="Content"
VerticalAlignment="Center"
HorizontalAlignment="Center"
RecognizesAccessKey="True"
ContentSource="Header"
TextElement.Foreground="{TemplateBinding Foreground}"/>
</Border>
<ControlTemplate.Triggers>
<!-- Selected tab -->
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Bd" Property="Background" Value="#3C3C3C"/>
</Trigger>
<!-- Hovered tab -->
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Bd" Property="Background" Value="#383838"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<DockPanel>
<Menu DockPanel.Dock="Top"
Background="#2C2C2C"
Foreground="White"
BorderBrush="#404040"
BorderThickness="0,0,0,1" Height="25">
<MenuItem Header="File" Height="25">
<MenuItem Header="New Tab" Click="NewTab_Click"/>
</MenuItem>
</Menu>
<TabControl x:Name="EditorTabs" Background="#272727" BorderThickness="0"/>
</DockPanel>
</Window>
c#
<Window x:Class="LuaNote.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:wv2="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"
Background="#272727"
Title="LuaNote" Height="450" Width="800">
<Window.Resources>
<Style TargetType="Menu">
<Setter Property="Background" Value="#2C2C2C"/>
<Setter Property="Foreground" Value="White"/>
</Style>
<Style TargetType="MenuItem">
<Setter Property="Background" Value="#2C2C2C"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="BorderThickness" Value="0"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#383838"/>
</Trigger>
</Style.Triggers>
</Style>
<Style TargetType="TabControl">
<Setter Property="Background" Value="#2C2C2C"/>
<Setter Property="BorderBrush" Value="Transparent"/>
</Style>
<Style TargetType="TabItem">
<Setter Property="Foreground" Value="White"/>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="Padding" Value="10,5"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<Border Name="Bd"
Background="#2C2C2C"
BorderBrush="Transparent"
BorderThickness="1,1,1,0"
CornerRadius="3,3,0,0"
Padding="{TemplateBinding Padding}">
<ContentPresenter x:Name="Content"
VerticalAlignment="Center"
HorizontalAlignment="Center"
RecognizesAccessKey="True"
ContentSource="Header"
TextElement.Foreground="{TemplateBinding Foreground}"/>
</Border>
<ControlTemplate.Triggers>
<!-- Selected tab -->
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Bd" Property="Background" Value="#3C3C3C"/>
</Trigger>
<!-- Hovered tab -->
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Bd" Property="Background" Value="#383838"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<DockPanel>
<Menu DockPanel.Dock="Top"
Background="#2C2C2C"
Foreground="White"
BorderBrush="#404040"
BorderThickness="0,0,0,1" Height="25">
<MenuItem Header="File" Height="25">
<MenuItem Header="New Tab" Click="NewTab_Click"/>
</MenuItem>
</Menu>
<TabControl x:Name="EditorTabs" Background="#272727" BorderThickness="0"/>
</DockPanel>
</Window>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/> but it wont seem to work<Border x:Name="templateRoot" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="true">
<Grid VerticalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ContentPresenter x:Name="Icon" ContentSource="Icon" HorizontalAlignment="Center" Height="16" Margin="3" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center" Width="16"/>
<Path x:Name="GlyphPanel" Data="{StaticResource Checkmark}" FlowDirection="LeftToRight" Fill="{TemplateBinding Foreground}" Margin="3" VerticalAlignment="Center" Visibility="Collapsed"/>
<ContentPresenter ContentSource="Header" Grid.Column="1" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
the pop up
</Grid>
</Border>
<Border x:Name="templateRoot" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="true">
<Grid VerticalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ContentPresenter x:Name="Icon" ContentSource="Icon" HorizontalAlignment="Center" Height="16" Margin="3" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center" Width="16"/>
<Path x:Name="GlyphPanel" Data="{StaticResource Checkmark}" FlowDirection="LeftToRight" Fill="{TemplateBinding Foreground}" Margin="3" VerticalAlignment="Center" Visibility="Collapsed"/>
<ContentPresenter ContentSource="Header" Grid.Column="1" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
the pop up
</Grid>
</Border>
<Popup x:Name="PART_Popup" AllowsTransparency="true" Focusable="false" IsOpen="{Binding IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}" Placement="Bottom" PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}" PlacementTarget="{Binding ElementName=templateRoot}">
<Border x:Name="SubMenuBorder" Background="{StaticResource Menu.Static.Background}" BorderBrush="{StaticResource Menu.Static.Border}" BorderThickness="1" 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="{StaticResource Menu.Static.Separator}" 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>
<Popup x:Name="PART_Popup" AllowsTransparency="true" Focusable="false" IsOpen="{Binding IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}" Placement="Bottom" PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}" PlacementTarget="{Binding ElementName=templateRoot}">
<Border x:Name="SubMenuBorder" Background="{StaticResource Menu.Static.Background}" BorderBrush="{StaticResource Menu.Static.Border}" BorderThickness="1" 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="{StaticResource Menu.Static.Separator}" 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>
i always override its control template so i didnt notice that at first
https://learn.microsoft.com/en-us/dotnet/desktop/wpf/controls/menu-styles-and-templates#menuitem-parts
the above one is the control template of top level header (ie the direct child of menu with submenu header/item) and the
<Popup> comes with child <Border>Menu Styles and Templates - WPF
Learn about styles and templates for the Windows Presentation Foundation the Menu control. Modify the ControlTemplate to give the control a unique appearance.
I see, this is a little annoying as i cant fix it xD
Thanks i think i made it work