System.Windows.Controls.MenuItem without icon area
You can achieve it by defining ItemsPanel property of MenuItem.
Create an ItemsPanelTemplate resource
<ItemsPanelTemplate x:Key="MenuItemPanelTemplate"> <StackPanel Margin="-20,0,0,0" Background="White"/></ItemsPanelTemplate>Add below MenuItem style to resources and you are done.
<Style TargetType="{x:Type MenuItem}"> <Setter Property="ItemsPanel" Value="{StaticResource MenuItemPanelTemplate}"/></Style>To apply same Style to a ContextMenu, you need to create one more Style as following-
<Style TargetType="{x:Type ContextMenu}"> <Setter Property="ItemsPanel" Value="{StaticResource MenuItemPanelTemplate}"/></Style>
You would need to take the default Styles from here and remove that area from the MenuItem's control template.
For MenuItem, you can actually just redefine the SubmenuItemTemplateKey and SubmenuHeaderTemplateKey ControlTemplate, something like described here.
EDIT:
The background is actually rendered by the Menu Style. If you search for "MenuItemIconColumnGroup", you will find all the places that use it.
EDIT:
Here is a complete sample that uses a Black background and White foreground:
<Application x:Class="DeleteMeWPF.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:theme="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero" StartupUri="MainWindow.xaml"><Application.Resources> <MenuScrollingVisibilityConverter x:Key="MenuScrollingVisibilityConverter" /> <Geometry x:Key="DownArrow">M 0,0 L 3.5,4 L 7,0 Z</Geometry> <Geometry x:Key="UpArrow">M 0,4 L 3.5,0 L 7,4 Z</Geometry> <Geometry x:Key="RightArrow">M 0,0 L 4,3.5 L 0,7 Z</Geometry> <Geometry x:Key="Checkmark">M 0,5.1 L 1.7,5.2 L 3.4,7.1 L 8,0.4 L 9.2,0 L 3.3,10.8 Z</Geometry> <LinearGradientBrush x:Key="MenuItemSelectionFill" StartPoint="0,0" EndPoint="0,1"> <LinearGradientBrush.GradientStops> <GradientStop Color="#34C5EBFF" Offset="0" /> <GradientStop Color="#3481D8FF" Offset="1" /> </LinearGradientBrush.GradientStops> </LinearGradientBrush> <LinearGradientBrush x:Key="MenuItemPressedFill" StartPoint="0,0" EndPoint="0,1"> <LinearGradientBrush.GradientStops> <GradientStop Color="#28717070" Offset="0" /> <GradientStop Color="#50717070" Offset="0.75" /> <GradientStop Color="#90717070" Offset="1" /> </LinearGradientBrush.GradientStops> </LinearGradientBrush> <Style x:Key="{x:Static MenuItem.SeparatorStyleKey}" TargetType="{x:Type Separator}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Separator}"> <Grid SnapsToDevicePixels="true" Margin="0,6,0,4"> <Rectangle Height="1" Margin="30,0,1,1" Fill="#E0E0E0" /> <Rectangle Height="1" Margin="30,1,1,0" Fill="White" /> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> <ControlTemplate x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Type FrameworkElement}, ResourceId=SubmenuContent}" TargetType="{x:Type ContentControl}"> <Border Background="Black" BorderBrush="#FF959595" BorderThickness="1"> <ContentPresenter Grid.ColumnSpan="2" Margin="1,0" /> </Border> </ControlTemplate> <ControlTemplate x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Type MenuItem}, ResourceId=TopLevelItemTemplateKey}" TargetType="{x:Type MenuItem}"> <Grid SnapsToDevicePixels="true"> <Rectangle x:Name="OuterBorder" RadiusX="2" RadiusY="2" /> <Rectangle Name="Bg" Margin="1" Fill="{TemplateBinding MenuItem.Background}" Stroke="{TemplateBinding MenuItem.BorderBrush}" StrokeThickness="1" RadiusX="1" RadiusY="1" /> <Rectangle x:Name="InnerBorder" Margin="2" /> <DockPanel> <ContentPresenter x:Name="Icon" Margin="4,0,6,0" VerticalAlignment="Center" ContentSource="Icon" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" /> <Path x:Name="GlyphPanel" Margin="7,0,0,0" Visibility="Collapsed" VerticalAlignment="Center" Fill="{TemplateBinding MenuItem.Foreground}" FlowDirection="LeftToRight" Data="{StaticResource Checkmark}" /> <ContentPresenter ContentSource="Header" Margin="{TemplateBinding MenuItem.Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" /> </DockPanel> </Grid> <ControlTemplate.Triggers> <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="Bg" Property="Stroke" Value="#90717070" /> <Setter TargetName="OuterBorder" Property="Stroke" Value="#50FFFFFF" /> <Setter TargetName="InnerBorder" Property="Stroke" Value="#50FFFFFF" /> </Trigger> <Trigger Property="IsKeyboardFocused" Value="true"> <Setter TargetName="Bg" Property="Stroke" Value="#E0717070" /> <Setter TargetName="Bg" Property="Fill" Value="{StaticResource MenuItemPressedFill}" /> <Setter TargetName="InnerBorder" Property="Stroke" Value="#50747272" /> </Trigger> <Trigger Property="IsEnabled" Value="false"> <Setter Property="Foreground" Value="#FF9A9A9A" /> <Setter TargetName="GlyphPanel" Property="Fill" Value="#848589" /> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> <ControlTemplate x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Type MenuItem}, ResourceId=TopLevelHeaderTemplateKey}" TargetType="{x:Type MenuItem}"> <Grid SnapsToDevicePixels="true"> <Rectangle x:Name="OuterBorder" RadiusX="2" RadiusY="2" /> <Rectangle Name="Bg" Margin="1" Fill="{TemplateBinding MenuItem.Background}" Stroke="{TemplateBinding MenuItem.BorderBrush}" StrokeThickness="1" RadiusX="1" RadiusY="1" /> <Rectangle x:Name="InnerBorder" Margin="2" /> <DockPanel> <ContentPresenter x:Name="Icon" Margin="4,0,6,0" VerticalAlignment="Center" ContentSource="Icon" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" /> <Path x:Name="GlyphPanel" Margin="7,0,0,0" Visibility="Collapsed" VerticalAlignment="Center" Fill="{TemplateBinding MenuItem.Foreground}" FlowDirection="LeftToRight" Data="{StaticResource Checkmark}" /> <ContentPresenter ContentSource="Header" Margin="{TemplateBinding MenuItem.Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" /> </DockPanel> <Popup x:Name="PART_Popup" HorizontalOffset="1" VerticalOffset="-1" AllowsTransparency="true" Placement="Bottom" IsOpen="{Binding Path=IsSubmenuOpen,RelativeSource={RelativeSource TemplatedParent}}" Focusable="false" PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}"> <theme:SystemDropShadowChrome Name="Shdw" Color="Transparent"> <ContentControl Name="SubMenuBorder" Template="{DynamicResource {ComponentResourceKey TypeInTargetAssembly={x:Type FrameworkElement}, ResourceId=SubmenuContent}}" IsTabStop="false"> <ScrollViewer CanContentScroll="true" Style="{DynamicResource {ComponentResourceKey TypeInTargetAssembly={x:Type FrameworkElement}, ResourceId=MenuScrollViewer}}"> <ItemsPresenter Margin="2" KeyboardNavigation.TabNavigation="Cycle" KeyboardNavigation.DirectionalNavigation="Cycle" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Grid.IsSharedSizeScope="true" /> </ScrollViewer> </ContentControl> </theme:SystemDropShadowChrome> </Popup> </Grid> <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 SourceName="PART_Popup" Property="Popup.HasDropShadow" Value="true"> <Setter TargetName="Shdw" Property="Margin" Value="0,0,5,5" /> <Setter TargetName="Shdw" Property="Color" Value="#71000000" /> </Trigger> <Trigger Property="IsHighlighted" Value="true"> <Setter TargetName="Bg" Property="Stroke" Value="#90717070" /> <Setter TargetName="OuterBorder" Property="Stroke" Value="#50FFFFFF" /> <Setter TargetName="InnerBorder" Property="Stroke" Value="#50FFFFFF" /> </Trigger> <Trigger Property="IsKeyboardFocused" Value="true"> <Setter TargetName="Bg" Property="Stroke" Value="#E0717070" /> <Setter TargetName="Bg" Property="Fill" Value="{StaticResource MenuItemPressedFill}" /> <Setter TargetName="InnerBorder" Property="Stroke" Value="#50747272" /> </Trigger> <Trigger Property="IsSubmenuOpen" Value="true"> <Setter TargetName="Bg" Property="Stroke" Value="#E0717070" /> <Setter TargetName="Bg" Property="Fill" Value="{StaticResource MenuItemPressedFill}" /> <Setter TargetName="InnerBorder" Property="Stroke" Value="#50747272" /> </Trigger> <Trigger Property="IsEnabled" Value="false"> <Setter Property="Foreground" Value="#FF9A9A9A" /> <Setter TargetName="GlyphPanel" Property="Fill" Value="#848589" /> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> <ControlTemplate x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Type MenuItem}, ResourceId=SubmenuItemTemplateKey}" TargetType="{x:Type MenuItem}"> <Grid SnapsToDevicePixels="true"> <Rectangle Name="Bg" Fill="{TemplateBinding MenuItem.Background}" Stroke="{TemplateBinding MenuItem.BorderBrush}" StrokeThickness="1" RadiusX="2" RadiusY="2" /> <Rectangle x:Name="InnerBorder" Margin="1" RadiusX="2" RadiusY="2" /> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" SharedSizeGroup="MenuItemIconColumnGroup" /> <ColumnDefinition Width="4" /> <ColumnDefinition Width="*" /> <ColumnDefinition Width="37" /> <ColumnDefinition Width="Auto" SharedSizeGroup="MenuItemIGTColumnGroup" /> <ColumnDefinition Width="17" /> </Grid.ColumnDefinitions> <ContentPresenter x:Name="Icon" Margin="1" VerticalAlignment="Center" ContentSource="Icon" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" /> <Border x:Name="GlyphPanel" Background="#E6EFF4" BorderBrush="#CDD3E6" BorderThickness="1" CornerRadius="3" Margin="1" Visibility="Collapsed" Width="22" Height="22"> <Path Name="Glyph" Width="9" Height="11" Fill="#0C12A1" FlowDirection="LeftToRight" Data="{StaticResource Checkmark}" /> </Border> <ContentPresenter Grid.Column="2" ContentSource="Header" Margin="{TemplateBinding MenuItem.Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" /> <TextBlock Grid.Column="4" Text="{TemplateBinding MenuItem.InputGestureText}" Margin="{TemplateBinding MenuItem.Padding}" /> </Grid> </Grid> <ControlTemplate.Triggers> <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="Bg" Property="Fill" Value="{StaticResource MenuItemSelectionFill}" /> <Setter TargetName="Bg" Property="Stroke" Value="#8071CBF1" /> <Setter TargetName="InnerBorder" Property="Stroke" Value="#40FFFFFF" /> </Trigger> <Trigger Property="IsEnabled" Value="false"> <Setter Property="Foreground" Value="#FF9A9A9A" /> <Setter TargetName="GlyphPanel" Property="Background" Value="#EEE9E9" /> <Setter TargetName="GlyphPanel" Property="BorderBrush" Value="#DBD6D6" /> <Setter TargetName="Glyph" Property="Fill" Value="#848589" /> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> <ControlTemplate x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Type MenuItem}, ResourceId=SubmenuHeaderTemplateKey}" TargetType="{x:Type MenuItem}"> <Grid SnapsToDevicePixels="true"> <Rectangle Name="Bg" Fill="{TemplateBinding MenuItem.Background}" Stroke="{TemplateBinding MenuItem.BorderBrush}" StrokeThickness="1" RadiusX="2" RadiusY="2" /> <Rectangle x:Name="InnerBorder" Margin="1" Stroke="Transparent" StrokeThickness="1" RadiusX="2" RadiusY="2" /> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" SharedSizeGroup="MenuItemIconColumnGroup" /> <ColumnDefinition Width="4" /> <ColumnDefinition Width="*" /> <ColumnDefinition Width="37" /> <ColumnDefinition Width="Auto" SharedSizeGroup="MenuItemIGTColumnGroup" /> <ColumnDefinition Width="17" /> </Grid.ColumnDefinitions> <ContentPresenter x:Name="Icon" Margin="1" VerticalAlignment="Center" ContentSource="Icon" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" /> <Border x:Name="GlyphPanel" Background="#E6EFF4" BorderBrush="#CDD3E6" BorderThickness="1" CornerRadius="3" Margin="1" Visibility="Collapsed" Width="22" Height="22"> <Path Name="Glyph" Width="9" Height="11" Fill="#0C12A1" FlowDirection="LeftToRight" Data="{StaticResource Checkmark}" /> </Border> <ContentPresenter Grid.Column="2" ContentSource="Header" Margin="{TemplateBinding MenuItem.Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" /> <TextBlock Grid.Column="4" Text="{TemplateBinding MenuItem.InputGestureText}" Margin="{TemplateBinding MenuItem.Padding}" Visibility="Collapsed" /> <Path Grid.Column="5" VerticalAlignment="Center" Margin="4,0,0,0" Fill="{TemplateBinding MenuItem.Foreground}" Data="{StaticResource RightArrow}" /> </Grid> <Popup x:Name="PART_Popup" AllowsTransparency="true" Placement="Right" VerticalOffset="-3" HorizontalOffset="-2" IsOpen="{Binding Path=IsSubmenuOpen,RelativeSource={RelativeSource TemplatedParent}}" Focusable="false" PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}"> <theme:SystemDropShadowChrome Name="Shdw" Color="Transparent"> <ContentControl Name="SubMenuBorder" Template="{DynamicResource {ComponentResourceKey TypeInTargetAssembly={x:Type FrameworkElement}, ResourceId=SubmenuContent}}" IsTabStop="false"> <ScrollViewer CanContentScroll="true" Style="{DynamicResource {ComponentResourceKey TypeInTargetAssembly={x:Type FrameworkElement}, ResourceId=MenuScrollViewer}}"> <ItemsPresenter Margin="2" KeyboardNavigation.TabNavigation="Cycle" KeyboardNavigation.DirectionalNavigation="Cycle" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Grid.IsSharedSizeScope="true" /> </ScrollViewer> </ContentControl> </theme:SystemDropShadowChrome> </Popup> </Grid> <ControlTemplate.Triggers> <Trigger Property="IsSuspendingPopupAnimation" Value="true"> <Setter TargetName="PART_Popup" Property="PopupAnimation" Value="None" /> </Trigger> <Trigger Property="IsHighlighted" Value="true"> <Setter TargetName="InnerBorder" Property="Stroke" Value="#D1DBF4FF" /> </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 SourceName="PART_Popup" Property="Popup.HasDropShadow" Value="true"> <Setter TargetName="Shdw" Property="Margin" Value="0,0,5,5" /> <Setter TargetName="Shdw" Property="Color" Value="#71000000" /> </Trigger> <Trigger Property="IsHighlighted" Value="true"> <Setter TargetName="Bg" Property="Fill" Value="{StaticResource MenuItemSelectionFill}" /> <Setter TargetName="Bg" Property="Stroke" Value="#8571CBF1" /> </Trigger> <Trigger Property="IsEnabled" Value="false"> <Setter Property="Foreground" Value="#FF9A9A9A" /> <Setter TargetName="GlyphPanel" Property="Background" Value="#EEE9E9" /> <Setter TargetName="GlyphPanel" Property="BorderBrush" Value="#DBD6D6" /> <Setter TargetName="Glyph" Property="Fill" Value="#848589" /> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> <Style TargetType="{x:Type MenuItem}"> <Setter Property="OverridesDefaultStyle" Value="true" /> <Setter Property="HorizontalContentAlignment" Value="{Binding Path=HorizontalContentAlignment,RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" /> <Setter Property="VerticalContentAlignment" Value="{Binding Path=VerticalContentAlignment,RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" /> <Setter Property="Background" Value="Transparent" /> <Setter Property="Template" Value="{DynamicResource {ComponentResourceKey TypeInTargetAssembly={x:Type MenuItem}, ResourceId=SubmenuItemTemplateKey}}" /> <Style.Triggers> <Trigger Property="Role" Value="TopLevelHeader"> <Setter Property="Padding" Value="7,2,8,3" /> <Setter Property="Template" Value="{DynamicResource {ComponentResourceKey TypeInTargetAssembly={x:Type MenuItem}, ResourceId=TopLevelHeaderTemplateKey}}" /> </Trigger> <Trigger Property="Role" Value="TopLevelItem"> <Setter Property="Padding" Value="7,2,8,3" /> <Setter Property="Template" Value="{DynamicResource {ComponentResourceKey TypeInTargetAssembly={x:Type MenuItem}, ResourceId=TopLevelItemTemplateKey}}" /> </Trigger> <Trigger Property="Role" Value="SubmenuHeader"> <Setter Property="Padding" Value="2,3,2,3" /> <Setter Property="Template" Value="{DynamicResource {ComponentResourceKey TypeInTargetAssembly={x:Type MenuItem}, ResourceId=SubmenuHeaderTemplateKey}}" /> </Trigger> <Trigger Property="Role" Value="SubmenuItem"> <Setter Property="Padding" Value="2,3,2,3" /> </Trigger> </Style.Triggers> </Style> <Style TargetType="{x:Type Menu}"> <Setter Property="OverridesDefaultStyle" Value="true" /> <Setter Property="Background" Value="Black" /> <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="White" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Menu}"> <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true"> <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" /> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style></Application.Resources></Application>
The solution which overrides the Template seems to be overkill (for me), the other answer from 'nits' is cool, but the selection overlay is not drawn correct (in my example).My aim was to use the space of the icon and the space of the shortcut.
This is the result:
Here the code:
<ContextMenu ItemsSource="{Binding MyItems}" ><ContextMenu.ItemsPanel> <ItemsPanelTemplate> <StackPanel Background="White"></StackPanel> </ItemsPanelTemplate></ContextMenu.ItemsPanel><ContextMenu.ItemContainerStyle> <Style TargetType="MenuItem"> <Setter Property="Command" Value="{Binding Path=DataContext.XyzCommand, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}"/> <Setter Property="CommandParameter" Value="{Binding}"/> </Style></ContextMenu.ItemContainerStyle><ContextMenu.ItemTemplate> <DataTemplate> <Grid Margin="-20,0,-40,0"><!--this part is important--> <Grid.ColumnDefinitions> <ColumnDefinition Width="20"/> <ColumnDefinition Width="1*"/> </Grid.ColumnDefinitions> <TextBlock Grid.Column="0" Text="{Binding Ident}"/> <TextBlock Grid.Column="1" Text="{Binding Description}"/> </Grid> </DataTemplate></ContextMenu.ItemTemplate>-20 uses the space of the Icon, -40 uses the space of the shortcut. Furthermore the size of the popup is calculated automatically in this example.Also worth to mention is the binding of the command: all items are bound to the same command, but the item itself is given as the Parameter of the Event (CommandParameter).
public ViewModel(){ XyzCommand = new DelegateCommand<Item>(XyzCommandExecute);}private void XyzCommandExecute(Item item){ //command code}