Creating WPF Application for Drawing and Painting in WPF

Introduction

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

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()
        {
            InitializeComponent();
        } 
        private void inkCanvas1_Gesture(object sender, InkCanvasGestureEventArgs e)
        {
        }
        private void button1_Click(object sender, RoutedEventArgs e)
        {
            this.inkCanvas1.Strokes.Clear();
            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");
            this.Close();
        }
    }
}

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