Title: Create button images in WPF and C#

It seems like I'm constantly building programs like this one to create simple button images that I can use in other programs. This example uses XAML code to create some simple button images at design time. The program's code then saves those images at runtime in PNG files with transparent backgrounds.

XAML Code

The program's XAML code starts with a Grid control that has two rows, one holding the Capture button and one holding a WrapPanel. The following code shows the WrapPanel.

<WrapPanel Grid.Row="1"> <WrapPanel.Resources> <Style TargetType="Canvas"> <Setter Property="Background" Value="Transparent" /> <Setter Property="Width" Value="20" /> <Setter Property="Height" Value="20" /> </Style> <Style TargetType="Line"> <Setter Property="Stroke" Value="Blue" /> <Setter Property="StrokeThickness" Value="4" /> <Setter Property="StrokeEndLineCap" Value="Round" /> <Setter Property="StrokeStartLineCap" Value="Round" /> </Style> <Style TargetType="Polyline"> <Setter Property="Stroke" Value="Blue" /> <Setter Property="StrokeThickness" Value="4" /> <Setter Property="StrokeEndLineCap" Value="Round" /> <Setter Property="StrokeStartLineCap" Value="Round" /> </Style> </WrapPanel.Resources> <Canvas Name="canX"> <Line X1="2" Y1="2" X2="16" Y2="16" StrokeThickness="3.5" /> <Line X1="2" Y1="16" X2="16" Y2="2" StrokeThickness="3.5" /> </Canvas> <Canvas Name="canPlus"> <Line X1="2" Y1="10" X2="18" Y2="10" /> <Line X1="10" Y1="18" X2="10" Y2="2" /> </Canvas> <Canvas Name="canUp"> <Polyline Points="2,14 10,6 18,14" /> </Canvas> <Canvas Name="canDown"> <Polyline Points="2,6 10,14 18,6" /> </Canvas> <Canvas Name="canPencil"> <Line X1="2" Y1="18" X2="13" Y2="7" StrokeThickness="6" StrokeStartLineCap="Triangle" StrokeEndLineCap="Flat"/> <Line X1="14" Y1="6" X2="17" Y2="3" StrokeThickness="6" StrokeStartLineCap="Flat" StrokeEndLineCap="Flat"/> </Canvas> </WrapPanel>

This code begins with a resource dictionary that defines styles used by the Canvas, Line, and Polyline objects that are contained in the WrapPanel. Defining those values at this higher level makes the button images use similar sizes and styles. In this example, the images are 20 x 20 pixels and use thick, blue lines with rounded end caps.

After the resources, the WrapPanel contains a group of Canvas objects that hold the button images. These are relatively simple. For example, the following code shows how the program defines the first image, which contains an X.

<Canvas Name="canX"> <Line X1="2" Y1="2" X2="16" Y2="16" StrokeThickness="3.5" /> <Line X1="2" Y1="16" X2="16" Y2="2" StrokeThickness="3.5" /> </Canvas>

When I ran an earlier version of the program, these diagonal lines appeared slightly thicker than the horizontal lines used by the other button images. They really weren't any thicker, but I think aliasing made them appear that way. I changed the thickness of the lines in this image to produce a more consistent-looking result.

If I were building these images in C# code rather than XAML, I would calculate the end points for the lines so they would be appropriate if you were to resize the Canvas objects. Unfortunately XAML code isn't designed to perform calculations.

You could define key values such as 2 and 16 in the resource dictionary and then use those values when creating the images. That would work, but it would make the code more complicated and wouldn't make this example all that much more flexible, so I decided to stick with this simpler approach.

C# Code

When you click the Capture button, the following code executes.

// Save the button images. private void btnCapture_Click(object sender, RoutedEventArgs e) { try { // Save the files. SaveControlImage(canX, "x.png"); SaveControlImage(canPlus, "plus.png"); SaveControlImage(canUp, "up.png"); SaveControlImage(canDown, "down.png"); SaveControlImage(canPencil, "pencil.png"); MessageBox.Show("Done"); } catch (Exception ex) { MessageBox.Show(ex.Message); } }

This code simply calls the SaveControlImage method for each of the program's Canvas controls to save their images into PNG files.

For a description of the SaveControlImage method, see the post Draw a smiley face with WPF in C#.

Conclusion

This program lets you draw simple button images and save them into PNG files. You can then use them on buttons in other programs. To make different images, you'll need to modify the XAML code. You may also want to create new images, in which case you may need to add more Canvas controls to the program.

Still, this program should give you a pretty good head start on creating similar button images. I expect it to save me a lot of time in the future.

Download the example to experiment with it and to see additional details.