In Silverlight, what is the correct way to use XAML clipart?

Question

Say I've built some clipart for my Silverlight application in XAML, or downloaded it from http://www.xamalot.com, what is the best way to use it in my app?

Is it best to create a user-control for each piece of art? Or is there a better way that I can reference it from a resource dictionary?

Update:

The answers provided are pretty detailed, and seem to be hinting at using this for a much larger purpose than I imagined. I really was just wanting to know the best way of consuming XAML clipart for use as (say) a button on a toolbar.

Answer 1

There is a better way.

You would have an individual file for each peice of clip art but not the wrapper that the site uses, a Canvas instance directly in a resource dictionary not he best way forward. We'll start with a ResourceDictionary but make it look something like this:-

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:YourApplication">
    <ControlTemplate TargetType="local:XamlImage" x:Key="SomeImage">
        <Viewbox>
            <Canvas> <!-- this the toplevel canvas from the site or your design -->
            </Canvas>
        </Viewbox>
    </ControlTemplate>
</ResourceDictionary>

This does two things, first it uses a ControlTemplate to contain the image, this is a more efficient form of storage when an image may be used multiple times such as when the image is being used as an icon.

Secondly it uses a Viewbox which delivers on the promise of vector based graphics, it allows the image to be scaled to a specified size.

You need to add to your project a new Templated Custom Control and call it XamlImage. You don't need to do anything to it, it just needs to exist.

For the time being lets just add this resource dictionary to the App.Xaml (thats not likely where it will remain).

Now you can place this image in a page using:-

<local:XamlImage Template="{StaticResource contactnew}"  />

Now there are several ways forward depending on your real intent and volumes, the scenarios are to varied for me to comment exhaustively. So taking the two extremes...

If you have just a few images you would like to pick from then you could simply create more files and add them to the MergedDictionaries of the app.xaml. However the big down side is that all those image Xamls are parsed and loaded at application startup which may not be desirable.

On the other hand have you may have a large library of categorised Xaml clipart. In which case you will want to place them in a folder structure and include a standard sized thumbnail png for each. A Xml file to act as a catalog and then on demand load the Xaml files as needed. In this case you can ditch the ResourceDictionary from the files and have the ControlTemplate as root element, use XamlReader to load the template then cache the template in your own dictionary (probably as part of a catalog implementation).