How to create and use ResourceDictionary of external XAML images - wpf

Question

I would like to use icons from Visual Studio icon set for a WPF app and I would like to do it properly using ResourceDictionaries, but it seems more challenging than I thought.
The example icon is a ViewBox provided in a separate XAML file, it's named home_16x.xaml and the XAML content looks like this:
<Viewbox Width="16" Height="16" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
<Rectangle Width="16" Height="16">
<Rectangle.Fill>
<DrawingBrush>
<DrawingBrush.Drawing>
<DrawingGroup>
<DrawingGroup.Children>
<GeometryDrawing Brush="#00FFFFFF" Geometry="F1M16,16L0,16 0,0 16,0z" />
<GeometryDrawing Brush="#FFF6F6F6" Geometry="F1M7.8786,-0.000199999999999534L-0.000399999999999956,7.8798 -0.000399999999999956,9.4138 0.9996,10.4138 0.9996,15.9998 15.0006,15.9998 15.0006,10.4138 16.0006,9.4138 16.0006,7.8798 8.1206,-0.000199999999999534z" />
<GeometryDrawing Brush="#FFF0EFF1" Geometry="F1M13,14L10,14 10,9 6,9 6,14 3,14 3,7.707 8,2.707 13,7.707z" />
<GeometryDrawing Brush="#FF424242" Geometry="F1M0.6462,8.6461L1.3532,9.3531 2.0002,8.7071 2.0002,15.0001 7.0002,15.0001 7.0002,10.0001 9.0002,10.0001 9.0002,15.0001 14.0002,15.0001 14.0002,8.7071 14.6462,9.3531 15.3532,8.6461 8.0002,1.2931z M3.0002,7.7071L8.0002,2.7071 12.9992,7.7071 12.9992,14.0001 10.0002,14.0001 10.0002,9.0001 6.0002,9.0001 6.0002,14.0001 3.0002,14.0001z" />
</DrawingGroup.Children>
</DrawingGroup>
</DrawingBrush.Drawing>
</DrawingBrush>
</Rectangle.Fill>
</Rectangle>
</Viewbox>
If I use the following on my page then it works, but that's not what I am after. It doesn't seem elegant and I would like to keep the option open for switching ResourceDictionaries (for themes).
<Viewbox Width="400" Height="400">
<Frame Source="\Media\Icons\Home_16x.xaml"/>
</Viewbox>
It also shows the following in design view, which is quite confusing:
I would really like to be able to build a dictionary of the icons, that I could call with something like (or cleaner, if possible):
<Viewbox Width="400" Height="400">
<Frame Content="{StaticResource ResourceKey=Icons.Home}"/>
</Viewbox>
My current Icons ResourceDictionary looks like this:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Viewbox x:Key="Home">
<Viewbox.Resources>
<ResourceDictionary>
<Frame x:Key="Home" Source="\Media\Icons\Home_16x.xaml"/>
</ResourceDictionary>
</Viewbox.Resources>
</Viewbox>
</ResourceDictionary>
I admit I am quite lost. Any help would be much appreciated.

Answer 1

If you use a visualbrush on say a rectangle as fill, that will stretch to whatever size the rectangle is.
Hence you could have a visualbrush in a resource dictionary:
<DrawingBrush x:Key="HomeBrush">
<DrawingBrush.Drawing>
<DrawingGroup>
<DrawingGroup.Children>
<GeometryDrawing Brush="#00FFFFFF" Geometry="F1M16,16L0,16 0,0 16,0z" />
<GeometryDrawing Brush="#FFF6F6F6" Geometry="F1M7.8786,-0.000199999999999534L-0.000399999999999956,7.8798 -0.000399999999999956,9.4138 0.9996,10.4138 0.9996,15.9998 15.0006,15.9998 15.0006,10.4138 16.0006,9.4138 16.0006,7.8798 8.1206,-0.000199999999999534z" />
<GeometryDrawing Brush="#FFF0EFF1" Geometry="F1M13,14L10,14 10,9 6,9 6,14 3,14 3,7.707 8,2.707 13,7.707z" />
<GeometryDrawing Brush="#FF424242" Geometry="F1M0.6462,8.6461L1.3532,9.3531 2.0002,8.7071 2.0002,15.0001 7.0002,15.0001 7.0002,10.0001 9.0002,10.0001 9.0002,15.0001 14.0002,15.0001 14.0002,8.7071 14.6462,9.3531 15.3532,8.6461 8.0002,1.2931z M3.0002,7.7071L8.0002,2.7071 12.9992,7.7071 12.9992,14.0001 10.0002,14.0001 10.0002,9.0001 6.0002,9.0001 6.0002,14.0001 3.0002,14.0001z" />
</DrawingGroup.Children>
</DrawingGroup>
</DrawingBrush.Drawing>
</DrawingBrush>
And use that:
<Rectangle Fill="{StaticResource HomeBrush}" Width="16" Height="16"/>
Or you could let your rectangle fill whatever cell of a grid it's in and omit width and height.
You don't need a viewbox to scale vectors, they can stretch.
You can also use a visualbrush within a path. The path can define one shape with a geometry ( which could be from a resource ) and within that your drawingbrush could put another geometry drawing with a different colour.
An example geometry out a resource file I have:
<Geometry x:Key="BeeIcon">
M15.551045,25.144995L16.748029,25.144995 ....
</Geometry>
I removed a big chunk of the geometry there.
That BeeIcon can then be re-used in different drawinggroups which is useful if you want to construct icons with several parts.
Brushes and colours for them can also be from a resource dictionary so you can switch them out for different themes or branding.