WPF Meets the iPhone : Page 2

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

Next Page