WPF - How to style the menu control to remove the left margin? WPF - How to style the menu control to remove the left margin? wpf wpf

WPF - How to style the menu control to remove the left margin?


I think this is what you're after (again, got around to it using Expression Blend, but its the most minimalist I could get in terms of what it displays...and it took a lot of playing around with)...you can just drop the following in a blank WPF application as an example:

<Window x:Class="MenuItemWithNoIcon.MainWindow"        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"        Title="MainWindow" Height="350" Width="525">    <Window.Resources>        <SolidColorBrush x:Key="MenuItem.Highlight.Background" Color="#3D26A0DA"/>        <SolidColorBrush x:Key="MenuItem.Highlight.Border" Color="#FF26A0DA"/>        <SolidColorBrush x:Key="Menu.Disabled.Foreground" Color="#FF707070"/>        <SolidColorBrush x:Key="MenuItem.Highlight.Disabled.Background" Color="#0A000000"/>        <SolidColorBrush x:Key="MenuItem.Highlight.Disabled.Border" Color="#21000000"/>        <SolidColorBrush x:Key="MenuItem.Selected.Border" Color="#FF26A0DA"/>        <SolidColorBrush x:Key="MenuItem.Selected.Background" Color="#3D26A0DA"/>        <Geometry x:Key="Checkmark">F1 M 10.0,1.2 L 4.7,9.1 L 4.5,9.1 L 0,5.2 L 1.3,3.5 L 4.3,6.1L 8.3,0 L 10.0,1.2 Z</Geometry>        <SolidColorBrush x:Key="Menu.Static.Foreground" Color="#FF212121"/>        <ControlTemplate x:Key="{ComponentResourceKey ResourceId=SubmenuItemTemplateKey, TypeInTargetAssembly={x:Type MenuItem}}" TargetType="{x:Type MenuItem}">            <Border x:Name="templateRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Height="22" SnapsToDevicePixels="true">                <Grid Margin="0">                    <Grid.ColumnDefinitions>                        <ColumnDefinition Width="*"/>                    </Grid.ColumnDefinitions>                    <ContentPresenter x:Name="menuHeaderContainer" ContentSource="Header" HorizontalAlignment="Stretch" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Stretch"/>                </Grid>            </Border>            <ControlTemplate.Triggers>                <Trigger Property="Icon" Value="{x:Null}"/>                <Trigger Property="IsChecked" Value="True"/>                <Trigger Property="IsHighlighted" Value="True">                    <Setter Property="Background" TargetName="templateRoot" Value="{StaticResource MenuItem.Highlight.Background}"/>                    <Setter Property="BorderBrush" TargetName="templateRoot" Value="{StaticResource MenuItem.Highlight.Border}"/>                </Trigger>                <Trigger Property="IsEnabled" Value="False">                    <Setter Property="TextElement.Foreground" TargetName="templateRoot" Value="{StaticResource Menu.Disabled.Foreground}"/>                </Trigger>                <MultiTrigger>                    <MultiTrigger.Conditions>                        <Condition Property="IsHighlighted" Value="True"/>                        <Condition Property="IsEnabled" Value="False"/>                    </MultiTrigger.Conditions>                    <Setter Property="Background" TargetName="templateRoot" Value="{StaticResource MenuItem.Highlight.Disabled.Background}"/>                    <Setter Property="BorderBrush" TargetName="templateRoot" Value="{StaticResource MenuItem.Highlight.Disabled.Border}"/>                </MultiTrigger>            </ControlTemplate.Triggers>        </ControlTemplate>        <SolidColorBrush x:Key="Menu.Static.Border" Color="#FF999999"/>        <SolidColorBrush x:Key="Menu.Static.Background" Color="#FFF0F0F0"/>        <SolidColorBrush x:Key="Menu.Static.Separator" Color="#FFD7D7D7"/>        <Geometry x:Key="UpArrow">M 0,4 L 3.5,0 L 7,4 Z</Geometry>        <Style x:Key="MenuScrollButton" BasedOn="{x:Null}" TargetType="{x:Type RepeatButton}">            <Setter Property="ClickMode" Value="Hover"/>            <Setter Property="Template">                <Setter.Value>                    <ControlTemplate TargetType="{x:Type RepeatButton}">                        <Border x:Name="templateRoot" BorderBrush="Transparent" BorderThickness="1" Background="Transparent" SnapsToDevicePixels="true">                            <ContentPresenter HorizontalAlignment="Center" Margin="6" VerticalAlignment="Center"/>                        </Border>                    </ControlTemplate>                </Setter.Value>            </Setter>        </Style>        <MenuScrollingVisibilityConverter x:Key="MenuScrollingVisibilityConverter"/>        <Geometry x:Key="DownArrow">M 0,0 L 3.5,4 L 7,0 Z</Geometry>        <Style x:Key="{ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly={x:Type FrameworkElement}}" BasedOn="{x:Null}" TargetType="{x:Type ScrollViewer}">            <Setter Property="HorizontalScrollBarVisibility" Value="Hidden"/>            <Setter Property="VerticalScrollBarVisibility" Value="Auto"/>            <Setter Property="Template">                <Setter.Value>                    <ControlTemplate TargetType="{x:Type ScrollViewer}">                        <Grid SnapsToDevicePixels="true">                            <Grid.ColumnDefinitions>                                <ColumnDefinition Width="*"/>                            </Grid.ColumnDefinitions>                            <Grid.RowDefinitions>                                <RowDefinition Height="Auto"/>                                <RowDefinition Height="*"/>                                <RowDefinition Height="Auto"/>                            </Grid.RowDefinitions>                            <Border Grid.Column="0" Grid.Row="1">                                <ScrollContentPresenter CanContentScroll="{TemplateBinding CanContentScroll}" Margin="{TemplateBinding Padding}"/>                            </Border>                            <RepeatButton Grid.Column="0" CommandTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}" Command="{x:Static ScrollBar.LineUpCommand}" Focusable="false" Grid.Row="0" Style="{StaticResource MenuScrollButton}">                                <RepeatButton.Visibility>                                    <MultiBinding ConverterParameter="0" Converter="{StaticResource MenuScrollingVisibilityConverter}" FallbackValue="Visibility.Collapsed">                                        <Binding Path="ComputedVerticalScrollBarVisibility" RelativeSource="{RelativeSource TemplatedParent}"/>                                        <Binding Path="VerticalOffset" RelativeSource="{RelativeSource TemplatedParent}"/>                                        <Binding Path="ExtentHeight" RelativeSource="{RelativeSource TemplatedParent}"/>                                        <Binding Path="ViewportHeight" RelativeSource="{RelativeSource TemplatedParent}"/>                                    </MultiBinding>                                </RepeatButton.Visibility>                                <Path Data="{StaticResource UpArrow}" Fill="{StaticResource Menu.Static.Foreground}"/>                            </RepeatButton>                            <RepeatButton Grid.Column="0" CommandTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}" Command="{x:Static ScrollBar.LineDownCommand}" Focusable="false" Grid.Row="2" Style="{StaticResource MenuScrollButton}">                                <RepeatButton.Visibility>                                    <MultiBinding ConverterParameter="100" Converter="{StaticResource MenuScrollingVisibilityConverter}" FallbackValue="Visibility.Collapsed">                                        <Binding Path="ComputedVerticalScrollBarVisibility" RelativeSource="{RelativeSource TemplatedParent}"/>                                        <Binding Path="VerticalOffset" RelativeSource="{RelativeSource TemplatedParent}"/>                                        <Binding Path="ExtentHeight" RelativeSource="{RelativeSource TemplatedParent}"/>                                        <Binding Path="ViewportHeight" RelativeSource="{RelativeSource TemplatedParent}"/>                                    </MultiBinding>                                </RepeatButton.Visibility>                                <Path Data="{StaticResource DownArrow}" Fill="{StaticResource Menu.Static.Foreground}"/>                            </RepeatButton>                        </Grid>                    </ControlTemplate>                </Setter.Value>            </Setter>        </Style>        <ControlTemplate x:Key="{ComponentResourceKey ResourceId=TopLevelHeaderTemplateKey, TypeInTargetAssembly={x:Type MenuItem}}" TargetType="{x:Type MenuItem}">            <Border x:Name="templateRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">                <Grid VerticalAlignment="Center">                    <Grid.ColumnDefinitions>                        <ColumnDefinition Width="Auto"/>                        <ColumnDefinition Width="Auto"/>                    </Grid.ColumnDefinitions>                    <Path x:Name="GlyphPanel" Data="{StaticResource Checkmark}" Fill="{TemplateBinding Foreground}" FlowDirection="LeftToRight" Margin="3" Visibility="Collapsed" VerticalAlignment="Center"/>                    <ContentPresenter Grid.Column="1" ContentSource="Header" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>                    <Popup x:Name="PART_Popup" AllowsTransparency="true" Focusable="false" IsOpen="{Binding IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}" PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}" Placement="Bottom" PlacementTarget="{Binding ElementName=templateRoot}">                        <Border x:Name="SubMenuBorder" BorderBrush="{StaticResource Menu.Static.Border}" BorderThickness="1" Background="{StaticResource Menu.Static.Background}" Padding="0">                            <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="0" Width="1"/>                                    <ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Cycle" Grid.IsSharedSizeScope="true" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" KeyboardNavigation.TabNavigation="Cycle"/>                                </Grid>                            </ScrollViewer>                        </Border>                    </Popup>                </Grid>            </Border>            <ControlTemplate.Triggers>                <Trigger Property="IsSuspendingPopupAnimation" Value="true">                    <Setter Property="PopupAnimation" TargetName="PART_Popup" Value="None"/>                </Trigger>                <Trigger Property="Icon" Value="{x:Null}"/>                <Trigger Property="IsChecked" Value="true">                    <Setter Property="Visibility" TargetName="GlyphPanel" Value="Visible"/>                </Trigger>                <Trigger Property="IsHighlighted" Value="True">                    <Setter Property="Background" TargetName="templateRoot" Value="{StaticResource MenuItem.Highlight.Background}"/>                    <Setter Property="BorderBrush" TargetName="templateRoot" Value="{StaticResource MenuItem.Highlight.Border}"/>                </Trigger>                <Trigger Property="IsEnabled" Value="False">                    <Setter Property="TextElement.Foreground" TargetName="templateRoot" Value="{StaticResource Menu.Disabled.Foreground}"/>                    <Setter Property="Fill" TargetName="GlyphPanel" Value="{StaticResource Menu.Disabled.Foreground}"/>                </Trigger>                <Trigger Property="ScrollViewer.CanContentScroll" SourceName="SubMenuScrollViewer" Value="false">                    <Setter Property="Canvas.Top" TargetName="OpaqueRect" Value="{Binding VerticalOffset, ElementName=SubMenuScrollViewer}"/>                    <Setter Property="Canvas.Left" TargetName="OpaqueRect" Value="{Binding HorizontalOffset, ElementName=SubMenuScrollViewer}"/>                </Trigger>            </ControlTemplate.Triggers>        </ControlTemplate>        <ControlTemplate x:Key="{ComponentResourceKey ResourceId=TopLevelItemTemplateKey, TypeInTargetAssembly={x:Type MenuItem}}" TargetType="{x:Type MenuItem}">            <Border x:Name="templateRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" 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}" Fill="{StaticResource Menu.Static.Foreground}" FlowDirection="LeftToRight" Margin="3" Visibility="Collapsed" VerticalAlignment="Center"/>                    <ContentPresenter Grid.Column="1" ContentSource="Header" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>                </Grid>            </Border>            <ControlTemplate.Triggers>                <Trigger Property="Icon" Value="{x:Null}">                    <Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>                </Trigger>                <Trigger Property="IsChecked" Value="true">                    <Setter Property="Visibility" TargetName="GlyphPanel" Value="Visible"/>                    <Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>                </Trigger>                <Trigger Property="IsHighlighted" Value="True">                    <Setter Property="Background" TargetName="templateRoot" Value="{StaticResource MenuItem.Highlight.Background}"/>                    <Setter Property="BorderBrush" TargetName="templateRoot" Value="{StaticResource MenuItem.Highlight.Border}"/>                </Trigger>                <Trigger Property="IsEnabled" Value="False">                    <Setter Property="TextElement.Foreground" TargetName="templateRoot" Value="{StaticResource Menu.Disabled.Foreground}"/>                    <Setter Property="Fill" TargetName="GlyphPanel" Value="{StaticResource Menu.Disabled.Foreground}"/>                </Trigger>                <MultiTrigger>                    <MultiTrigger.Conditions>                        <Condition Property="IsHighlighted" Value="True"/>                        <Condition Property="IsEnabled" Value="False"/>                    </MultiTrigger.Conditions>                    <Setter Property="Background" TargetName="templateRoot" Value="{StaticResource MenuItem.Highlight.Disabled.Background}"/>                    <Setter Property="BorderBrush" TargetName="templateRoot" Value="{StaticResource MenuItem.Highlight.Disabled.Border}"/>                </MultiTrigger>            </ControlTemplate.Triggers>        </ControlTemplate>        <Geometry x:Key="RightArrow">M 0,0 L 4,3.5 L 0,7 Z</Geometry>        <ControlTemplate x:Key="{ComponentResourceKey ResourceId=SubmenuHeaderTemplateKey, TypeInTargetAssembly={x:Type MenuItem}}" TargetType="{x:Type MenuItem}">            <Border x:Name="templateRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Height="22" SnapsToDevicePixels="true">                <Grid Margin="-1">                    <Grid.ColumnDefinitions>                        <ColumnDefinition MinWidth="22" SharedSizeGroup="MenuItemIconColumnGroup" Width="Auto"/>                        <ColumnDefinition Width="13"/>                        <ColumnDefinition Width="*"/>                        <ColumnDefinition Width="30"/>                        <ColumnDefinition SharedSizeGroup="MenuItemIGTColumnGroup" Width="Auto"/>                        <ColumnDefinition Width="20"/>                    </Grid.ColumnDefinitions>                    <ContentPresenter x:Name="Icon" ContentSource="Icon" HorizontalAlignment="Center" Height="16" Margin="3" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center" Width="16"/>                    <Border x:Name="GlyphPanel" BorderBrush="{StaticResource MenuItem.Highlight.Border}" BorderThickness="1" Background="{StaticResource MenuItem.Highlight.Background}" Height="22" Margin="-1,0,0,0" Visibility="Hidden" VerticalAlignment="Center" Width="22">                        <Path x:Name="Glyph" Data="{DynamicResource Checkmark}" Fill="{StaticResource Menu.Static.Foreground}" FlowDirection="LeftToRight" Height="11" Width="9"/>                    </Border>                    <ContentPresenter Grid.Column="2" ContentSource="Header" HorizontalAlignment="Left" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center"/>                    <TextBlock Grid.Column="4" Margin="{TemplateBinding Padding}" Opacity="0.7" Text="{TemplateBinding InputGestureText}" VerticalAlignment="Center"/>                    <Path x:Name="RightArrow" Grid.Column="5" Data="{StaticResource RightArrow}" Fill="{StaticResource Menu.Static.Foreground}" HorizontalAlignment="Left" Margin="10,0,0,0" VerticalAlignment="Center"/>                    <Popup x:Name="PART_Popup" AllowsTransparency="true" Focusable="false" HorizontalOffset="-2" IsOpen="{Binding IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}" PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}" Placement="Right" VerticalOffset="-3">                        <Border x:Name="SubMenuBorder" BorderBrush="{StaticResource Menu.Static.Border}" BorderThickness="1" Background="{StaticResource Menu.Static.Background}" 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="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}" 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>                </Grid>            </Border>            <ControlTemplate.Triggers>                <Trigger Property="IsSuspendingPopupAnimation" Value="true">                    <Setter Property="PopupAnimation" TargetName="PART_Popup" Value="None"/>                </Trigger>                <Trigger Property="Icon" Value="{x:Null}">                    <Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>                </Trigger>                <Trigger Property="IsChecked" Value="True">                    <Setter Property="Visibility" TargetName="GlyphPanel" Value="Visible"/>                    <Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>                </Trigger>                <Trigger Property="IsHighlighted" Value="True">                    <Setter Property="Background" TargetName="templateRoot" Value="Transparent"/>                    <Setter Property="BorderBrush" TargetName="templateRoot" Value="{StaticResource MenuItem.Highlight.Border}"/>                </Trigger>                <Trigger Property="IsEnabled" Value="False">                    <Setter Property="TextElement.Foreground" TargetName="templateRoot" Value="{StaticResource Menu.Disabled.Foreground}"/>                    <Setter Property="Fill" TargetName="Glyph" Value="{StaticResource Menu.Disabled.Foreground}"/>                    <Setter Property="Fill" TargetName="RightArrow" Value="{StaticResource Menu.Disabled.Foreground}"/>                </Trigger>                <Trigger Property="ScrollViewer.CanContentScroll" SourceName="SubMenuScrollViewer" Value="false">                    <Setter Property="Canvas.Top" TargetName="OpaqueRect" Value="{Binding VerticalOffset, ElementName=SubMenuScrollViewer}"/>                    <Setter Property="Canvas.Left" TargetName="OpaqueRect" Value="{Binding HorizontalOffset, ElementName=SubMenuScrollViewer}"/>                </Trigger>            </ControlTemplate.Triggers>        </ControlTemplate>        <Style x:Key="MenuItemStyle1" TargetType="{x:Type MenuItem}">            <Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>            <Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>            <Setter Property="Background" Value="Transparent"/>            <Setter Property="BorderBrush" Value="Transparent"/>            <Setter Property="BorderThickness" Value="1"/>            <Setter Property="ScrollViewer.PanningMode" Value="Both"/>            <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>            <Setter Property="Template" Value="{DynamicResource {ComponentResourceKey ResourceId=SubmenuItemTemplateKey, TypeInTargetAssembly={x:Type MenuItem}}}"/>            <Style.Triggers>                <Trigger Property="Role" Value="TopLevelHeader">                    <Setter Property="Background" Value="Transparent"/>                    <Setter Property="BorderBrush" Value="Transparent"/>                    <Setter Property="Foreground" Value="{StaticResource Menu.Static.Foreground}"/>                    <Setter Property="Template" Value="{DynamicResource {ComponentResourceKey ResourceId=TopLevelHeaderTemplateKey, TypeInTargetAssembly={x:Type MenuItem}}}"/>                    <Setter Property="Padding" Value="6,0"/>                </Trigger>                <Trigger Property="Role" Value="TopLevelItem">                    <Setter Property="Background" Value="{StaticResource Menu.Static.Background}"/>                    <Setter Property="BorderBrush" Value="{StaticResource Menu.Static.Border}"/>                    <Setter Property="Foreground" Value="{StaticResource Menu.Static.Foreground}"/>                    <Setter Property="Template" Value="{DynamicResource {ComponentResourceKey ResourceId=TopLevelItemTemplateKey, TypeInTargetAssembly={x:Type MenuItem}}}"/>                    <Setter Property="Padding" Value="6,0"/>                </Trigger>                <Trigger Property="Role" Value="SubmenuHeader">                    <Setter Property="Template" Value="{DynamicResource {ComponentResourceKey ResourceId=SubmenuHeaderTemplateKey, TypeInTargetAssembly={x:Type MenuItem}}}"/>                </Trigger>            </Style.Triggers>        </Style>    </Window.Resources>    <Grid>        <Menu>            <MenuItem Header="File" Style="{DynamicResource MenuItemStyle1}">                <MenuItem Header="Exit" Style="{DynamicResource MenuItemStyle1}"/>            </MenuItem>        </Menu>    </Grid></Window>


It's not very straight forward, but you need to create a MenuItemStyle, easiest through Expression Blend:

<Menu>    <MenuItem Header="MyMenu" Style="{DynamicResource MenuItemStyle1}">        <MenuItem Header="Options..." />        <MenuItem Header="About" />    </MenuItem></Menu> 

It creates an extremely verbose set of templates and styles, and you need to edit the menu item to remove the fixed width first column of the grid, then in the SubMenuBorder ContentControl template, remove the rectangles which form the background shading. I've attached a sample project with margins removed.Download sample project here.


Two options here:

  1. Short, simple and straight forward. Set ItemsPanelTemplate for MenuItem or ContextMenu, depending what kind of menu you are using (see details).

  2. Radical. Rewrite Menu style from scratch. There are two ready to use styles:

    • XAML-style of Menu from MahApps.Metro (ordinary Menu and ContextMenu)
    • Jeff Wilcox's style which inspired the previous one from MahApps (link)