XAML: WPF Basics

I thought it be would be fun to play around with creating WPF applications to learn how they work, so I made good use of my PluralSight subscription and got to it.

WPF stands for Windows Presentation Foundation and it provides a way to render user interfaces for windows based applications. The interface itself is generated through a series of XAML elements. The XAML code also contains a ‘code-behind’ which allows you to use C# to interact with the elements you’ve created.

Creating the WPF application

In order to create a WPF application go to File – > New Project -> Visual C# -> WPF Application


Once the app is created, an example area (the design view) appears displaying the main window of the application and a view of the XAML (code view) that designs it. The solution will contain a MainWindow.xaml and the code-behind file MainWindow.xaml.cs. In the image below, the left hand side of the screen displays the Toolbox for WPF which allows you to drag and drop elements onto the design view.


Looking at the XAML

The first element located in the code view of the MainWindow is <Window>. The window element contains the class that the window exists in, a couple of namespaces, its title, and its dimensions. The title element is what displays at the top of the window when the application is in a windowed mode.


The element nested within <Window> is <Grid>.

Creating a Layout

<Grid> is a panel layout is one of most popular of the layout elements WPF provides. We can nest elements within <Grid> to customize the window to our liking. In order to control the layout, Row and Column definitions need to be defined in order to create table in the window.


Row Definitions have a parent element of <Grid.RowDefinitions> and then each <RowDefinition> nested within it defines a new row.


The Height can be defined by using “#*” combinations. For each star in the RowDefinitions, the Window gets split and then split up based upon the value in each element. The default value for height is a single *. Here’s an example.


The rows appear in the window in the same order your define them in the XAML. In the Design View of the window, you can see on the left side (where the arrows are pointing) how the height affected the rows. There is also a setting for the height, “auto”, which tells the row to match the height of the contents within the row.


Column definitions are created exactly the same way row definitions are, with a parent element and a series of nested ones that define each column. The only difference here is that the column definitions set a Width instead of a Height.


The column definitions will have the widths located at the top of the Design View’s window.

Filling in the window


Now that a layout has been created for the application, its time to actually fill it with stuff. We can fill the Grid with tons of different elements such as a <Rectangle>, <TextBox>, <Label>, <TextBlock>, <Image>, <Radio>, <Checkbox> and so on. These elements will be nested within the Grid element, like the row and column definitions were, and can be manipulated to be placed within any row/column combination.



Each of the elements that you use to make things appear in the grid with have a set of properties that allow you define it’s position in the grid. These properties are Grid.Column and Grid.Row, by default they are set to 0. Since the Grid is a 0 based index, this means that it’s the first column and first row in the grid. Most elements also contain alignment elements, HorizontalAlignment and VerticalAlignment,  that allow you to better situate your element in the grid. A helpful property for situating your elements properly also is ColumnSpan. ColumnSpan allows you to let the element occupy more than one column.


One of the staple elements for accepting some sort of user input would the <TextBox> Element. This will create a text box in your window that allows the end user to type something into it.


Here what the text box looks like when the app would actually be run


A couple other really common elements to put into a grid for user input would be Radio buttons, combo boxes and calendars, this is a quick look into creating those elements.


And one last view of the app when it runs with all the new fun stuff added on



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s