Creating Application Resources
Now it's time to change the Window background to black—and as you do so, you will learn about application resources. To do this, go to the Brushes category and select the Background
property. By default, there is no brush set for this property, so select the Solid Color
brush. By default, it sets the background color to black, which is what you want.
There are four main ways to change the color of the solid brush:
- Change the RGB value (currently 0, 0, 0)
- Change the hex value (currently #FF000000)
- Click in the color editor to select a new color
- Click the eye dropper and use it to select a new color
There are several places where the black background you just selected is used in the iPhone user interface. Rather than manually hard-coding each user interface element to black, you can create a resource that you can reuse throughout the application—and you can change it in one place to modify the appearance of all elements that use this resource. This is similar to the styles that are used in Microsoft Word.
To convert the background color to a resource, click the double arrow button to the immediate left of the hex value text box (it has the tool tip "Convert color to resource"). This launches the Create Color Resource dialog as shown in Figure 11
. In this dialog, change the Name
to something friendlier, such as MainPanelBackColor
. Because you need to reuse this resource elsewhere in the application, select the "Define in → Application" radio button and then click OK to save. As Figure 12
shows, the new resource is displayed in the Brushes category under the list of color resources. Behind the scenes, this resource is stored as XML in your project's App.xaml
Adding Event Handlers
|Figure 11. Create Color Resource: Launch this dialog to define a new color resource.||
|Figure 12. Resource List: Rather than hard-coding aspects of your user interface's visual appearance you can define resources that can be reused throughout your application and changed globally.||
Now you're ready to run the application (press F5) to see what it looks like so far. As you can see, it's starting to more look like an iPhone, but you may notice there is no obvious way to close or move the window, because the title bar and control boxes have been removed. You can address this by adding code to the Window's code-behind file. For now, just close the form by pressing Alt+F4.
Up to this point you have not added any code to the Window's code-behind file. Expression Blend does not have a C# or Visual Basic code editor, so you need to do all code editing in Visual Studio. To do that, open your Expression Blend project in Visual Studio by going to the Project palette, right-clicking the iPhone solution, and selecting "Edit in Visual Studio"
from the shortcut menu.
|Figure 13. Object Events: You can see all events for an object by clicking the Events button in the Properties palette.|
After you've launched Visual Studio, go back to Expression blend. To add an event handler to the window, make sure you've selected Window
in the Objects and Timeline palette, and then go to the Properties palette. As shown in Figure 13
, you can see the list of events for the Window by clicking the lightning bolt button at the top right of the Properties palette. To create code that closes the window when you right-click on it, find the MouseRightButtonDown
event and double-click its associated text box. Go over to Visual Studio and you will see the iPhoneWindow
code-behind file has a new handler method called Window_MouseRightButtonDown()
Add the following code to this method.
// in C#:
' in Visual Basic:
Now go back to Expression Blend again and this time, create a handler for the MouseLeftButtonDown
event by double-clicking the event in the Properties palette. Go back to Visual Studio and enter the following code in the Window_MouseLeftButtonDown()
// in C#:
' in Visual Basic:
Type Ctrl+S in Visual Studio to save all changes. To test out these new handler methods, you can either press F5 in Visual Studio or in Expression Blend to build and run the project. You should now be able to left-click on the Window and drag it around. You should also be able to right-click the form to close it.
Adding a Layout Grid
There are two golden rules of WPF user interface layout—don't hard code the position of user interface elements and don't hard code their sizes (if you want them to resize). This allows you to take advantage of the excellent resizing functionality of WPF.
WPF has a set of layout containers that allow you to lay out the user interface with resorting to hard-coded positions or sizes. You commonly nest layout panels inside each other to get the positioning you need. It's a completely different process for laying out a user interface in WPF than it is with Windows Forms. With WPF, you need to think ahead and determine which layout containers you need to position and resize the controls as needed.
As shown in Figure 1
, there are five main areas of the iPhone interface:
- The upper panel
- The section that displays the signal strength, current time and battery life
- The main application button area
- The lower button panel that contains the Phone, Mail, Safari, and iPod buttons
- The bottom panel
The first (and most powerful) layout container you will use is the Grid. This layout control is similar in concept to the Windows Forms TableLayoutPanel, but with greater functionality. You can define any number of columns and rows in a Grid, although you should typically only place one user interface element per Grid cell.
When you create a new Window in Blend or Visual Studio it automatically contains a Grid as the highest level layout container. However, when you added the Border to the Window earlier in this article, it removed the Grid and replaced it with the Border. To add a Grid inside the Border control, go to the Expression Blend Objects and TimeLine palette and double-click the Border. This places a yellow highlight bar around the element. Next, go to the Asset Library and select the Grid, and then double-click the Grid in the most-recently-used list. This adds the Grid inside the Border as indicated by the hierarchical representation under Objects and Timeline.
Now go to the Properties palette (which should automatically have the Grid selected) and change the name of the Grid to grdMainPanel
. This also changes the name of the Grid to grdMainPanel
in the Objects and Timeline palette, making it easier to identify.
You can now add five rows to grdMainPanel
to mark out the five sections of the iPhone interface. To do this, go to the top of the Properties palette and select the Properties button (to the immediate left of the Events button). Next, locate the RowDefinitions
property and click its associated ellipses button which launches the RowDefinition Collection Editor. Click the "Add another item" button five times to add five rows to grdMainPanel
|Figure 14.Display Grid Columns and Rows: Double-clicking a Grid control in the Objects and Timeline palette displays the Grid's columns and rows.|
Select each Row and set its Height
property to the following values:
- Row 0: 50 pixels
- Row 1: 20 pixels
- Row 2: 1* (star)
- Row 3: 85 pixels
- Row 4: 80 pixels
Click OK to save changes, then go to the Objects and Timeline palette and double-click the Grid. This displays the Grid rows as shown in Figure 14
Note that pixels
in this context, refer to device independent pixels
or device independent units
that are approximately 1/96 inch, regardless of the monitor or screen size resolution. The star
setting is a percentage-based setting. In this case, Row 2 takes up all the available space left over after the other four rows are sized. You can also specify fractions of star value such as .5*