Converting ICONs in WPF to drawings - wpf

Question

I have a GUI that uses a treeview which renders data objects into rows, including icons to denote object type etc for each row. Im noticing that the addition of the icon files into each row slows down the load and render a lot so Im toying with the idea of rewriting the icons as drawings. Ive done one proof of concept and mimicked an icon with the following
<Border Width="15" Height="15" BorderThickness="0" CornerRadius="4,4,4,4" Background="#22bb22" VerticalAlignment="Center">
<Path StrokeThickness="1.5" Stroke="#FFFFFFFF" Data="M 2,4 C 2,4 10,4 9,12 M 2,7 C 2,7 7,7 6,12 M 2,10.5 L 4,10.5"/>
</Border>
However I can't see how to include this as a static resource in my XAML. I want to load this drawing once and to re-use it throughout the application without having to redraw each time. Ive done something similar with images, creating a resource dictionary, then having a StaticResourceExtension class to look up via a key in that dictionary to find the image in the cache, and bind that to the source of the image tag. eg
<Image Source="{y:ImageStaticResource {Binding IconString}}" Margin="0,0,0,0"></Image>
ImageStaticResource is my custom class, and the IconString property of the datacontext is the key that looks up in the dictionary, which returns a string of the location of the image. This works and works very well. But I want to do something similar with these drawings but cant quite figure out how. Ive created a new Static Resource extension that does exactly the same but loads a different resource dictionary, the first entry of which is as follows
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Border x:Key="Default" Width="15" Height="15" BorderThickness="0"></Border>
<Border x:Key="..\Resources\Images\AccountOnly.ico" Width="15" Height="15" BorderThickness="0" CornerRadius="4,4,4,4" Background="#22bb22" VerticalAlignment="Center">
<Path StrokeThickness="1.5" Stroke="#FFFFFFFF" Data="M 2,4 C 2,4 10,4 9,12 M 2,7 C 2,7 7,7 6,12 M 2,10.5 L 4,10.5"/>
</Border>
</ResourceDictionary>
So I am hoping to look up this bordered drawing by key (as all icons can be represented by a border surrounding a drawing but cannot figure out what to do. Can anyone offer suggestions?

Answer 1

You could achieve the same visual result by filling a Rectangle control with a DrawingBrush that is defined as resource:
<Window.Resources>
<DrawingBrush x:Key="SomeIcon" Stretch="None">
<DrawingBrush.Drawing>
<DrawingGroup>
<GeometryDrawing Brush="#22bb22">
<GeometryDrawing.Geometry>
<RectangleGeometry Rect="0,0,15,15" RadiusX="4" RadiusY="4"/>
</GeometryDrawing.Geometry>
</GeometryDrawing>
<GeometryDrawing Geometry="M 2,4 C 2,4 10,4 9,12 M 2,7 C 2,7 7,7 6,12 M 2,10.5 L 4,10.5">
<GeometryDrawing.Pen>
<Pen Brush="#FFFFFFFF" Thickness="1.5"/>
</GeometryDrawing.Pen>
</GeometryDrawing>
</DrawingGroup>
</DrawingBrush.Drawing>
</DrawingBrush>
</Window.Resources>
...
<Rectangle Width="15" Height="15" Fill="{StaticResource SomeIcon}"/>

Answer 2

To "place" your Border that is in Resources somewhere in the visual tree....use the ContentControl, or ContentPresenter...and reference your keyed resource.
<ContentControl Content="{StaticResource Default}"/>
or
<ContentControl Content="{StaticResource ..\Resources\Images\AccountOnly.ico}"/>
(note the key name you have used on your second Border is a little unconventional)
However, you'll run into a problem doing that once you try and use the Border more than once i.e. the "specified element is already the logical child of another element".
You can mark the Resource with x:Shared="False", so that a new instance is created for each reference...but then you might be back to square one i.e. inefficient rendering.
You could alternatively consider creating your own FrameworkElement derived class tailored specifically to do the minimum required to render your "icon", and optimize any shared data.
Try and avoid any heavier-weight "Control" derived classes if possible if you don't need the flexibility of templates.