How to reuse icons (xaml-paths) in a large project?

Question

I am part of the development of a larger-scale Silverlight 4 project, where we will have a set of symbols that should be used across different parts of the GUI (see the example below).

These icons are made from multiple paths directly in Blend, and will be used, either singly or as different visual states in usercontrols (with the same icon used in more than one context). In order to facilitate changing the design of a single icon, and having it propagate throughout the application, what is the best way to store these?

I have tried creating styles from them (right click -> edit style..), but this only allows me to create an empty style, without any path data. manually putting the xaml code for the grid containing the paths into a dictionary hasn't helped either, what am I missing?

How do I save the path and style (colour, stroke, fill, etc) information in an easy way, preferably in a resource dictionary, so I can easily reuse them in usercontrols and elsewhere, while maintaining the easy updating?

Example of the icons I'm trying to reuse:

Killerdiller

Answer 1

<Style x:Key="MyIcon" TargetType="ContentControl">
        <Setter Property="ContentTemplate">
            <Setter.Value>
                <DataTemplate>
                    <Path Stretch="Fill" Fill="Red" Data="F1 M 24,13C 27.1521,13 29.9945,14.3258 32,16.4501L 32,11L 35,14L 35,22L 27,22L 24,19L 29.5903,19C 28.217,17.4656 26.2212,16.5 24,16.5C 20.1969,16.5 17.055,19.3306 16.5661,23L 13.0448,23C 13.5501,17.3935 18.262,13 24,13 Z M 24,31.5C 27.8031,31.5 30.945,28.6694 31.4339,25L 34.9552,25C 34.4499,30.6065 29.738,35 24,35C 20.8479,35 18.0055,33.6742 16,31.5499L 16,37L 13,34L 13,26L 21,26L 24,29L 18.4097,29C 19.783,30.5344 21.7787,31.5 24,31.5 Z "/>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>

And then use style with contentcontrol type (or derivates):

<ContentControl Style="{StaticResource MyIcon}" Width="20" Height="20" Grid.Row="0"/>

All styles can be inside some resource dictionary: This is quite informative article: http://blogs.infosupport.com/tips-for-effective-usage-of-resource-dictionaries-in-silverlight-and-wpf/

Isometric

This answer is better, I just have a habit of using buttons for things like such to give user interaction later. ContentControl is your friend. – Rebeccarebecka

I've had problems with this approach before: specifically Blend doesn't seem to want to load the path data correctly. Unfortunately I don't have a better solution. – Windpollinated