Creating a WPF project with Expression Blend and Visual Studio

Having discussed the rationale behind a WPF application, we’ll see how to create a simple one here. The application will consist of a window containing a menu at the top, a button in the middle and a status bar at the bottom. Pressing the button will show the current date and time in the status bar. The menu will contain only a single item which allows the user to exit the program.

On a large industrial scale, typically there would be one team working on the graphical design of a program and another working on the behind-the-scenes logic. The graphical people would be using Expression Blend and the coders would be using Visual Studio. In our simple example, we will be writing the entire project, but we’ll use both packages to see how they work together. We will be using Expression Blend version 4, and Visual Studio 2010, which we’ll abbreviate by EB and VS respectively.

It is possible to have both EB and VS working on the same project simultaneously, and in principle it doesn’t matter which one we use to create the project, but since we usually work on the design first, we’ll create the project using EB. So start up EB. Before we create the project, we want to set up the link between EB and VS. In EB’s Tools menu, select ‘Options’ and then ‘Project’. Tick the option that says ‘Use Microsoft Visual Studio to create and edit event handler code’. This means that when we add an event handler (that is, code that gets run when something is done to a control) to a control such as a button, EB will open VS for us and we can then use VS to enter and edit the code.

Now select ‘New Project’ from the File menu. Pick a location for your project to go, and call it DateTimeApp. You should see a blank window appear in the central panel in EB. EB provides three different ways of viewing the project. The one you’re looking at now is the ‘design view’. You can switch to XAML view by selecting the View menu, then Active Document View, then XAML view. The third view is ‘Split view’ which shows both the design and the XAML in a split panel.

To avoid fiddling with menus, you can press F11 to swap between views, or if you want to use the mouse, you can choose one of the three icons to the upper right of the central display panel. The icons look like this:

The top icon is for display, the middle for XAML and the bottom for split.

Select XAML view and you will see the code that EB has generated for you, and which defines the blank window you see in the panel.

<Window
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	x:Class="DateTimeApp.MainWindow"
	x:Name="Window"
	Title="MainWindow"
	Width="640" Height="480">

	<Grid x:Name="LayoutRoot"/>
</Window>

Some bits of this code (like the title and width and height) should be fairly obvious, while other bits will be more obscure. Don’t worry about the obscure bits for now, since they are pretty standard and appear in most WPF applications without any need of modification.

Now we want to add some components to the window. So you can watch the changes in the XAML as you edit the design, swap to Split View. In EB, you should see this in the ‘Objects and Timeline’ panel in the lower left:

Try selecting Window and note that the overall window in the central panel gets selected (a blue line is drawn around it). Now try selecting ‘LayoutRoot’ and you’ll see that the interior of the window (called the ‘client area’) is selected. You’ll also notice that the Properties panel on the right changes when you select different objects, reflecting the various properties of each component that can be edited. Finally, you should notice that a different bit of the XAML gets highlighted when you change your selection.

Now select the Window and then drag on of its corners to make the window smaller. You should note that the width and height in the XAML change.

Layouts

Central to design in WPF is the idea of a layout. When you created the project, EB provided a layout automatically; this is the Grid element in the XAML. This Grid has a name of LayoutRoot, which is what appears in the Objects and Timeline. We’ll get into the details of layouts later, but for now all you need to understand is that the Grid layout allows you to position controls (such as buttons) in a rectangular grid pattern, depending on where you define the rows and columns within the Grid.

For our design, we want a menu at the top, a status bar at the bottom, and a button in the centre. So we will need three rows and one column. There are several ways of defining rows in a Grid, so we’ll look at one of those here.

First, select the Grid by clicking LayoutRoot in Objects and Timeline. Now find the Layout panel in the Properties box on the right side of the EB window. Click the downward pointing arrow at the bottom of the Layout panel to expand it and get the ‘advanced’ layout properties. You should see this:

Now open the RowDefinitions dialogue. Click ‘Add another item’ three times to add three rows to LayoutRoot. For Rows 0 and 2, go to the Layout panel on the right of this dialogue box and set the Height to ‘Auto’ (leave Row 1 alone). This means that these two rows will automatically size themselves to fit around whatever components are added to them, so that when we add the menu and status bar, the Grid will handle them correctly.

Now close the dialogue box and look at the XAML. The bit defining LayoutRoot will now look like this:

	<Grid x:Name="LayoutRoot">
		<Grid.RowDefinitions>
			<RowDefinition Height="Auto"/>
			<RowDefinition/>
			<RowDefinition Height="Auto"/>
		</Grid.RowDefinitions>
	</Grid>

You can see that using EB’s editor is a bit easier than having to type in all that XAML code.

Menu

Now we can add the menu. On the left of EB, you will see a vertical toobar. Select the lowest button on this toolbar (the one with the >> symbol on it) and it will expand into a dialogue box. With ‘Controls’ selected on the left panel of this dialogue box, look for the icon labelled Menu and drag it onto LayoutRoot in the Objects and Timeline panel. Look at the XAML to make sure that the menu appears within the Grid tags.

Unfortunately, EB tends to get a number of things wrong when you add the menu, so you’ll need to make a few adjustments to get the menu where you want it. The menu will probably appear a large grey square in the upper left corner of the main window, which certainly isn’t the way menus should look. If you look at the code for the menu in the XAML you’ll see a number of things that are wrong, including the width and height. To fix this, make sure the menu is selected and look at its properties on the right. Find the Layout panel and make the following changes.

First, the menu should be in Row 0 of LayoutRoot, so change Row to 0. Next, change the width and height to Auto (you can do this by clicking on the crossed arrows to the right of the width and height boxes). Finally, change the horizontal and vertical alignment to Stretch, which causes the component to stretch to fill all the space available. The Stretch option is the rightmost button; you can hover the mouse over the button to ensure you’ve got the right one.

Once you’ve made these changes, the menu will seem to disappear, but fear not, that’s what it’s supposed to do. Since the menu doesn’t have any components in it yet, its height setting of ‘Auto’ means it is fitting to zero height. We can fix this by adding a menu item to the menu.

To do this, right click on the Menu in Objects and Timeline and select ‘Add MenuItem’. Note that the menu now becomes visible on the window. In the properties of the MenuItem, scroll down until you find the Common Properties panel, then enter _File (with the underscore at the front) into the Header box, then hit return. Note that the text (the ‘header’) of the MenuItem changes to File with the ‘F’ underlined so it can be accessed from the keyboard when the program is run.

Finally, we want an item to appear when the File menu is selected, so in Objects and Timeline, right click on File and add a MenuItem to it. Give this MenuItem a Header of E_xit. Finally, give this menu item a name (which will be used in the code) by entering menuFileExit in the Name box at the top of the Properties panel.

That completes the addition of the Menu. If you’re getting impatient and want to see the program running, you can select ‘Run project’ from EB’s Project menu. The project will compile and run, and you should get a window with functional menu. Obviously the ‘Exit’ menu item won’t cause the program to shut down since we haven’t yet added the event handler to it, but be patient.

Status Bar

Next we’ll add the status bar. The procedure is similar to that for the menu. Open the >> button in the left-hand toolbar and this time type ‘status’ into the search area at the top. Select StatusBar from the results of the search and drag it into Objects and Timeline so that its parent is LayoutRoot.

In its properties, set the Row to 2, Width and Height to ‘Auto’, and horizontal and vertical alignments to ‘Stretch’. The status bar should now appear along the bottom of the window. It is also worth checking the margins around the StatusBar: they should all be zero (sometimes EB gets inventive with the margins when a control is first inserted, so if the layout looks wonky, the margins are always worth checking out.)

Add a TextBlock to the StatusBar (drag from the toolbox as usual). Give the TextBlock a code name of textStatusBar and change its text (in the Properties panel) to ‘Date & time shown here’. This should show up on the status bar.

Button

Finally, we need to add the button. Drag the button onto LayoutRoot, give it a Row of 1, set its width and height to Auto. Set both horizontal and vertical alignments to ‘Center’, and check that all margins are zero. Give the button a code name of buttonDateTime, and give it a Content of ‘Show date and time’. The final layout should look like this:

In the next post we’ll look at adding event handlers to the menu and button to give the program some functionality.

Advertisements
Post a comment or leave a trackback: Trackback URL.

Comments

  • Traveler  On March 12, 2014 at 7:27 PM

    Newbe with WPF. Have created several buttons. Want to have one event handler for all. Use switch statement to decide which button was clicked. What arg would I use to determine this?

Trackbacks

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

%d bloggers like this: