XAML projects (Silverlight / WPF) Images or converted XAML Paths

Question

My teammates and I are discussing the relative merits of converting icons our project uses into XAML. Blend has an "import" option that we can use to convert some of the image resources in the project to XAML Path elements automatically.

On the one hand by producing XAML the assembly will remain small. On the other hand there is a simplicity in just having an image reference. Another argument that I consider flawed (correct me if I'm wrong) is that we need to "minify" our XAML including the fewer keystrokes of the <Image Source="..." versus a <Path Data="..." which will include a lot more text.

What are other experiences and is there an approach that is definitely "right."

Answer 1

You can put your XAML drawings into resourcedictionaries and then just reference them. This will produce assemblies that remain small, you get the simplicty of just adding a reference to a drawing and you get completely "minified" XAML. No extra keystrokes required compared to your first approach.

Somewhere in your project you have a resourcedictionary that contains the drawing:

<DrawingImage x:Key="image1">
    <DrawingImage.Drawing>
        <GeometryDrawing>
            <GeometryDrawing.Geometry>
                <GeometryGroup>
                    <EllipseGeometry Center="50,50" RadiusX="45" RadiusY="20" />
                    <EllipseGeometry Center="50,50" RadiusX="20" RadiusY="45" />
                </GeometryGroup>
            </GeometryDrawing.Geometry>
            <GeometryDrawing.Brush>
                <LinearGradientBrush>
                    <GradientStop Offset="0.0" Color="Blue" />
                    <GradientStop Offset="1.0" Color="#CCCCFF" />
                </LinearGradientBrush>
            </GeometryDrawing.Brush>
            <GeometryDrawing.Pen>
                <Pen Thickness="10" Brush="Black" />
            </GeometryDrawing.Pen>
        </GeometryDrawing>
    </DrawingImage.Drawing>
</DrawingImage>

This will not take up more space that a bitmap that you'd add to your assembly as a resource depending on the size and complexity of the bitmaps chances are, that you acutally save space using xaml.

Then in your code you reference this drawing just you would refernce your bitmap. There is no difference:

<Image Source="{StaticResource image1}" />

You can use Microsoft Expression Design to automatically vectorize your bitmaps ("Object->Image->Autotrace Bitmap") and export them as XAML drawings. It will create a DrawingBrush though. But you can safely replace it with DrawingImage.