How to create vector images for WPF

Question

I want to use vector images in my WPF application (for buttons and menus). How can I do it? What tools should be used? Can anyone show my complete example?

Answer 1

XAML Vector Image Tools

Probably the best XAML vector imaging application is Microsoft Expression Design. Its a free tool that can be downloaded from https://www.microsoft.com/en-gb/download/details.aspx?id=36180

When you installed Expression Design, launch it and select Edit → Options → Clipboards (XAML). Change the clipboard format to the XAML WPF resource dictionary . Also change Group By to Document (otherwise each layer will be an image).

Edit the image in Expression Design. When you're done, select everything and open the Modify menu, and then Copy XAML . Paste this into the appropriate XAML file. In the example below you will see how it should look. It should be noted that you need to change the DrawingImage tag to DrawingBrush .

When you draw an image, set the document size to the size that is required in your WPF application (for example, 32x32 pixels). It is not necessary, but to facilitate the work. Before you copy the image to XAML, you probably want to make a transparent rectangle with the same size as the document (otherwise the fields may be wrong). Or you can add this manually to the children of the drawing group:

<GeometryDrawing Brush="#00FFFFFF" Geometry="M 0,0L 32,0L 32,32L 0,32L 0,0 Z " /> 

If you are using Inkscape

Inkscape supports the creation of XAML files. However - this is probably not the format you want! WPF has two different ways to process graphics in XAML - shapes and geometry. You can find more information about this here: http://www.intertech.com/Blog/WPF-Shapes-vs-WPF-Geometries/ .

But in short forms there is support for inputs, while geometry is just a clean drawing and therefore lighter.

Inkscape generates files in the form format, which is good for some cases, but not for images that should be used in buttons and the like. So you want to get images in Expression Design. You can do this by saving the image as a PDF file, change the file extension to AI , and then in Expression Design use File , Import Adobe Illustrator File . Using EPS is another option.

Most things can be imported into Expression Design. But, for example, it can be some problems with borders. When you have what you want for Expression Design, it's probably best to do all the work there. If necessary, you can export your images to SVG, which can be used in Inkscape, which usually works without problems.

Example

When you created the XAML code for the image, it is pretty straight forward. Below is an example where a vector image is used in a menu and two buttons.

If you want to draw a very thin line (1 pixel), you can add RenderOptions.EdgeMode="Aliased" and SnapsToDevicePixels="True" to the attributes of the control that draws the image.

Another thing to keep in mind is what you need to do when the button is disabled. In the example below, the image looks the same regardless of whether the button is on or not (this is also true for regular bitmaps). Changing the opacity to 50% is one approach that looks quite normal. Converting it to gray is more difficult, but there are solutions for this.

 <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" x:Class="VectorGraphicsDemo.MainWindow" Title="MainWindow" Height="350" Width="616"> <Window.Resources> <!-- Note: When Expression Designed generated the code it was generated as DrawingBrush. Remember to change this to DrawingImage. --> <DrawingImage x:Key="TestImage"> <DrawingImage.Drawing> <DrawingGroup> <GeometryDrawing Brush="#00FFFFFF" Geometry="M 0,0L 32,0L 32,32L 0,32L 0,0 Z " /> <GeometryDrawing Brush="#FFFF0000" Geometry="F1 M 6.25,3.97918L 23.125,3.97918L 23.125,16.1458L 6.25,16.1458L 6.25,3.97918 Z "> <GeometryDrawing.Pen> <Pen LineJoin="Round" Brush="#FF000000" /> </GeometryDrawing.Pen> </GeometryDrawing> <GeometryDrawing Brush="#FF00C800" Geometry="F1 M 21.8542,11.0625C 26.399,11.0625 30.0833,14.7468 30.0833,19.2917C 30.0833,23.8365 26.399,27.5208 21.8542,27.5208C 17.3093,27.5208 13.625,23.8365 13.625,19.2917C 13.625,14.7468 17.3093,11.0625 21.8542,11.0625 Z "> <GeometryDrawing.Pen> <Pen LineJoin="Round" Brush="#FF000000" /> </GeometryDrawing.Pen> </GeometryDrawing> <GeometryDrawing Brush="#FFFFFF00" Geometry="F1 M 16.8731,14.9035L 11.9668,16.2498L 8.58953,12.5761L 8.25831,17.6042L 3.62852,19.7405L 8.33013,21.5017L 8.84603,26.4958L 12.083,22.5562L 17.0316,23.5064L 14.3306,19.3103L 16.8731,14.9035 Z "> <GeometryDrawing.Pen> <Pen LineJoin="Round" Brush="#FF000000" /> </GeometryDrawing.Pen> </GeometryDrawing> </DrawingGroup> </DrawingImage.Drawing> </DrawingImage> <DrawingImage x:Key="TestThinLineImage"> <DrawingImage.Drawing> <DrawingGroup> <GeometryDrawing Brush="#00FFFFFF" Geometry="M 0,0L 32,0L 32,32L 0,32L 0,0 Z " /> <GeometryDrawing Geometry="F1 M 2,2L 30,2L 30,30L 2,30L 2,2 Z "> <GeometryDrawing.Pen> <Pen LineJoin="Round" Brush="#FF000000" /> </GeometryDrawing.Pen> </GeometryDrawing> <GeometryDrawing Geometry="F1 M 7,8L 25,8L 25,24L 7,24L 7,8 Z "> <GeometryDrawing.Pen> <Pen LineJoin="Round" Brush="#FFFF0000" /> </GeometryDrawing.Pen> </GeometryDrawing> </DrawingGroup> </DrawingImage.Drawing> </DrawingImage> </Window.Resources> <Grid> <!-- Menu with image --> <Menu HorizontalAlignment="Stretch" VerticalAlignment="Top"> <MenuItem Header="Hello"> <MenuItem Header="World"> <MenuItem.Icon> <Image Source="{StaticResource TestImage}" /> </MenuItem.Icon> </MenuItem> </MenuItem> </Menu> <!-- Small standard image --> <Button HorizontalAlignment="Left" Margin="12,66,0,0" VerticalAlignment="Top" Width="142" Height="43"> <StackPanel Orientation="Horizontal"> <Image x:Name="imageSmall" Source="{StaticResource TestImage}" Height="32" Width="32" /> <Label VerticalAlignment="Center" Content="Small image" /> </StackPanel> </Button> <!-- Large standard image --> <Button HorizontalAlignment="Left" Margin="12,149,0,0" VerticalAlignment="Top" Width="142" Height="75"> <StackPanel Orientation="Horizontal"> <Image x:Name="imageLarge" Source="{StaticResource TestImage}" Height="64" Width="64"> </Image> <Label VerticalAlignment="Center" Content="Large image" /> </StackPanel> </Button> <!-- Small image with thin line with antialising enabled - looks bad! --> <Button HorizontalAlignment="Left" Margin="180,67,0,0" VerticalAlignment="Top" Width="177" Height="43"> <StackPanel Orientation="Horizontal"> <Image x:Name="imageSmall1" Source="{StaticResource TestThinLineImage}" Height="32" Width="32" /> <Label VerticalAlignment="Center" Content="Small thin anti alias" /> </StackPanel> </Button> <!-- Large image with thin line with antialising enabled - looks bad! --> <Button HorizontalAlignment="Left" Margin="180,149,0,0" VerticalAlignment="Top" Width="177" Height="75"> <StackPanel Orientation="Horizontal"> <Image Source="{StaticResource TestThinLineImage}" Height="64" Width="64"> </Image> <Label VerticalAlignment="Center" Content="Large thin anti alias" /> </StackPanel> </Button> <!-- Small image with thin line with antialising disabled - looks OK! --> <Button HorizontalAlignment="Left" Margin="391,67,0,0" VerticalAlignment="Top" Width="177" Height="43"> <StackPanel Orientation="Horizontal"> <Image SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased" Source="{StaticResource TestThinLineImage}" Height="32" Width="32" /> <Label VerticalAlignment="Center" Content="Small thin alias" /> </StackPanel> </Button> <!-- Large image with thin line with antialising disabled - looks OK! --> <Button HorizontalAlignment="Left" SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased" Margin="391,149,0,0" VerticalAlignment="Top" Width="177" Height="75"> <StackPanel Orientation="Horizontal"> <Image Source="{StaticResource TestThinLineImage}" Height="64" Width="64" /> <Label VerticalAlignment="Center" Content="Large thin alias" /> </StackPanel> </Button> </Grid> 

Answer 2

If you have VS2013, you should have Blend. If not, you can add it from Add or Remove Programs by changing the Studio installation and checking the box.

Once you have Blend, you can create vector images using the somewhat too simple tools that it provides; but more useful is its ability to import Adobe Illustrator files. This is still a vector graphics app to work with. This is great if you have a designer to create assets or you have the skills to do it yourself.

If you need something between the basics of Blend and All-singing Illustrator, Expression Design is a pretty decent option (as mentioned in @pek).