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?

Icon size is fixed in the default style. You can override the style and change size. See here for details https://stackoverflow.com/questions/15725729/wpf-menuitem-icon-dimensions — Serg, Jun 19 '22 at 09:59
No - this wasn't it. The icon wasn't showing at all - this is about sizing the icon. — stigzler, Jun 19 '22 at 11:28

BionicCode · Accepted Answer · 2022-06-19T14:55:01.990

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>

edited Jun 19 '22 at 14:55

answered Jun 19 '22 at 11:32

BionicCode

1
4
28
44

Hey thanks - useful tip. It's proving quite painful learning WPF, despite having watched loads of tutorials! It's very idiosyncratic – stigzler Jun 19 '22 at 13:03
1

Yes, it can take a while. Maybe you need a different approach to learning? Watching tutorials alone is wasted time. And quality is often subpar. Books are usually more carefully crafted. You must read or watch and immediately try it out. I personally like to start with a problem first and then dive into the theory required to solve it. Fore example, find an easy project like a simple calculator. Solve problem by problem. Reading a ton of books beforehand is useless. You need to really understand the problem first. Then read a book that explains how to solve it. It will become easier soon. – BionicCode Jun 19 '22 at 13:53
Hmmm - I'm getting "UriSource was not found in type 'Image' at compile time – stigzler Jun 19 '22 at 14:04
Try to form the pack Uri following this pattern: – BionicCode Jun 19 '22 at 14:30
`pack://application:,,,/[project_name];component/Assets/Icons/cog.png`. – BionicCode Jun 19 '22 at 14:30
Ah no - the issue is the `UriSource` Element itself - the error is stating this is not an Element of the Image Type – stigzler Jun 19 '22 at 14:52
Oh, I see. I have just modified your original BitmapSource element and didn't pay attention to the UriSource property. Image does not have such a property. instead it is named `Source`. I have fixed the example. Sorry for wasting your time. – BionicCode Jun 19 '22 at 14:55
Perfect. Marked as best answer as removes unnecessary xaml in form code from my answer. Thanks again. – stigzler Jun 19 '22 at 15:18

score 0 · Answer 2 · answered Jun 19 '22 at 11:30

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>

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

2 Answers2