Some notes on how to create a simple Windows Presentation Foundation (WPF) application and get familiar with the Visual C# integrated development environment (IDE).
Like Windows Forms applications, WPF applications can be developed by dragging controls from the Toolbox to the design editor. As well as having a designer, Properties window and Toolbox, the IDE in WPF projects has a window that contains Extensible Application Markup Language (XAML), a language used to create user interfaces.
1. Creating the WPF application
In the File menu, click New Project and select WPF Application. In this example we will create a simple scribbler application, so you might want to name it Scribble. Click OK.
2. Editing WPF window properties
Visual C# will create a folder named after the project title. It will display your new WPF window titled Window1 in the Designer view. You can view its code by right-clicking on the window and selecting View Code:
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 Scribble
{
/// <summary>
/// Interaction logic for Window1.xaml
/// </summary>
public partial class Window1 : Window
{
public Window1()
{
InitializeComponent();
}
}
}
The WPF window in Designer view is a graphical representation of the window that you see when you start your application. In the Designer view, you can drag different controls from the Toolbox onto the WPF window. After placing a control onto the WPF window, Visual C# creates code that correctly position the window’s control when the program is run.
To view the Properties window, right-click on it and select Properties, which will lists this windows properties and allow you to view and edit properties such as size, background color, title etc.
Change the title of the WPF window to Scribble for example. Change the color of the WPF window by clicking the combo box next to the Background field and selecting the colour from the drop-down list:
3. Adding the Canvas control
If the Toolbox is not yet viewable, open it by selecting the View menu, and then clicking Toolbox. To add an InkCanvas control to the toolbox, select right-click the Toolbox, (note: not on the Toolbox toolbar), select Choose Items, select the WPF Components Tab, scroll down until you see the InkCanvas control and set the checkbox next to it. Click OK to add the InkCanvas control to the Toolbox. Add the InkCanvas control by selecting it from the General tab of the Toolbox, and dragging it to the main window.
4. Adding further controls and setting their properties
Feel free to play around with control dimensions such as height, width etc. This can be done fairly easily by stretching the controls edges in the Design view.
From the General tab of the Toolbox, drag two Button controls to the WPF Window, situated under the InkCanvas control. Set the button properties, labelling one as “Close” and the other as “Clear”:
5. Create event handlers for the controls
Double-click on the “Clear” button and add the following code:
private void Clear_Click(object sender, RoutedEventArgs e)
{
this.inkCanvas1.Strokes.Clear();
}
Double-click the “Close” button and add the following code:
private void Close_Click(object sender, RoutedEventArgs e)
{
this.Close();
}
6. Run the project
Save everything and press the F5 button. Draw scribbles by holding down the left mouse button over the InkCanvas control:
