WPF - MenuItem Icon bound to StaticResource shows as truncated text "pac.."

Question

I'm just starting out learning WPF. Steep learning curve.

I have an icon set in App.xaml:

<Application.Resources>
    <BitmapImage x:Key="Cog" UriSource="pack://application:,,,/Assets/Icons/cog.png"></BitmapImage>
</Application.Resources>

I'm trying to set the icon of a menu item to this with:

<MenuItem Header="_Tools">
    <MenuItem  Header="_Settings" Click="MenuItem_Click" Icon="{StaticResource Cog}"></MenuItem>
</MenuItem>

I get this:

Could anyone advise, please?

Answer 1

Just define an Image as resource (instead of BitmapImage). In case you want to reference the Image multiple times, set x:Shared to false:

<Application.Resources>
    <Image x:Key="Cog" 
           x:Shared="False"
           Source="pack://application:,,,/Assets/Icons/cog.png" />
</Application.Resources>

<MenuItem Header="_Tools">
    <MenuItem Icon="{StaticResource Cog}"></MenuItem>
</MenuItem>

Answer 2

Figured it:

<MenuItem Header="_Tools">
    <MenuItem  Header="_Settings" Click="MenuItem_Click" ToolTip="Show Settings Menu">
        <MenuItem.Icon>                        
            <Image Source="{StaticResource Cog}"></Image>
        </MenuItem.Icon>
    </MenuItem>
</MenuItem>