none
Remove icon space in MenuItem

    Question

  • Hello!

    Input

    <Menu>
      <MenuItem Header="Menu">
        <MenuItem>
          <MenuItem.Template>
            <ControlTemplate>
              <Label>Some text</Label>
            </ControlTemplate>
          </MenuItem.Template>
        </MenuItem>
      </MenuItem>
    </Menu>

    The layout doesn't remove vertical line separates icon and menu header.

    Can't figure out how it may be done...

    Sunday, December 02, 2012 1:58 PM

Answers

  • Hi Alexey Shirshov,

    You could try to use padding property:

    <ControlTemplate>
            <TextBlock Padding="0,-3,0,0">Some text</TextBlock>
    </ControlTemplate>

    Best regards,


    Sheldon _Xiao[MSFT]
    MSDN Community Support | Feedback to us
    Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Monday, December 03, 2012 6:01 AM
    Moderator

All replies

  • Refer following link

    http://stackoverflow.com/questions/2979127/wpf-how-to-style-the-menu-control-to-remove-the-left-margin


    Gaurav Khanna | Microsoft VB.NET MVP | Microsoft Community Contributor

    Sunday, December 02, 2012 2:15 PM
  • Thank you Khanna, but can you provide clear example? I already examine the link above as dozen other solutions with no luck.
    Sunday, December 02, 2012 2:23 PM
  • Following code should work

    <Window x:Class="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>
            <Style x:Key="{x:Static MenuItem.SeparatorStyleKey}" TargetType="{x:Type Separator}">
                <Setter Property="Height" Value="1"/>
                <Setter Property="Margin" Value="0,4,0,4"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Separator}">
                            <Border BorderBrush="#888888" BorderThickness="1"/>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
    
            <!-- TopLevelHeader -->
    
            <ControlTemplate x:Key="{x:Static MenuItem.TopLevelHeaderTemplateKey}" TargetType="{x:Type MenuItem}">
                <Border Name="Border" >
                    <Grid>
                        <ContentPresenter 
            Margin="6,3,6,3" 
            ContentSource="Header"
            RecognizesAccessKey="True" />
                        <Popup 
            Name="Popup"
            Placement="Bottom"
            IsOpen="{TemplateBinding IsSubmenuOpen}"
            AllowsTransparency="True" 
            Focusable="False"
            PopupAnimation="Fade">
                            <Border 
              Name="SubmenuBorder"
              SnapsToDevicePixels="True"
              Background="#FFFFFF"
              BorderBrush="#888888"
              BorderThickness="1" >
                                <StackPanel  
                IsItemsHost="True" 
                KeyboardNavigation.DirectionalNavigation="Cycle" />
                            </Border>
                        </Popup>
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsSuspendingPopupAnimation" Value="true">
                        <Setter TargetName="Popup" Property="PopupAnimation" Value="None"/>
                    </Trigger>
                    <Trigger Property="IsHighlighted" Value="true">
                        <Setter TargetName="Border" Property="Background" Value="#C0C0C0"/>
                        <Setter TargetName="Border" Property="BorderBrush" Value="Transparent"/>
                    </Trigger>
                    <Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="True">
                        <Setter TargetName="SubmenuBorder" Property="CornerRadius" Value="0,0,4,4"/>
                        <Setter TargetName="SubmenuBorder" Property="Padding" Value="0,0,0,3"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Foreground" Value="#888888"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
    
            <!-- TopLevelItem -->
    
            <ControlTemplate 
      x:Key="{x:Static MenuItem.TopLevelItemTemplateKey}" 
      TargetType="{x:Type MenuItem}">
                <Border Name="Border" >
                    <Grid>
                        <ContentPresenter 
            Margin="6,3,6,3" 
            ContentSource="Header"
            RecognizesAccessKey="True" />
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsHighlighted" Value="true">
                        <Setter TargetName="Border" Property="Background" Value="#C0C0C0"/>
                        <Setter TargetName="Border" Property="BorderBrush" Value="Transparent"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Foreground" Value="#888888"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
    
            <!-- 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" 
            Visibility="Collapsed"
            Margin="6,0,6,0" 
            Background="#C0C0C0"
            BorderThickness="1"
            BorderBrush="#404040">
                            <Path 
              Name="CheckMark"
              Width="7" Height="7" 
              Visibility="Hidden" 
              SnapsToDevicePixels="False" 
              Stroke="#404040"
              StrokeThickness="2"
              Data="M 0 0 L 7 7 M 0 7 L 7 0" />
                        </Border>
                        <ContentPresenter 
            Name="HeaderHost"
            Grid.Column="1"
            ContentSource="Header"
            RecognizesAccessKey="True"/>
                        <TextBlock x:Name="InputGestureText"
            Grid.Column="2"
            Text="{TemplateBinding InputGestureText}"
            Margin="5,2,0,2"
            DockPanel.Dock="Right" />
                    </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="#DDDDDD"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Foreground" Value="#888888"/>
                    </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"
            Text="{TemplateBinding InputGestureText}"
            Margin="5,2,2,2"
            DockPanel.Dock="Right"/>
                        <Path 
            Grid.Column="3"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Data="M 0 0 L 0 7 L 4 3.5 Z" 
            Fill="#404040" />
                        <Popup 
            Name="Popup"
            Placement="Right"
            HorizontalOffset="-4" 
            IsOpen="{TemplateBinding IsSubmenuOpen}"
            AllowsTransparency="True" 
            Focusable="False"
            PopupAnimation="Fade">
                            <Border 
              Name="SubmenuBorder"
              SnapsToDevicePixels="True"
              Background="#FFFFFF"
              BorderBrush="#888888"
              BorderThickness="1" >
                                <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="#DDDDDD"/>
                    </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="#888888"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
    
            <!-- MenuItem Style -->
    
            <Style x:Key="{x:Type MenuItem}" TargetType="{x:Type MenuItem}">
                <Setter Property="OverridesDefaultStyle" Value="True"/>
                <Style.Triggers>
                    <Trigger Property="Role" Value="TopLevelHeader">
                        <Setter Property="Template" Value="{StaticResource {x:Static MenuItem.TopLevelHeaderTemplateKey}}"/>
                        <Setter Property="Grid.IsSharedSizeScope" Value="true"/>
                    </Trigger>
                    <Trigger Property="Role" Value="TopLevelItem">
                        <Setter Property="Template" Value="{StaticResource {x:Static MenuItem.TopLevelItemTemplateKey}}"/>
                    </Trigger>
                    <Trigger Property="Role" Value="SubmenuHeader">
                        <Setter Property="Template" Value="{StaticResource {x:Static MenuItem.SubmenuHeaderTemplateKey}}"/>
                    </Trigger>
                    <Trigger Property="Role" Value="SubmenuItem">
                        <Setter Property="Template" Value="{StaticResource {x:Static MenuItem.SubmenuItemTemplateKey}}"/>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Window.Resources>
        <Grid>
            <Menu>
                <Menu.Items>
                    <MenuItem Header="Title 1">
                        <MenuItem Header="Item 1"/>
                        <MenuItem Header="Item 2"/>
                        <MenuItem Header="Item 3"/>
                    </MenuItem>
                </Menu.Items>
            </Menu>
        </Grid>
    </Window>
    


    Gaurav Khanna | Microsoft VB.NET MVP | Microsoft Community Contributor

    Sunday, December 02, 2012 6:27 PM
  • Khanna, thank you again and very sorry. I don't want to even copy/paste this pile of code, I'm sure it doesn't work.

    It don't want to override the whole menu, I just want to remove vertial line in MenuItem. I don't believe my wish requires 250+ lines of code.

    Did you try it?

    Sunday, December 02, 2012 8:27 PM
  • Hi Alexey Shirshov,

    You could try to use padding property:

    <ControlTemplate>
            <TextBlock Padding="0,-3,0,0">Some text</TextBlock>
    </ControlTemplate>

    Best regards,


    Sheldon _Xiao[MSFT]
    MSDN Community Support | Feedback to us
    Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Monday, December 03, 2012 6:01 AM
    Moderator
  • Hi Alexey Shirshov,
     
    I am marking your issue as "Answered", if you have new findings about your issue, please let me know.


    Best regards,


    Sheldon _Xiao
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Monday, December 24, 2012 10:47 AM
    Moderator