What construct to use for a reusable, recolorable icon in XAML?

Question

I am in the process of designing a small WPF based application, and I'd like to define some frequently used vector icons in XAML in a form, that is usable in multiple controls on one view, and recolorable through binding.

For example, I'd like to a small cross icon change from black to gray together with the text in a disabled button, (i.e. being colured with the Foreground brush). The icon is set on the button by (ab)using the Tag property.

Currently, I am using DrawingBrushes, based on a GeometryBrush, that are then used to fill Rectangles, but here I see no way to share colors.

What way is there to achieve this effect (preferably elegent and easy)? =)

Answer 1

You can define the geometry of a path in a style (or alone as a geometry if you want) and reuse it as a staticresource

<Style x:Key="PathStyle" TargetType="{x:Type Path}">
    <Setter Property="Data" Value="M0,0 L100,0 L100,100 L0,100Z" />
</Style>

Then just change the colors of the paths as you need to.

<Path Style="{StaticResource PathStyle}" Stroke="Green" Fill="Blue" HorizontalAlignment="Left" />

<Path Style="{StaticResource PathStyle}" Stroke="Purple" Fill="Orange" HorizontalAlignment="Right" />

Answer 2

You can define a Geometry as a Resource and then use that in a Path that can do whatever you want to set Fill and Stroke colors.

<Geometry x:Key="MagnifyingGlassGeometry">M 64,9C 81.67,9 96,23.3 96,41C 96,58.67 81.67,73 64,73C 46.3,73 32,58.67 32,41C 32,23.3 46.3,9 64,9 Z M 39,66L 6.5,98.5</Geometry>

<Path Data="{StaticResource MagnifyingGlassGeometry}" Fill="{DynamicResource MyBrush}" Stroke="{Binding DataBrush}"/>

Answer 3

In addition to the other answers, it's worth noting that something like Fill="Blue" is shorthand for something similar to this:

...
<Path.Fill>
   <SolidColorBrush>
       <SolidColorBrush.Color>
           <Color>Red</Color>
       </SolidColorBrush.Color>
   </SolidColorBrush>
</Path.Fill>

So you can use resources like this, too:

<Page.Resources>
   <Color x:Key="FillColor">Red</Color>
   <SolidColorBrush x:Key="FillBrush" Color="{StaticResource FillColor}" />
</Page.Resources>

<Path Fill="{StaticResource FillBrush}" ..... />

You can reuse the colour resource in as many brushes as you like, and then all your app's colours are in one place and easily changeable.