WPF in Visual Studio

Windows Presentation Foundation (WPF) is a .NET technology for building desktop

applications. The result of building a WPF application is an *.exe file that you can

run directly on your computer or deploy and run on any other computer that has .NET

installed. With WPF, you can add a graphical user interface (GUI), pronounced "Gooey,"

that makes it easier for users to work with your program.

 

This Article will show you how to lay out a screen in WPF and explain the controls, such

as Button and TextBox, that you can place on the screen. You'll also learn how to capture

events off controls, allowing you to add code that runs based on user input. Since most

applications work with data, this Articlebuilds on what you learned in C#, OOPS concepts

and shows how to bind data to controls in the GUI.

 

This Article will show you how to build a WPF GUI with the VS Designer, but

sometimes you must work at a lower level and manipulate the XAML, pronounced

"Zammel," that defines the GUI. XAML is an XML format that WPF and Silverlight

use to define a GUI. There are two Article in this blog that will help you get up to

speed in XAML: Article 1, "XML in Visual Studio" and Article 2, " XAML in WPF and

Silverlight." If you aren't familiar with XML, start with Article 1. However, if you have

a good grasp of basic XML syntax, go straight to Article 2. I'll try to explain WPF in

a way that any XAML you see can be understood in its context, but you might want to

review the Articles to avoid any confusion. Once you're familiar with XAML, you can

return here and start with the next section, which explains how to start a WPF project.

 

Starting a WPF Project

May be you know that how to create and build projects. The example explained how

to create a Console application. However, what you learned there is generally applicable

to most other application types. This section builds upon what you already know about

projects and explains what is unique to a WPF application. To get started, open the New

Project window; select WPF Application; and fill in the project name, location, and

solution name. I'm naming the examples in the chapter as MyShop to continue the idea

of customers who buy products. Figure 1 shows the new WPF application in VS, including

a Toolbox, a Designer, and a Solution Explorer. The Toolbox contains controls, which are

user interface (UI) elements, such as Button and Textbox, that you can drag and drop onto

the Designer.

 

---

NOTE

There is another .NET technology, Windows Forms, for creating desktop applications.

This book doesn't discuss Windows Forms because it's an older technology. The way

forward for desktop application development is WPF, and the intention of this book is to

help guide you in a direction most beneficial to you.

---

 

The Designer allows you to lay out the UI of the application; it is divided into Design

on the top and XAML on the bottom. The Design surface allows you to visually work

with controls and layouts of those controls. The XAML editor allows you to work with

the XML representation of the controls on the design surface. The Design and XAML are

interrelated because a change in one causes a change in the other. For example, if you add

a Button to the Design, you'll see the XML representation of that Button in the XAML.

 

Figure 1  new WPF application project

 

Understanding Layout

A layout defines how you can position and size controls on a screen. WPF windows and

controls have a Content (can occasionally be called something else) property that accepts

a single control. In some cases, such as a Button control, the content can be text. However,

many situations call for the ability to lay out multiple controls. This section concentrates

on performing layout in windows, and a Window has a Content property that accepts

only one control; that one control should be a layout control, which is the subject of this

section.

 

WPF includes several layout controls, including Grid, StackPanel, DockPanel,

WrapPanel, and Canvas. By default, VS will generate a window with a Grid as the layout

control. However, you are free to replace the Grid with any other layout control that suits

your needs. This section will show you how to use each of these controls.

 

Grid Layout

Whenever starting a new WPF project, VS adds a Grid. A Grid is a layout control that

allows you to create a set of rows and columns that hold other controls. You can add rows

and columns to a Grid through the Visual Designer by clicking in the middle of a window

in design view. Figure 2 shows a column being added to a Grid.

The thin vertical line in the middle of the window is a new border between two columns.

After clicking the window, you'll see two thick borders on the left and top of the window.

While you hover over the top border, VS draws a vertical line that moves left and right as

you run your mouse along the top border. You can do the same with the left border, adding

rows to the Grid. This is a very quick way to add rows and columns to a Grid.

 

Figure 2 Adding columns and rows to a Grid