Creating A Drawing Pad In WPF

In this article, you will learn how to create a drawing pad in WPF.

Introduction

Here, in this article, we will be working on creating a drawing pad in Windows Presentation Foundation.

Development Requirements

  1. Visual Studio 2015
  2. .NET Framework 4.6
  3. Microsoft Expression Blend if needed

Follow the following steps to create a drawing pad in WPF,

Step 1: Run Visual Studio 2015 -> Visual C# -> Windows -> WPF Application.

WPF Application

Step 2: Go to MainWindow.xaml and paste the following code inside the Grid:

  1. <InkCanvas HorizontalAlignment="Stretch" Margin="9,9,9,68" Name="inkCanvas1" VerticalAlignment="Stretch" Width="Auto" Grid.RowSpan="2" Gesture="inkCanvas1_Gesture" />  
  2. <Button Content="Clear" Height="23" HorizontalAlignment="Left" Margin="150,63,0,0" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click" Grid.Row="1" />  
  3. <Button Content="Close" Height="23" HorizontalAlignment="Left" Margin="231,63,0,0" Name="button2" VerticalAlignment="Top" Width="75" Click="button2_Click" Grid.Row="1" />  
  4. <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" />  
Code

Code explanation

InkCanvas: InkCanvas is used for controlling the layout, to point out the absolute positioning, and to capture the display strokes.

Button

 

  • Button1 is created for the function of clearing the content.
  • Button2 is created for the function of closing the layout.

Label

Label is created for displaying the content of “You can draw any image by rotating the mouse”. 

Summary

Here, we have created an InkCanvas for layout, to point out the strokes, and to perform functions on the drawing pad, etc. A couple of buttons are created which works for the functions of clearing the content and closing the layout. They are named as button1 and button2, added with a vertical alignment of top for both. Label is used to display the content of “You can draw any image by rotating the mouse”.

Step 3: Click on Start to run the code.

Code

Code

You will be getting the below screen with the drawing pad where you can draw or write whatever you want to.

drawing pad

Clicking on the below screen will clear the window, as shown below:

clear the window

Clicking on Close button will close the drawing pad.

close the Drawing pad