Creating a WPF Host Application
Figure 1 shows a picture of the iPhone interface. You can refer to
Figure 1 throughout this article to see the final goal of the features you are going to create.
When you launch Expression Blend it displays a Welcome Screen as shown in
Figure 2. You can create new projects or edit existing projects from this screen. I highly recommend checking out the Samples tab where you can see several impressive examples of WPF in action.
 |
| Figure 1. iPhone Interface: You can replicate all the great user interface features of the iPhone interface using WPF. |
|
 |
| Figure 2. Expression Blend Welcome Screen: From this screen you can create new projects or open existing projects. |
|
|
Click the New Project link to launch the Create New Project dialog box. From this dialog you can create WPF standalone applications, WPF Control libraries, or Silverlight Sites. While you can't create an XBAP application in Expression Blend, you can create one in Visual Studio 2008 and edit it in Blend.
With the WPF Application (.exe) option selected, change the project Name to
iPhone, specify the location where you want to create the WPF project, and choose your .NET Language. Make sure the
Target property is set to .NET Framework 3.5, and then click OK to create the project.
 | |
| Figure 3. The Project Palette: This palette is equivalent to the Project window in Visual Studio. It displays the files included in your WPF project. |
As shown in
Figure 3, the Project palette in the upper right corner of the IDE displays the newly created project. This palette is equivalent to the Visual Studio Project window. As you can see, the project contains a Window named
Window1.xaml an
App.xaml file and an
AssemblyInfo.cs/vb file.
If you expand the References node you will see the three main WPF assemblies:
- PresentationCore
- PresentationFramework
- WindowsBase
If you expand the
App.xaml and
Window1.xaml nodes you will see the associated
App.xaml.cs/vb and
Window1.xaml.cs/vb code-behind files. The separation of user interface elements in XAML files and code in associated code-behind files provides physical separation that allows a designer to create the look and feel in XAML and the developer to create the application functionality in code.
Expression Blend Is a WPF Application!
 | |
| Figure 4: Workplace Zoom in Action: Because Microsoft wrote Expression Blend using WPF, its Workspace Zoom feature serves to demonstrate WPF's resizing abilities. |
It's important to realize that Expression Blend is itself a WPF application, meaning that all the features you see in its IDE are part of the WPF technology. With that in mind, one of the first (very cool) features you should check out is Blend's Workspace zoom. To access this feature, select Tools → Options from the Blend menu to display the Options dialog. As shown in
Figure 4, hover your mouse pointer over the Workspace zoom slider control. Click the left mouse button and drag the mouse up towards the top of the screen. The value in the slider increases proportionately—and so do the sizes of the palettes and toolbars—this is WPF resizing at work! After setting the Zoom to the desired setting, close the Options dialog box.
Creating the Main Window
WPF uses the term "Window"
instead of the term "Form" traditionally used in Windows Forms. To start off building the iPhone interface, you could use the existing
Window1.xaml file that was automatically added to the project. However, renaming XAML files in Expression Blend is not implemented well—you can rename the file, but doing so doesn't automatically rename the contained class as it does in Visual Studio.
The easiest way to create the main window is to delete Window1 and add a new window instead. To do this, right-click
Window1.xaml in the Project palette, select Delete, and then confirm the deletion. Next, right-click on the project item (the second item in the Project palette) and select Add New Item from the shortcut menu. In the Add New Item dialog box, select Window, change the Name to
iPhoneWindow.xaml, and click OK.
Your project's
App.xaml file contains a
StartupUri setting that specifies which form gets instantiated at application startup. Previous versions of Expression Blend automatically changed the value of this setting from
Windows.xaml to
iPhoneWindow.xaml for you—but it seems the latest CTP does not! So, double-click the
App.xaml file and change the value of
StartupUri to
iPhoneWindow.xaml. At times, Expression Blend inadvertently deletes the setting from the XAML file. If that happens, press Undo (Ctrl+Z) reenter the value, and then save the file.
 | |
| Figure 5. The Objects and Timeline Palette: This palette displays a visual hierarchical representation of user interface elements and provides an easy way to select a specific element. |
Now you need to set some properties on the Window so it looks more like an iPhone. To do that, double-click
iPhoneWindow.xaml in the Project palette. Next, select the Window in Expression Blend's Objects and Timeline palette by clicking on the Window item as shown in
Figure 5. You will learn more about this palette later on, but for now, just know that it displays a hierarchical view of all the elements contained in your Window, letting you select them easily.
After selecting the Window, click on the Properties palette. This displays an overwhelming number of properties sorted by categories such as Brushes, Appearance, Layout, Common Properties, Text, and Miscellaneous (
Figure 6 shows just a few properties). After using Expression Blend for a while, you get to know which properties are in each category, but until then, the Search box in the Properties panel is a great feature that lets you find any property quickly if you know its name. For example, if you type the word
Height in the Search text box, it shows only the properties that contain the word "height" filtering out all other properties (this is a great new feature that is also included in Visual Studio 2008)!
 | |
| Figure 6. Properties Palette: The Properties palette displays a large number of property settings that can be overwhelming at first. |
Now that you can see the
Height property, set it to
550. To clear out the Search box, click the [X] button to its right. Now enter the word
Width in the Search box and then set the width to
275. Note that both properties are in the Layout category. After you learn this you can just look in the Layout category for these properties.
Shaping the Main Window
 | |
| Figure 7. Standard Form: This is the standard rectangular shaped form with a title bar and control boxes. |
Now run the project (press F5, just as in Visual Studio) to see what you have so far. As shown in
Figure 7, the Window is the same size as the iPhone, but it's the wrong shape, and you need to remove the title bar and control boxes. To do this, close the form by clicking the "X" in the upper right corner, and go back to Expression Blend. With the Window selected in Objects and Timeline, go to the Properties palette and in the Appearance category set the
WindowStyle property to
None. That removes the title bar and control boxes.
The next step is to change the shape of the Window to a rectangle with rounded corners to match that of the iPhone. To create a non-rectangular Window in WPF you must make its background transparent. To do this, under the Appearance category, set the
AllowsTransparency property by clicking the check box. Next, in the Brushes category, select the
Background property. As you can see in
Figure 8, by default, the background is set to a solid color white brush (you will see how other types of brushes are used later on). To change the background to transparent, change the
Background property's alpha value (
A) from
100 percent to
0 percent. Doing this causes the Window to become transparent immediately in the designer.
 | |
| Figure 8. Background Color: By default, the background color is set to solid white. |
Now you need to add non-transparent content to the Window to give it a visual shape. The easiest way to do this is add a Border control (sounds like a political issue) to the Window and round its corners. This requires the use of Blend's Asset Library. As shown in
Figure 9, you can open the Asset Library by clicking the double-headed arrow in the Expression Blend Toolbar on the left side of the IDE. The Asset Library has a convenient Search box that works just like the one on the Property Palette; however, you don't need to use it because you can just click the Border control in the upper left corner of the Asset Library panel. As soon as you select the Border control, the Asset Library closes and the Border is displayed in the Toolbar's most-recently-used assets list as shown in
Figure 10. Before adding the Border to the Window, double-click the Window item in the Objects and Timeline palette. This displays a yellow border around the Window.
 | |
| Figure 9. The Asset Panel: This panel is equivalent to Visual Studio's Toolbox. It allows you to add standard or custom WPF controls to your design surface. |
|
 | |
| Figure 10. Most-Recently-Used Assets: When you select a control from the Asset Library it is automatically added to the Expression Blend Toolbar's most-recently-used assets. |
|
|
Now go back to the most-recently-used list and double-click the Border control. This adds the border to the Window, sized to its full height and width, and removes the original grid from the Window. Although you can't see the Border inside the Window on the design surface, you can see it in the Objects and Timeline palette.
To recreate the silver border of the iPhone, go to the Properties palette, and under the Brushes category select the
BorderBrush property, and then select the
Solid color brush. Next, set the R, G, and B values to
170,
170,
170. You won't see any visible change to the appearance of the Border, because its
BorderThickness is set to zero by default. To change this, go to the Appearance category and set all
BorderThickness settings (top, bottom, left, right) to
5. Finally, to round the corners of the border, set the
CornerRadius property to
30,
30,
30,
30.
Previous Page
