Creating a Drawing Application by Using WPF

In this lesson, you will learn how to create a Windows Presentation Foundation (WPF) application that enables you to draw pictures. Creating a WPF application is like creating a Windows Forms application. You drag controls from the Toolbox to the design surface and then write code to handle the events of the controls.

For a video version of this topic, see Video How to: Creating a Drawing Application by Using WPF.

Try it!

To create a WPF application

1. On the File menu, click New Project.

   The New Project dialog box appears. This dialog box lists the default application types that you can create by using Visual Basic Express.

2. Select WPF Application as the project type.

3. Change the name of your application to Ink Pad and then click OK.

   Visual Basic Express creates a new folder for your project. The folder has the same name as the project title. Visual Basic Express also displays your new WPF window, titled Window1, in Design view. You can go to the Code Editor at any time by right-clicking the design surface and clicking View Code. By default, the XAML editor is displayed under the designer, but you can see the XAML view in full screen by right-clicking the design surface and clicking View XAML.

To design the user interface

1. If you cannot see the Properties window, on the View menu, click Properties Window. This window lists the properties of the currently selected form or control. You can change the existing property values in this window.

2. Change the size of the WPF window by setting the Height property to 550 and the Width property to 370 in the Properties window.

3. Change the title property of the WPF window to Ink Pad.

4. Change the Background property of the WPF window to the color brown by clicking Brown in the drop-down box and then pressing ENTER.

   Note

   You can alternatively modify the XAML markup directly by adding a Background attribute and setting its value to Brown: Background="Brown"

5. To open the Toolbox, on the View menu, click Toolbox.

6. Right-click the Toolbox, and then click Choose Items.

   The Choose Toolbox Items dialog box opens.

7. 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.

8. Click OK to add the InkCanvas control to the Toolbox.

9. Drag an InkCanvas control from the Toolbox to the design surface.

10. Set the following properties of the InkCanvas control in the Properties window:

    Property	Value
    Width	Auto
    Height	Auto
    HorizontalAlignment	Stretch
    VerticalAlignment	Stretch
    Margins	9, 9, 9, 68

11. Change the color of the InkCanvas control to yellow by setting its Background property to LightYellow.

    The background color of the InkCanvas control will appear light yellow at run-time.

12. Drag two Button controls to the WPF window, positioning them under the InkCanvas control. Place button1 on the left and button2 on the right.

13. Select button1 and change the XAML markup in XAML view as shown in the following markup. This markup sets the Text property to Clear.

    <Button Height="23" HorizontalAlignment="Left" Margin="85,0,0,24" 
        Name="Button1" VerticalAlignment="Bottom" 
        Width="75">Clear</Button>
    

14. Select button2 and change the XAML markup as shown in the following markup. This markup sets the Text property to Close.

    <Button Height="23" HorizontalAlignment="Right" Margin="0,0,72,24" 
        Name="Button2" VerticalAlignment="Bottom" 
        Width="75">Close</Button>
    

    The WPF application should resemble the Ink Pad application in the following illustration.

    WPF Ink Pad application

    

To add code to the event handlers for the buttons

1. Double-click Clear, and then add the following code to the generated Click event handler:

       Me.InkCanvas1.Strokes.Clear() 
   

2. Return to Design view by right-clicking the Code Editor and clicking Designer.

3. Double-click Close, and then add the following code to the generated Click event handler:

       Me.Close()
   

4. Press F5 to run the project.

5. When the application starts, draw a picture in the InkCanvas control. If you make a mistake, you can click Clear to start over.

6. Click Close to the exit the application.

Next Steps

In this lesson, you learned how to create a drawing application by using WPF.

In the next section, you will learn how to use the Visual Basic tools to find and fix errors (typically called bugs) in a program.

Next Lesson: What Went Wrong? Finding and Fixing Errors Through Debugging

See Also

Tasks

How to: Create a New WPF Application Project

How to: Add New Items to a WPF Project

Designing a User Interface for a WPF Application (Visual Basic)

Using Common WPF Controls

Creating Event Handlers for WPF Controls

Other Resources

Creating the Visual Look of Your Program: Introduction to Windows Presentation Foundation