How to set the icon for image contextMenu items

Question

When I click image it displayed the menu but icon's are not displayed. I tried in two ways:

1. One is I resized the icon that's not working
2. Second one is I set the path using icon property that's not working.

What's the way to set the icon for context menu items??

Xaml:

<Image Height="20" Width="20" Source="/CitiCall.WinClient;component/Images/user_icon.png" MouseDown="image1_MouseDown"  Margin="0,0,4,6" HorizontalAlignment="Right"  Name="image1" Stretch="Fill" VerticalAlignment="Top">               
    <Image.ContextMenu>
        <ContextMenu>
            <MenuItem Header="Reset password" Icon="/CitiCall.WinClient;component/Images/reset.png"/>
                <!--<MenuItem.Icon>
                    <Image Source="/CitiCall.WinClient;component/Images/reset.png" ></Image>
                </MenuItem.Icon>
            </MenuItem>-->
            <MenuItem Header="Edit Profile"/>
            <MenuItem Header="Settings"/>
            <MenuItem Header="About us"/>
        </ContextMenu>
    </Image.ContextMenu>
</Image>

Xamal.cs:

private void image1_MouseDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
    if (e.ChangedButton == MouseButton.Left)
    {
        Image image = sender as Image;
        ContextMenu contextMenu = image.ContextMenu;                
        contextMenu.PlacementTarget = image;
        contextMenu.IsOpen = true;
    }
}

Answer 1

Actually it should work if you write :

<MenuItem.Icon>
  <Image Source="Images/reset.png" ></Image>
</MenuItem.Icon>

Just take care of right clicking to the properties of the images in your project, set it as Content, and Copy if newer.

Have a look at : WPF image resources

Regards

Answer 2

This worked for me:

<Button.ContextMenu>
    <ContextMenu>
        <MenuItem Command="{Binding BringToFront}" ToolTip="Bring to front.">
            <MenuItem.Header>
                <StackPanel Orientation="Horizontal">
                    <Image Source="{StaticResource Images.TextEditIcon}" Height="14" Width="14" Margin="-20 0 0 0"/>
                    <TextBlock>Bring to Front</TextBlock>
                </StackPanel>
             </MenuItem.Header>
         </MenuItem>
    </ContextMenu>
</Button.ContextMenu>

For some reason, using <MenuItem Icon="..."> did not work.

And in the resource dictionary:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:presentationOptions="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options">
    <BitmapImage x:Key="Images.TextEditIcon" UriSource="../Images/TextEditIcon.png" presentationOptions:Freeze="True" />
</ResourceDictionary>    

You'll need to include the image in your project, and set the type to "Resource" in properties. You'll also need to include this resource dictionary somewhere. I'm not going to lie - images are a real pain to set up in WPF. But once they are set up, it's very reliable.

If this image does not work, do not bother troubleshooting it directly on the ContextMenu. Instead, try something like this in a simple StackPanel or Grid:

<Image Source="{StaticResource Images.TextEditIcon}" Height="14" Width="14"/>

Once this is displaying, then you can add it into the ContextMenu.

Answer 3

Using c# code behind you can set the icon with a Path syntax using Path Markup Syntax

// paths for each menu item icon ...
string miniPath1 = "M0,0 L8,0 8,1 8,2 0,2 0,1 z";
string miniPath2 = "F1 M 34,17L 43,17L 43,23L 34,23L 34,17 Z M 35,19L 35,22L 42,22L 42,19L 35,19 Z";

MenuItem mi = new MenuItem { Header = "Menu Item Name", Tag = "My Item" };

Brush brush = Brushes.Black;
mi.Items.Add(new MenuItem() { Header = "Item1", Icon = ConvertPathToImage(miniPath1, brush) });
mi.Items.Add(new MenuItem() { Header = "Item2", Icon = ConvertPathToImage(miniPath2, brush) });

ContextMenu cm = new ContextMenu();
cm.Items.Add(mi);

Using a simple conversion:

private Image ConvertPathToImage(string PathPath, Brush brush)
{
    Geometry gp = Geometry.Parse(PathPath);
    GeometryDrawing gd = new GeometryDrawing(brush, new Pen(brush, 1.0), gp);
    DrawingImage di = new DrawingImage { Drawing = gd };
    return new Image() { Source = di };
}