Menu and submenus using binding with Icon

问题

I using this solution in order to bind my Menu just like at this example and I wonder how can I add icon to my MenuItem.

In my Model I also have property called IsSelected so I try this approach:

<Menu.ItemTemplate>
      <HierarchicalDataTemplate DataType="{x:Type Menu:MenuItemViewModel}" ItemsSource="{Binding Path=MenuItems}">
      <StackPanel Orientation="Horizontal">
         <Image Source="pack://application:,,,/Resources/checked_lightslategray.ico"
                Width="12"
                Height="12"
                Margin="0,0,0,0">
                <Image.Style>
                    <Style TargetType="Image">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding Path=IsSelected}" Value="True">
                                   <Setter Property="Visibility" Value="Visible"/>
                            </DataTrigger>
                            <DataTrigger Binding="{Binding Path=IsSelected}" Value="False">
                                    <Setter Property="Visibility" Value="Collapsed"/>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Image.Style>
            </Image>
        <TextBlock Text="{Binding Description}" Margin="10,0,0,0"/>
        </StackPanel>
    </HierarchicalDataTemplate>
</Menu.ItemTemplate>

But this looks bad as you can see:

Any ideas how to move this image to the icon place on the left side of my MenuItem ?

Edit

This is the style i am using:

<Style TargetType="{x:Type Menu}" x:Key="StandardMenu">
        <Style.Resources>
            <Style x:Key="{x:Static MenuItem.SeparatorStyleKey}" TargetType="Separator">
                <Setter Property="Height" Value="1"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Separator">
                            <Border BorderBrush="{StaticResource MenuSeparatorBorderBrush}" BorderThickness="1" Margin="25,0,0,0"/>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            <Style TargetType="{x:Type MenuItem}">
                <Setter Property="Foreground" Value="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type Menu}}}"/>
                <Setter Property="FontSize" Value="{DynamicResource ApplicationFontSize}"/>
                <Setter Property="Command" Value="{Binding Command}"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type MenuItem}">
                            <!--Border 1-->
                            <Border x:Name="Border" Background="Transparent" BorderBrush="Transparent"  CornerRadius="2"
                                    BorderThickness="1" SnapsToDevicePixels="False">
                                <Grid x:Name="Grid">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition x:Name="Col0" MinWidth="17" Width="Auto" SharedSizeGroup="MenuItemIconColumnGroup"/>
                                        <ColumnDefinition Width="Auto" SharedSizeGroup="MenuTextColumnGroup"/>
                                        <ColumnDefinition Width="Auto" SharedSizeGroup="MenuItemIGTColumnGroup"/>
                                        <ColumnDefinition x:Name="Col3" Width="14"/>
                                    </Grid.ColumnDefinitions>
                                    <ContentPresenter Grid.Column="0" x:Name="Icon" VerticalAlignment="Center" ContentSource="Icon"/>
                                    <ContentPresenter Grid.Column="1" Margin="{TemplateBinding Padding}" x:Name="HeaderHost" RecognizesAccessKey="True" ContentSource="Header" VerticalAlignment="Center"/>
                                    <ContentPresenter Grid.Column="2" Margin="8,1,8,1" x:Name="IGTHost" ContentSource="InputGestureText" VerticalAlignment="Center"/>
                                    <Grid Grid.Column="3" Margin="4,0,6,0" x:Name="ArrowPanel" VerticalAlignment="Center">
                                        <Path x:Name="ArrowPanelPath" HorizontalAlignment="Right" VerticalAlignment="Center" Fill="{TemplateBinding Foreground}" Data="M0,0 L0,8 L4,4 z"/>
                                    </Grid>
                                    <Popup IsOpen="{Binding Path=IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}" 
                                           Placement="Right"
                                           HorizontalOffset="-1" 
                                           x:Name="SubMenuPopup"
                                           Focusable="false"
                                           PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}"
                                           AllowsTransparency="True">
                                        <Grid Margin="0,0,5,5">
                                            <!--Border 2-->
                                            <Border x:Name="SubMenuBorder" CornerRadius="5"
                                                    BorderBrush="{StaticResource MenuSeparatorBorderBrush}"
                                                    BorderThickness="1" 
                                                    Background="{StaticResource SubmenuItemBackground}" 
                                                    SnapsToDevicePixels="True">
                                                <Grid x:Name="SubMenu" Grid.IsSharedSizeScope="True" Margin="2">
                                                    <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Cycle"/>
                                                </Grid>
                                                <Border.Effect>
                                                    <DropShadowEffect ShadowDepth="2" Color="Black"/>
                                                </Border.Effect>
                                            </Border>
                                            <!--Border 3-->
                                            <Border Margin="1,0,0,0"
                                                    x:Name="TransitionBorder"
                                                    Width="0" 
                                                    Height="2" 
                                                    VerticalAlignment="Top"
                                                    HorizontalAlignment="Left" 
                                                    Background="{StaticResource SubmenuItemBackground}"
                                                    SnapsToDevicePixels="False"
                                                    BorderThickness="1" 
                                                    BorderBrush="{StaticResource SubmenuItemBackground}"/>
                                        </Grid>
                                    </Popup>
                                </Grid>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Style.Resources>
        <Setter Property="Background" Value="{StaticResource LightBackground}"/>
        <Setter Property="Foreground" Value="{StaticResource Foreground}"/>
    </Style>

回答1:

on image style trigger, you have set image visibility to collapsed which will release space required for the image and content will move to the left when there is no image visible.

there are two approaches to overcome this.

Option 1: instead of visibility as Collapsed, go for visibility as Hidden.

<Menu.ItemTemplate>
      <HierarchicalDataTemplate DataType="{x:Type Menu:MenuItemViewModel}" ItemsSource="{Binding Path=MenuItems}">
      <StackPanel Orientation="Horizontal">
         <Image Source="pack://application:,,,/Resources/checked_lightslategray.ico"
                Width="12"
                Height="12"
                Margin="0,0,0,0">
                <Image.Style>
                    <Style TargetType="Image">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding Path=IsSelected}" Value="True">
                                   <Setter Property="Visibility" Value="Visible"/>
                            </DataTrigger>
                            <DataTrigger Binding="{Binding Path=IsSelected}" Value="False">
                                    <Setter Property="Visibility" Value="Hidden"/>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Image.Style>
            </Image>
        <TextBlock Text="{Binding Description}" Margin="10,0,0,0"/>
        </StackPanel>
    </HierarchicalDataTemplate>
</Menu.ItemTemplate>

Option 2: - Use Header attribute to define your Description - Use to define your image

<HierarchicalDataTemplate  ItemsSource="{Binding Path=MenuItems}">
                        <MenuItem Header="{Binding Header}" ItemsSource="{Binding Path=MenuItems}" FontWeight="Bold">
                            <MenuItem.Icon>
                                <Image Source="pack://application:,,,/Resources/checked_lightslategray.ico">
                                    <Image.Style>
                                        <Style TargetType="Image">
                                            <Style.Triggers>
                                                <DataTrigger Binding="{Binding Path=IsSelected}" Value="True">
                                                    <Setter Property="Visibility" Value="Visible"/>
                                                </DataTrigger>
                                                <DataTrigger Binding="{Binding Path=IsSelected}" Value="False">
                                                    <Setter Property="Visibility" Value="Collapsed"/>
                                                </DataTrigger>
                                            </Style.Triggers>
                                        </Style>
                                    </Image.Style>
                                </Image>
                            </MenuItem.Icon>
                            <MenuItem.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <VirtualizingStackPanel Orientation="Horizontal"/>
                                </ItemsPanelTemplate>
                            </MenuItem.ItemsPanel>
                        </MenuItem>
                    </HierarchicalDataTemplate>

回答2:

Put this to your Menu.Resources and delete Image from StackPanel:

<Menu.Resources>
    <Image x:Key="img" x:Shared="false" Source="pack://application:,,,/Resources/checked_lightslategray.ico"/>
    <Style TargetType="MenuItem">
        <Style.Triggers>
            <DataTrigger Binding="{Binding IsSelected}" Value="true">
                <Setter Property="Icon" Value="{StaticResource img}"/>
            </DataTrigger>
        </Style.Triggers>
    </Style>
</Menu.Resources>

来源：https://stackoverflow.com/questions/51188825/menu-and-submenus-using-binding-with-icon