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

10112014_CreateWPF

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.

10112014_NewWPF

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.

10112014_WindowTitle

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.

ROWS

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

10112014_RowDefinitions

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.

10112014_RowDefinitionsHeights

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.

COLUMNS

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.

10112014_ColumnDefinitions

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

Filling in the window

ELEMENTS

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.

10112014_FillinStuffIn

PROPERTIES

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.

10112014_ColumnSpan

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.

10112014_TextBox

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

10112014_TextBoxAppRun

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.

10112014_OtherElements

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

10112014_FinalRun

Advertisements

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