ContextMenu too-wide WPF - wpf

Question

I have built a ContextMenu dynamically using MVVM. The problem is : the content of MenuItems is all in right side ==> too wide ContextMenu. Do you have any ideea which is the problem? Thanks
Here is the code in XAML:
<TreeView.ContextMenu>
<ContextMenu Name="RightClickMenu" ItemsSource="{Binding Path=SelectedItem.MenuItemsList}">
<ContextMenu.ItemTemplate >
<DataTemplate>
<!-- <MenuItem HorizontalAlignment="Left" Header="{Binding Name}" Command="{Binding Command}" -->
<StackPanel Orientation="Horizontal">
<Image Source="{Binding MyIcon}" Width="18" Height="18" SnapsToDevicePixels="True" />
<MenuItem Header="{Binding Name}" Command="{Binding Command}"
CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor,
AncestorType={x:Type TreeView}}, Path=DataContext.SelectedItem}"
/>
</StackPanel>
</DataTemplate>
</ContextMenu.ItemTemplate>
</ContextMenu>
</TreeView.ContextMenu>
It looks like :
I want the ContextMenu to be like this:
The second problem:
Sometimes it works well but sometimes I get these strange things.
------------------------------Solved--------------------------------------------
For Sac1. I have modified your solution by adding x:Shared="False". Check MSDN for x:Shared.
<Style TargetType="MenuItem" x:Shared="False">
<Setter Property="Icon">
<Setter.Value>
<Image Source="{Binding Path=MyIcon}" Height="20" Width="20" >
</Image>
</Setter.Value>
</Setter>
<Setter Property="Header" Value="{Binding Path=Name}" />
<Setter Property="Command" Value="{Binding Command}" />
<Setter Property="CommandParameter" Value="{Binding RelativeSource={RelativeSource FindAncestor,
AncestorType={x:Type TreeView}}, Path=DataContext.SelectedItem}" />
</Style>
For the wrong headers of menu items I had to override the method ToString() in MenuItemViewModel. I don't undestand why I had to override ToString() but it works well now.
public class MenuItemViewModel : BindableBase
{
......
public string Name
{
get
{
return model.Name;
}
set
{
this.model.Name = value;
OnPropertyChanged("Name");
}
}
public override string ToString()
{
return Name;
}
....
}

Answer 1

DataTemplate of MenuItem is not working as expected.
I used Style insted of DataTemplate:
<TreeView.Resources>
<Style TargetType="MenuItem">
<Setter Property="Icon" Value="{Binding MyIcon}" />
<Setter Property="Header" Value="{Binding Name}" />
<Setter Property="Command" Value="{Binding Command}" />
<Setter Property="CommandParameter" Value="{Binding RelativeSource={RelativeSource FindAncestor,
AncestorType={x:Type TreeView}}, Path=DataContext.SelectedItem}" />
</Style>
</TreeView.Resources>
<TreeView.ContextMenu>
<ContextMenu ItemsSource="{Binding Path=SelectedItem.MenuItemsList}" />
</TreeView.ContextMenu>

Answer 2

You should not use a DataTemplate for the ContextMenu. Just use it as provided:
<ContextMenu>
<MenuItem Command="{Binding Path=Command}"
Icon="{Binding Path=MyIcon}"
Header="{Binding Path=Name}"
InputGetstureText="CTRL+O" />
</ContextMenu>

Answer 3

Dont use MenuItem in DataTemplate instead use button with BorderThickness="0" Background="Transparent"