ContextMenu Icons not displaying

I have some images that I use as icons for ContextMenu Items:

<UserControl.Resources>
    <Image x:Key="DeleteIco" Source="pack://application:,,,/MyProject.myControl;component/Resources/Delete.ico" Width="16" Height="16"/>
    ...
    <ContextMenu x:Key="MyMenu1">
        <MenuItem Header="Delete" Icon="{StaticResource DeleteIco}"/>
    </ContextMenu>

    <ContextMenu x:Key="MyMenu2">
        <MenuItem Header="Delete me" Icon="{StaticResource DeleteIco}"/>
    </ContextMenu>
<UserControl.Resources>

Sometimes the first menu miss the icon, sometimes the second...开发者_开发技巧 why? I don't do anything on the icons in the code.

You have created an Image control, and tried to put it twice in the visual tree. Since all controls can only have one parent your Image got disconnected. Thus using it a second time, the first will be disconnected, resulting in your missing icon.

You can resolve this, by not adding the Image, but the ImageSource instead to your resources:

<BitmapImage x:Key="DeleteIco" UriSource="pack://application:,,,/MyProject.myControl;component/Resources/Delete.ico" />

Your menu has to change a bit for it to work though:

<ContextMenu x:Key="MyMenu1">
    <MenuItem Header="Delete">
         <MenuItem.Icon>
              <Image Source="{StaticResource DeleteIco}" Width="16" Height="16"/>
         </MenuItem.Icon>
    </MenuItem>
</ContextMenu>

<ContextMenu x:Key="MyMenu2">
    <MenuItem Header="Delete me">
         <MenuItem.Icon>
              <Image Source="{StaticResource DeleteIco}" Width="16" Height="16"/>
         </MenuItem.Icon>
    </MenuItem>
</ContextMenu>

Update:

You can also use styles to set some basic properties of the Image for you

<Style TargetType="Image">
    <Setter Property="Width" Value="16"/>
    <Setter Property="Width" Value="16"/>
</Style>

Or use a Style for MenuItem to set the Icon each time.

<Style TargetType="MenuItem" x:Key="DeleteMenuIcon">
    <Setter Property="Icon">
        <Setter.Value>
             <Image Source="{StaticResource DeleteIco}" Width="16" Height="16"/>
        </Setter.Value>
    </Setter>
</Style>

And the MenuItem:

<MenuItem Header="Delete me" Style="{StaticResource DeleteMenuIcon}" />

I had the same problem, but the marked solution didn't solve it for me. What did solve it was setting x:Shared="False" on the Image resource:

<Image x:Key="DeleteIco" 
       x:Shared="False"
       Source="pack://application:,,,/MyProject.myControl;component/Resources/Delete.ico"
       Width="16" Height="16"/>

As @Arcturus correctly mentioned, you're currently setting the same image control as a child for multiple controls, which causes it to be detached from the previous control each time, and then only be set for the last control. Setting x:Shared="False" will cause a new Image control to be created each time the resource is requested, thus solving the problem.

One thing to note is that the x:Shared attribute cannot be set everywhere, so make sure you use it where it's actually applicable (from the above article):

In WPF, x:Shared is only valid under the following conditions:

• The ResourceDictionary that contains the items with x:Shared must be compiled. The ResourceDictionary cannot be within loose XAML or used for themes.

• The ResourceDictionary that contains the items must not be nested within another ResourceDictionary. For example, you cannot use x:Shared for items in a ResourceDictionary that is within a Style that is already a ResourceDictionary item.