Easily Adding Vector Graphics to your Windows XAML UI

Images vs. Vector Graphics

Nowadays, there are a lot of different device types with extremely varying pixel densities.

When drawing images pixel-perfect they appear large on devices with low pixel densities and small on devices with high pixel densities.

So the solution is either to use the same image in different resolutions and choosing at runtime what actual image to show or to display scaled images. The choice is here between more effort during development/maintenance or to accept blurred images.

An alternative solution is the use of vector graphics. They are indeed resolution independent and are rendered perfectly on the actual device.

Probably vector graphics are not used as frequently as they should, because many feel that it is difficult to integrate vector graphics into normal apps.

Screencast

But actually it is very easy to create vector graphic elements for your XAML UI, as the following 5-minute screencast shows.

Source Code

...
        <Canvas Grid.Row="1" Grid.Column="1" HorizontalAlignment="Center" Height="40" Grid.RowSpan="2" VerticalAlignment="Center" Width="120">
        	<Path Data="M60,40 L0,30 L40,30 L40,20 L80,20 L80,30 L120,30 z" Fill="CadetBlue" Height="20" Stretch="Fill" Canvas.Top="20" UseLayoutRounding="False" Width="120"/>
        	<Path Data="M60,40 L0,30 L40,30 L40,20 L80,20 L80,30 L120,30 z" Fill="White" Height="20" Stretch="Fill" UseLayoutRounding="False" Width="120" RenderTransformOrigin="0.5,0.5">
        		<Path.RenderTransform>
        			<CompositeTransform Rotation="-180"/>
        		</Path.RenderTransform>
        	</Path>
        </Canvas>
...