Vector icons in WPF menu items?

[David Veeneman]

I'm just getting started with WPF and XAML, and I am trying to create a
traditional menu bar. Everything works until I get to the menu icons. I can
add a bitmap icon to a menu item using this XAML markup:

<MenuItem Header = "Log In">
<MenuItem.Icon>
<Image Source="Resources\LogIn.png" />
</MenuItem.Icon>
</MenuItem>

However, I want to use vector graphics, rather than bitmaps, for menu icons.
So, I try this markup:

<MenuItem Header = "Log In">
<MenuItem.Icon>
<Image Source="Resources\LogIn.xaml" />
</MenuItem.Icon>
</MenuItem>

I'm getting a design-time error saying that "No imaging component suitable
to complete this operation was found".

What's going on, and what do I need to do to be able to use a XAML
vector-graphic file as a menu item icon? Thanks for your help!

David Veeneman
Foresight Systems

 

[Nicholas Paldino [.NET/C# MVP]]

David,

I don't believe you can use an Image tag here, because the Image will
expect something in an image format.

Rather, you could place the markup for the vector right in the Icon
property. Either that, or set it as a static resource somewhere in your
project, and then set the Icon to that static resource.

You might be able to use a Frame as well, like so:

<MenuItem Header = "Log In">
<MenuItem.Icon>
<Frame Source="Resources\LogIn.xaml">
</MenuItem.Icon>
</MenuItem>

 

[David Veeneman]

Thank you, Nicholas! That is exactly what I needed.

 

[David Veeneman]

Here is the solution I finally implemented: I created a Resource Dictionary
that contains the menu item icons I want to use. That gets all of the icons
into one convenient container. Then I referenced the individual icon
resources in my <MenuItem.Icon> markup. Here are the steps involved:

I used Expression Design to create my XAML icons, one icon per layer. I gave
each layer the name of the icon it held. Then I exported the Design file as
XAML, setting the Document Format options to:
-- Export as resource dictionary;
-- Group by layers; and
-- Output as drawing image.

I left the effects options as they were.

In VS 2008, I added the resource dictionary to my WPF project, and
referenced the dictionary in App.xaml:

<Application.Resources>
<ResourceDictionary Source="MenuIcons.xaml" />
</Application.Resources>

With that done, I simply reference the resource in the <MenuItem.Icon>
markup for the window that contains the menu:

<MenuItem Header="Open File">
<MenuItem.Icon>
<Image Source="{StaticResource iconOpenFile}" />
</MenuItem.Icon>
</MenuItem>