WPF Through an Example: Introduction - Creating the basic UI with XAML
(Page 3 of 4 )
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:
<Window x:Class="WpfToDo.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Grid>
</Grid>
</Window>
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).
Next: Creating the Grid >>
More Windows Scripting Articles
More By Peyton McCullough
