Introduction
WPF offers a new way to build Windows applications that offer the user a richer experience. WPF applications offer the user advanced graphical features, animation, multimedia components, a better look and integration with documents, among other features.
Developers of WPF applications can now declaratively define the appearance of an application with Extensible Application Markup Language (XAML), and can implement the mechanics of an application in a code-behind file, separating presentation from logic in a way similar to what is done in ASP.NET. This approach also makes applications easier to divide up: designers can work with the visual half of the application using tools such as Microsoft Expression, and developers can work with the programming half using Visual Studio. The two halves can then be easily combined to form a visually pleasing product.
Moreover, while WPF provides a way to create traditional Windows applications, many users may prefer a browser-based experience. Because of this, WPF also offers a way to create browser-hosted applications, where the application will open in the user's browser rather than a traditional desktop window. Furthermore, Silverlight is compatible with WPF, and so knowledge of WPF in building Windows applications will carry over to building Silverlight applications.
Creating a WPF Project
• Open up Visual Studio 2008 and open the New Project dialog.
• There are two main WPF project templates:
o WPF Application
o WPF Browser Application.
The WPF Application template is used for standard desktop applications, and it's what we'll be using here. C# project named WpfToDo.
The WPF Browser Application is used for browser-hosted applications. Creating a browser application isn't much different from creating a desktop application.
Creating WPF Application
When the project is created and loaded, you should immediately see a split-view in the workspace. On the top will be a visual representation of the application's default window, and on the bottom will be the corresponding XAML. The visual part will probably be bigger, but you may want to click the Swap Panes button in order to enlarge the XAML view.
For now, though, leave the workspace area alone and take a look at the Solution Explorer. You should see two files, App.xaml and Window1.xaml. As the extensions give away, these contain the application's XAML. If you expand the two files, you should see something like this:
Under the XAML files are the code-behind files, whose names are created simply by appending “.cs” to the XAML file names. The -.xaml files of WPF are analogous to the -.aspx files of ASP.NET, and the code-behind files simply tack on the appropriate language extension.
The App files aren't very important to us right now. They deal with the application as a whole. For example, if we had a resource that we needed to share across the entire application, then we'd probably deal with that in the App files. But we don't. The only thing worth mentioning right now is one attribute in App.xaml:
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
StartupUri="Window1.xaml">
The attribute in bold specifies what the starting window is. In this case, it's Window1.xaml. With that, turn your attention to the Window1 files. Window1 is going to be the main window for our application.
Creating the basic UI with XAML
WPF applications are, just like Windows Form applications and ASP.NET applications, event-driven. So, before we start working with code, we need to create the basic user interface of our application using XAML. Then, we can work on responding to events raised through user interaction with the interface. The initial contents of Window1.xaml should look like this:
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
Right now, there's just a Window tag which contains an empty Grid tag. Let's take a look at the Window tag first. In the first line, we define the Class attribute. This attribute points to the class associated with the window as defined in XAML. The next two lines aren't important—leave them be. Then, there are the Title, Height and Width attributes. These attributes specify the title, initial height and initial width of the window. Go ahead and change the title to something more appropriate, such as “To-Do List.”
Speaking of height and width, there is one important thing to be mentioned here. WPF doesn't use standard pixels. Instead, it uses “device independent pixels.” The goal with the device independent pixel is to provide consistent sizing across different devices and video settings. So 96 device independent pixels make up 1 inch. This makes since, since 96 dots per inch is common.
Inside the Window is a Grid. WPF offers numerous ways to control the layout of a window. The default method is through a Grid, which, as its name implies, arranges controls in a grid, with rows and columns whose sizes are specified by the developer. Another layout control is the StackPanel, which simply arranges controls from left to right or from top to bottom. There are, of course, a number of other layout controls, but we won't need them for our application. We'll be using a Grid for the main window, since it fits the desired layout.
The layout of the application doesn't have to be very complicated. A long, rectangular window will do. Inside the window will be a list of tasks, and below the list of tasks will be two buttons. One button will be for adding a new task to the list, and the other button will be for deleting a task from the list. Let's start by modifying the window's dimensions. Set the height of the window to 480 (5 inches) and the width of the window to 384 (4 inches).
Creating the Grid
In order to lay out the controls as described above, we need two columns (since there are two buttons below the task list, each of which will need its own column) and two rows (since, vertically, there's one list and one group of buttons). The columns need to be of equal width, since the buttons will need to be of equal width, but the rows will need to be of very different heights, since the buttons will naturally occupy less vertical space than the list. The list will span across two columns.
Setting the height of each row and the width of each column (and, thus, the size of each individual cell) isn't very difficult. It involves simply adding some tags within the Grid tag:
The above XAML is pretty straightforward. First, we define the columns of the grid, and then we define the rows, exactly as described earlier, with two columns of equal width and two rows of unequal width. Grid columns are defined using the ColumnDefinition tag, and column definitions are all wrapped inside of a Grid.ColumnDefinitions tag. Rows are defined the exact same way, except with RowDefinition and Grid.RowDefinitions.
Notice that the dimensions of the grid are considerably less than the dimensions of the window. Some difference is to be expected, since the border and title bar of the window will take up some space, but I've subtracted even more space from the grid in order to create some empty space between the controls and the border of the window. If we add controls to the grid as-is, though, the empty space will only be to the right and to the bottom of the grid. That is, everything will be crammed to the top left. To fix this, we need to center the the columns and rows within the grid. This isn't very hard. Only the Grid tag needs to be modified:
Above, we add a HorizontalAlignment attribute along with a VerticalAlignment tag. Now, all of the controls will be centered in the window, with a margin between the controls and the edge of the window. Note, though, that there is also a Margin attribute for controls, which we'll take a look at shortly.
Using XAML, we've declaratively created a layout for our application's controls, and, so far, the XAML has been rather uncomplicated and uncluttered, just as it should be. In the next article, we'll start by placing the controls inside the cells of the Grid.
