Creating WPF Application for Drawing and Painting in WPF


Drawing and Painting is a common aspects which everyone likes to do something different at any time. With this article, you can learn how to create a WPF application that enables you to draw pictures. Creating a WPF application is like creating a Windows Forms application. You choose controls from the Toolbox on the design window and then write code to handle the events of the controls.

Now, lets create a simple application using following steps

Step 1 : Open Microsoft Visual Studio 2010.

Step 2 : Select File->New->Project.

Step 3 : Select WPF Browser Application and then click Ok.


Step 4 : Set the Background, height, width property of the design window.

Step 5 : Right-click the Toolbox, and then click Choose Items.


Step 6 : On the WPF Components tab of the Choose Toolbox Items dialog box, scroll down to InkCanvas and select it so that a check appears in the check box.


Step 7 : Drag an InkCanvas Control from the Toolbox to the design surface.


Step 8 : Set the Background, Height, Width, Margin property of the InkCanvas Control.

Step 9 : Drag two Button controls and label control to the WPF window, positioning them under the InkCanvas control.

Step 10 : Write the following code in the MainWindow.xaml file

<Window x:Class="mydrawinginkpad.MainWindow"
        Title="MainWindow" Height="350" Width="525" Background
            <RowDefinition Height="152*" />
            <RowDefinition Height="159*" />
        <InkCanvas HorizontalAlignment="Stretch" Margin="9,9,9,68" Name="inkCanvas1" VerticalAlignment="Stretch"
="Auto" Grid.RowSpan="2" Gesture="inkCanvas1_Gesture" />
        <Button Content="Clear" Height="23" HorizontalAlignment="Left" Margin="150,63,0,0" Name="button1"
="Top" Width="75" Click="button1_Click" Grid.Row="1"/>
        <Button Content="Close" Height="23" HorizontalAlignment="Left" Margin="231,63,0,0" Name="button2"
="Top" Width="75" Click="button2_Click" Grid.Row="1"/>
        <Label Content="You can draw any image by rotating the mouse" Height="34" HorizontalAlignment="Left"
="27,12,0,0" Name="label1" VerticalAlignment="Top"
               ContentStringFormat="Draw any image by rotating the mouse."
="#FF9ED1B3" FontSize="20" FontFamily="Comic Sans MS" />

The design window looks like as


Step 11 :
Write the following code in MainWindow.xaml.cs file

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace mydrawinginkpad
    public partial class MainWindow : Window
        public MainWindow()
        private void inkCanvas1_Gesture(object sender, InkCanvasGestureEventArgs e)
        private void button1_Click(object sender, RoutedEventArgs e)
            MessageBox.Show("you have press the clear button");
        private void button2_Click(object sender, RoutedEventArgs e)
            MessageBox.Show("Now the window will be closed thanx for using InkPad");

Step 12 : Now press F5 key to run the application.

Output :





Here are some other useful resources which may help you

Paint Application In Silverlight 3 - Part I
Dynamic and static Rectangle in WPF
WPF Drawing Brush
How to write a GDI+ Application