WPF: how to add image/icon to my Menu with condition - wpf

Question

This is my Style:
<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.Triggers>
<DataTrigger Binding="{Binding IsSelected}" Value="true">
// Here i want to see my icon/image
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Style.Resources>
<Setter Property="Background" Value="{StaticResource LightBackground}"/>
<Setter Property="Foreground" Value="{StaticResource Foreground}"/>
</Style>
My View model has this Property called IsSelected and when this bool value is true i want to see my image from my Resources folder.
So i know my trigger should be something like that or similar:
<DataTrigger Binding="{Binding IsSelected}" Value="true">
// Here i want to see my icon/image
</DataTrigger>
But where i need to add this image insode my Style ?
update
This is my Menu:
<Menu Name="menuInterfaces" ItemsSource="{Binding MenuItems}" Margin="0,8,0,0" Style="{StaticResource StandardMenu}">
<Menu.ItemTemplate>
<HierarchicalDataTemplate DataType="{x:Type Menu:MenuItemViewModel}" ItemsSource="{Binding Path=MenuItems}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{Binding Width}"/>
<ColumnDefinition Width="{Binding Width}"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="pack://application:,,,/Resources/checked_lightslategray.ico"
Width="12"
Height="12"
Grid.Column="0"
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}"
Grid.Column="2"
Margin="0,0,0,0"/>
</Grid>
</HierarchicalDataTemplate>
</Menu.ItemTemplate>
</Menu>
Result:
enter image description here

Answer 1

You haven't specified where the image is supposed to go so I'll assume it's meant to go in the left-most column of your grid. You achieve this by styling the image and adding your DataTrigger to that instead:
<Style x:Key="MenuImageStyle" TargetType="{x:Type Image}">
<Setter Property="Source" Value="check.png" /> <!--Image filename-->
<Setter Property="Visibility" Value="Hidden" /> <!--Default value-->
<Style.Triggers>
<DataTrigger Binding="{Binding IsSelected}" Value="true">
<Setter Property="Visibility" Value="Visible" />
</DataTrigger>
</Style.Triggers>
</Style>
And then you just add the image to your grid elements:
<Image Grid.Column="0" Style="{StaticResource MenuImageStyle}" />