Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

System.Windows.Controls.MenuItem without icon area

Whenever I try to play with the look of WPF menu item, I get a wast opportunities to customize the header, which is basically the text of an item.

What I need, is to have a black menu, with white text and no "icon area".

||Some text http://img848.imageshack.us/img848/7622/iconarea.png

How can I remove the icon area of the menu item?

Thanks.

like image 830
Maxim V. Pavlov Avatar asked Mar 11 '11 18:03

Maxim V. Pavlov


2 Answers

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>
like image 122
Nitesh Avatar answered Sep 29 '22 07:09

Nitesh


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>
like image 26
CodeNaked Avatar answered Sep 29 '22 06:09

CodeNaked