The Windows Phone Design System – Codename Metro is available here:

http://go.microsoft.com/fwlink/?LinkID=189338

This document describes what the product team calls its design language: seven areas of differentiation, and "red threads," or guiding principles. The user experience of Windows Phone 7 is partly inspired by the image of the simple and effective communication style provided by metropolitan public transportation system signage as shown in Figure 2-1.

Figure 2.1. Metropolitan signage as inspiration

The product team describes Metro as

There are key points to take notice of in this description. "Modern and clean" means an application should provide just what is needed to get the task done, whether that task is to provide a movie, the news, or a weather forecast.

"Fast and in motion" means anything other than snappy performance is unsatisfactory. While this may seem obvious, the key here is that a user's perception is what's important. No doubt some tasks take time, so the key is to provide animation and indicators that help shape the user's perception that the application is responsive.

"Content and typography" means that the focus of the application is on the content, not application chrome. Navigate via the content with touch instead of a scroll bar is one example. Typography is incredibly important, so much so that the design team created a special font type for Windows Phone 7 called Segoe WP that looks great onscreen and is pleasing to the eye. Finally, "authentic" means that the application does not try to do more than what it is.

Here is a link to the UI Design and Interaction Guide for Windows Phone 7:

http://go.microsoft.com/fwlink/?LinkID=183218

It cannot be overstated: this document is a must-read for both designers and developers. It covers all of the user experience customizations, input methods, and controls to help developers and designers understand how to build a great looking Windows Phone 7 user interface.

Reviewing this document will help you combine Metro with your company's brand in the best way, resulting in an authentic user experience that is true to your brand and Windows Phone 7. Figure 2-2 is a page from the document with annotations.

Figure 2.2. UI Design and Interaction Guide format

The UI Design and Interaction Guide for Windows Phone 7 v2.0.pdf document prints out in a large format and is best viewed on a large monitor. Each section provides a topic item, such as "Application settings" (as shown in Figure 2-2). It displays an image and textual context for the topic item, along with guidance for designers and developers with do's and don'ts. As far as I am concerned, this document is required reading for anyone who designs or develops a Silverlight-based Windows Phone 7 application.

Windows Phone 7 design resources includes a zip of icons to use directly in your application or as a model for custom application icons you build. The application icons come in .png and XAML vector format. The .png format comes in both a light and dark variant to support the light and dark themes in Windows Phone 7. Figure 2-3 shows the included icons, as well as other sample icons. The image is taken from the Windows Phone Design System – Codename Metro.pdf document.

Figure 2.3. Collage of application icons for Windows Phone 7

The icons are included with the Windows Phone 7 design resources, as well as installed by the Windows Phone Developer Tools, at C:Program Files (x86)Microsoft SDKsWindows Phonev7.0Icons on an x64 Windows machine. The icons come in black and white to match the built-in application themes available in Windows Phone 7.

The most common place to use the icons is for the Application bar if included in your application; however, they be incorporated into the main UI as well.

The design templates for Windows Phone 7.zip file includes 28 Adobe Photoshop files that designers can use to create pixel-perfect UX. Share this download with your Windows Phone 7 designer friends and they will be forever grateful. It takes the guesswork out of how to size the design. It will also save rework for developers, as the templates will be ready to go when imported – more on this in the next section.

One little gem you will not want to ignore is the Design Templates for Windows Phone 7.pdf document that is included in the template download zip located here:

http://go.microsoft.com/fwlink/?LinkId=196225

This document details how to use the templates, which is especially important for controls that are not shipped as part of the Windows Phone Developer Tools. A great time to use this document is when you need to build UI, like a notification, where there isn't an existing control. The guidance is provided to help designers and developers match both visually and in interaction the built-in version of the control that appears in Windows Phone OS 7.0.

This section concludes the overview of the design resources for Windows Phone 7. Please do checkout these resources as it will save you rework later. The next section covers the mechanics of how designers and developers can work together to build a Silverlight for Windows Phone 7 user interface.

As part of user interface development, customizable settings are an important component to the user experience. In the sample source code is the ConfigSettingsDemo project that demonstrates how to create an application service for managing settings beyond the UI. The project contains an application lifetime service named ConfigurationSettingsService, which implements the IApplicationService interface. The project includes a Services folder containing the ConfigurationSettingsService.cs code file as shown in Listing 2-4.

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Net;
using System.Windows;
using System.Xml.Linq;
using ConfigSettingsDemo;

namespace ConfigSettingsDemo.Services
{
  public class ConfigurationSettingsService : IApplicationService
  {
    private string _configSettingsPath = @"Settings";
    private string _configSettingsFileName = " ConfigurationSettings.xml";

    //Event to allow the Application object know it is safe to
    //access the settings
    public event EventHandler ConfigurationSettingsLoaded;

    #region IApplicationService Members
    void IApplicationService.StartService(ApplicationServiceContext context)
    {
      LoadConfigSettings();
    }

    private void LoadConfigSettings()
    {
      //TODO - Load ConfigSettings from isolated storage

      //Check to see if the event has any handler's attached
      //Fire event if that is the case
      if (ConfigurationSettingsLoaded != null)
        ConfigurationSettingsLoaded(this, EventArgs.Empty);
    }

    private void SaveConfigSettings()
    {
      //TODO - Save ConfigSettings to isolated storage
    }

void IApplicationService.StopService()
    {
      SaveConfigSettings();
    }
    #endregion

    //Stores configuraiton settings in
    public Dictionary<string, string> ConfigSettings { get; set; }
  }
}

The sample doesn't implement the actual loading or saving of the data until I cover Isolated Storage later in Chapter 4; however, the service is fully wired up within the application. First we have to list the ConfigurationSettingsService in the App.xaml Application.ApplicationLifetimeObjects element. To do so, we have to make the class available in Xaml by adding an xml namespace:

xmlns:services="clr-namespace:ConfigSettingsDemo.Services"

The service can now be added to the ApplicationLifetimeObjects using the services namespace:

<services:ConfigurationSettingsService />

Adding that line of code completes the changes in App.xaml. In App.xaml.cs the ConfigSettingsDemo.Services is added via a using clause. The App() constructor is modified to get a reference to the ConfigurationSettingsService and to add an anonymous event handler that allows the configuration settings to load before launching the main user interface:

ConfigurationSettingsService service =
  App.Current.ApplicationLifetimeObjects[1]
  as ConfigurationSettingsService;

service.ConfigurationSettingsLoaded += new EventHandler((s, args) =>
{
  // Phone-specific initialization
  InitializePhoneApplication();
});

The splash screen will display until this event fires. As a test, modify ConfigurationSettingsService. LoadConfigSettings() and add this line of code:

System.Threading.Thread.Sleep(10000);

The splash screen will display for about 10 seconds. This demonstrates the effect of the anonymous event handler in allowing the configuration settings to fully load.

This completes our overview of how to create a lifetime service. I will now shift gears to a quick discussion of the events present in App.xaml.cs. The App.xaml.cs code-behind file contains the events and methods associated with the Application object. There are several important methods and events available to applications that we cover in the next few sections.

Besides wiring up the Application_UnhandledException event, the default constructor enables the Application.Current.Host.Settings.EnableFrameRateCounter if the debugger is attached as shown in code Listing 2-3. The frame rate counter is much more valuable on the device than in the emulator and it is something to monitor throughout development as features are added. Figure 2-9 shows the counters:

Figure 2.9. Frame rate counters

Table 2-1 explains the counters identified by letters in Figure 2-9.

Jeff Willcox, a senior software development engineer on the Silverlight phone and devices team at Microsoft, provides some target framerates for good performance on his blog: www.jeff.wilcox.name/2010/07/counters/, but here is a summary:

The frame rate counters can be zero when there isn't an animation playing on the thread at the moment and then spike during an animation or transition. Applications can play a simple continually playing animation to always show a frame rate.

The best way to leverage the frame rate counters and the screen fill rate counter is to continuously monitor them when testing on an actual device. The best time to address frame rate issues is after making a change and it results in a drop in performance. Check out the Creating High Performing Silverlight Applications for Windows Phone Samples for more information on UX performance:

www.microsoft.com/downloads/en/details.aspx?displaylang=en&FamilyID=3a8636bf-185f-

449a-a0ce-83502b9ec0ec

The Application_UnhandledException event is where you can log, report, and display an error message to a user when something unexpected happens in your application that causes an unhandled exception. Applications should customize this event to present a friendly message to the user. Many users welcome the ability to enter feedback regarding a failure so displaying a simple UI to collect information on what the user was doing at the time and recording to a local error log for review can help increase application quality.

In the Chapter 2 Solution's ConfigSettingsDemo project's App.xaml.cs, the Application_UnhandledException event handler is modified to show an error message to the user when an exception is encountered.

private void Application_UnhandledException(object sender,

 ApplicationUnhandledExceptionEventArgs e)
{
  MessageBox.Show(
    "Error!  We logged the error.  Click OK to turn on logging mode.",
    "Error Diagnostics", MessageBoxButton.OKCancel);
  //TODO – Add logging service
  //Log error to logging service here
  //Turn on logging mode for logging service if OK clicked by user
  //Use the Microsoft.Phone.Tasks.EmailComposeTask
  //to collect exception information and offer to the user
  //to send in the exeception info.
  //Set e.Handled to true if recoverable  e.Handled = true;

  if (System.Diagnostics.Debugger.IsAttached)
  {
    // An unhandled exception has occurred; break into the debugger
    System.Diagnostics.Debugger.Break();
  }
}

You can intentionally cause an error to display the error message by clicking the DivideByZero button at the bottom of the main page. Run the application without the debugger connected by deploying the project and running the app manually in the emulator or on a device. You will notice that the error message displays and then the application exits.

The Application_UnhandledException event handler arguments include the familiar sender object and an instance of the ApplicationUnhandledExceptionEventArgs. The ApplicationUnhandledExceptionEventArgs class contains the following properties:

In the previous code, uncomment the line e.Handled = true; and the application will continue to run after the error is thrown. This property gives the application a chance to recover without kicking the user completely out of the application, providing a much better experience.

The comments hint at creating a logging service and adding logging to the application with the implication that the user can choose to upload the logs. Such a logging service could implement IApplicationService, and therefore be available anywhere in the application via the Application. ApplicationLifetimeObjects collection along with the Configuration Service discussed above.

Consider that, in a consumer-oriented application, you may not have a direct relationship to your customer, so you simply cannot ask them what they saw just before the crash. One option is to prompt the user if they would like to send more info. If the user agrees, display the Microsoft.Phone.Tasks. EmailComposeTask to send the Exception object's Message and StackTrace values to the support email alias. I cover the EmailComposeTask in Chapter 4.

Part of the overall user experience is to build applications that can recover as well as give the user an opportunity to provide additional information. Most users will be happy to do so if they like your application and want to help make it better.

The root element of the page declaration includes two attributes related to page layout, SupportedOrientations and Orientation. SupportedOrientations has three options:

The Orientation attribute can be set to any of the SupportedOrientations permissible values. For the ConfigSettingsDemo project, SupportedOrientations is set to PortraitOrLandscape in order to test orientation changes. When SupportedOrientations is set to PortraitOrLandscape, the page automatically changes the display depending on how you hold the phone. We set SupportedOrientations to PortraitOrLandscape for the ConfigSettingsDemo project.

The page does not automatically change the layout of controls. So, if the page has more than 480 pixels of content when held in Portrait mode, the content will run off the screen when held in Landscape mode. An application has an opportunity to react to orientation changes by adjusting the layout content in the PhoneApplicationPage.OrientationChanged event. I cover how to handle orientation changes in detail in Chapter 5, but for this demo, I will use a simple switch statement to reposition the single UI element, the divideByZeroBtnButton object:

private void PhoneApplicationPage_OrientationChanged(object sender,

 OrientationChangedEventArgs e)
{
  switch (e.Orientation)
  {
    case PageOrientation.Landscape:
      divideByZeroBtn.Margin = new Thickness(12, 200, 235, 0);
      break;
    case PageOrientation.LandscapeLeft:
      divideByZeroBtn.Margin = new Thickness(12, 200, 235, 0);
      break;
    case PageOrientation.LandscapeRight:
      divideByZeroBtn.Margin = new Thickness(12, 200, 235, 0);
      break;
    //default is Portrait
    default:
      divideByZeroBtn.Margin = new Thickness(12, 400, 235, 0);
      break;
  }
}

The system tray is the bar across the top of the screen in Portrait mode that displays the connection signal strength, Wi-Fi, and current time. According to the UI Design and Interaction Guide for Windows Phone 7, the system tray or status bar is 32 pixels high in Portrait mode and 72 pixels width in Landscape mode. Developers can set it to not display by editing the XAML for the page to this value:

shell:SystemTray.IsVisible="False"

It is not recommended to hide the SystemTray, as users consider it to be valuable information. Letting the SystemTray display is helpful to the user who wants to see the current time without having to exit the application. Probably the most common reason to hide the system tray is for a XNA Game Studio game.

The Application Bar is located at bottom of the screen to provide menu icon buttons for actions and views related to the content presented on the page. You can put up to four icon buttons at any time. If you have additional actions, you can place them into the Application Bar Menu instead. The Application Bar Menu item text will run off the screen. The recommendation is between 14 and 20 characters.

By default, XAML for the Application Bar is available in a new page but commented it out. The default XAML is un-commented for the ConfigSettingsDemo project. Two of the Application Bar IconButton images that are installed by default in the C:Program Files (x86)Microsoft SDKsWindows Phonev7.0Icons folder are dropped into an Images folder for the project and set as the icon for two of the objects. Figure 2-10 shows the Application Bar after swiping up on the Application Bar to display the Application Bar menu items.

Figure 2.10. Expanded Application Bar

If you click the back button when the Application Bar is expanded, the Application Bar will close down. The application bar height is 72 pixels both in portrait and landscape mode and cannot be changed. The Application Bar can be displayed and hidden.

Developers should resist the temptation to use the Application Bar for navigation. Developers should not put a Home button into the Application Bar either, because it breaks the back stack. Users should navigate your application via the content and the hardware Back button.

The NavigationService has several properties and methods to aid in application navigation listed in Table 2-2.

The NavigationService provides full control over application flow but the most common member called is the Navigate method. In this chapter's solution PageNavigation project, MainPage contains a TextBlock that when clicked navigates to Page2.xaml:

private void NavToPage2_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
  this.NavigationService.Navigate(new Uri("/Page2.xaml", UriKind.Relative));
}

When the project is run and the TextBlock with the Text "Navigate to Page 2" is clicked, the event fires and Page2.xaml is displayed. Developers can pass parameters to the navigation target using standard Query string parameters with the question mark and paramname=paramdata notation like this:

this.NavigationService.Navigate(
  new Uri(String.Format("/Page2.xaml?page2data={0}",textBox1.Text), UriKind.Relative));

Pass multiple parameters like this: Page2.xaml?ParamName1=ParamData1&ParamName2=ParamData2 and so on with an ampersand between parameter values. Generally parameters consist of keys or object IDs such that the page can look up the full object or object collection of data for rendering.

In Table 2-3, the events like Navigating and Navigated provide opportunities to display progress to the user as navigation events fire. To test this, add the below line of code to the constructor for Page2.xaml:

System.Threading.Thread.Sleep(5000);

The effect is that when the TextBlock is clicked, the UI appears frozen for about five seconds before the navigation occurs. To provide feedback to the user, a ProgressBar is added to the UI and IsIndeterminate is set to False and Visibility to Collapsed.

Navigation.Navigating and Navigation.Navigated are wired up to an event handler in the PhoneApplicationPage_Loaded event in MainPage.xaml.cs in the PageNavigation project. The Navigating event handler enables and makes visible the ProgressBar. The Navigated event handler hides the ProgressBar and sets IsIndeterminate to false. Here is the code from the PageNavigation project's MainPage.xaml.cs code file:

private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)
{
  NavigationService.Navigating += new navigation.NavigatingCancelEventHandler

(NavigationService_Navigating);
  NavigationService.Navigated += new navigation.NavigatedEventHandler

(NavigationService_Navigated);
}

void NavigationService_Navigating(object sender, navigation.NavigatingCancelEventArgs e)
{
  progressBar1.Visibility = Visibility.Visible;
  progressBar1.IsIndeterminate = true;
}

void NavigationService_Navigated(object sender, navigation.NavigationEventArgs e)
{
  progressBar1.Visibility = Visibility.Collapsed;
  progressBar1.IsIndeterminate = false;
}

The performance of the ProgressBar is choppy because, by default, it runs on the UI thread, which is put to sleep in the Page2 constructor. I cover the PerformanceProgressBar in Chapter 5 when I go over the Silverlight for Windows Phone toolkit.

This sample so far shows how to use the NavigationService to navigate to a page, as well as hook into navigation related events. The next section covers the PhoneApplicationPage overrides available that allow additional hooks into the navigation system.

There are two PhoneApplicationPage method overrides available to further plug into the navigation system:

Both methods take a NavigationEventArgs object. This object includes two properties:

The OnNavigatedFrom override is the method where you can take any final actions when the page has become inactive. The OnNavigatedTo override is called when the page becomes active in the navigation frame. Developers can access query parameters on OnNavigatedTo with code similar to the following from MainPage.xaml.cs in the PageNavigation project:

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
  if (NavigationContext.QueryString.ContainsKey("page2data"))
    dataFromMainPageTextBlock.Text = NavigationContext.QueryString["page2data"];

  base.OnNavigatedTo(e);
}

In this code, we first check to make sure that the parameter is present and then retrieve the value. Otherwise, if you attempt to retrieve data for a non-existing key, it results in an error. We will explore navigation further in Chapters 5 and 6, but many of the examples leverage navigation so this section provides an overview. This completes the discussion on the navigating events.

Up to now, this chapter focused on overall design and then dove into project organization covering the Application object, PhoneApplicationFrame, PhoneApplicationPage, and an overview of the navigation framework. In the next section I step back a bit and provide an overview of the .NET Framework for Silverlight and programming XAML, to help prepare for more advanced topics such as data binding, control templates, and control customization.

As you can see in Figure 2-11, the XAML markup for the XAMLBasics project includes several namespace imports using xmlns, including the xmlns:phone import that is used to declare the root element phone:PhoneApplicationPage. What may not be completely obvious at first glance is that PhoneApplicationPage is a class in the Microsoft.Phone.Controls namespace, contained in the Microsoft.Phone.dll assembly reference. Here is the xmlns import for the phone namespace:

xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

In the xmlns import above, you see the .NET namespace, Microsoft.Phone.Controls, and the assembly name, Microsoft.Phone. This corresponds to a using clause in .NET code:

using Microsoft.Phone.Controls

The point is that markup written in XAML corresponds to objects in C# code. For example, you can create a button in C# using the code Button btn = new Button(). In XAML, you create a button with this markup: <Button />. You can essentially consider XAML as a human editable serialization format for .NET Framework for Silverlight.

With this background in hand, you can deduce that making custom C# classes available within XAML is as simple as creating a xmlns namespace import, which is correct. One consideration is that for a .NET classes to be brought in to a XAML markup page, it must have a parameter-less constructor so that you can simply declare it as <foo /> in XAML without needing parameters in the constructor, which is not supported.

With the appropriate namespaces in place, creating a user experience in XAML is simple XML editing with XML Elements and Attributes. Elements generally represent a class or object such as a Button declared as <Button />. To set properties on the Button, you can add XMLAttributes such as Height and Width : <Button Height="40" Width="100" />.

Some properties are of type System.Object or some other complex type, which could be difficult to set via an attribute depending on the value. The Button 's Content property is of type System.Object, which means that it can point to pretty much anything. For a Button 's Content property, it can be set as an attribute like so:

<Button Height="40" Width="100" Content="Hello Reader" />

For a not so simple type, The Button.Content property can be set using XML property element syntax:

<Button>
    <Button.Content>
        <MediaElement />
    </Button.Content>
</Button>

Remember that the Button.Content property is of type System.Object, so you could actually play a video as the "content" of a Button object via a MediaElement. With property element syntax, more complex objects such as a MediaElement playing a video named video1.wmv can be set as the value for the Content:

<Button>
    <Button.Content>
        <MediaElement Source="video1.wmv" />
    </Button.Content>
</Button>

Other properties can be set to an enumerated type such as a System.Windows.Media.Color value configured on a Brush type such as a SolidColorBrush object. In the example below, how does XAML know what do to with the text value "Blue" in this example?

<Button Background="Blue" />

Intuitively, the developer understands what this means, however, there is a little bit of magic to support this simplified syntax. In the XAML above, the text "Blue" is converted to a System.Windows.Media.Color value via a built in System.ComponentModel.TypeConverter for the Brush type. Without the type converter, the full property element syntax is required:

<Button>
  <Button.Background>
    <SolidColorBrush Color = "Blue" />
  </Button.Background>
</Button>

TypeConverter objects are intrinsic to straightforward XAML programming. Developers can create their own custom TypeConverter objects to simplify data binding between two XAML objects with two different types allowing the developer to avoid cluttering event handlers in the code-behind file for a XAML page.

The last XAML concept I will cover in this overview is markup extensions. Markup extensions are similar to type converters in that they allow for more straightforward XAML development. Markup extensions allow a string value to be converted into a configured object, which can greatly reduce the amount of XAML that must either be hand-written or generated by a tool.

In order to identify and parse a markup extension, since it is configured as attribute property text, a special syntax is required that uses curly braces: attribute="{ extension goes here}". The curly braces tell the XAML parser that a markup extension is inbound for parsing.

The two most common markup extensions are used for specifying a resource for an object property or attribute value and for configuring data binding for an object property or attribute value. Listing 2-5 shows the MainPage.xaml file for the XAMLBasics project where you can see Style attributes configured using the markup extension syntax:.

<TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION"
   Style="{StaticResource PhoneTextNormalStyle}"/>

<phone:PhoneApplicationPage
    x:Class="XAMLBasics.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"

FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">
  <phone:PhoneApplicationPage.Resources>
    <Style x:Key="TestTextBlockStyle" TargetType="TextBlock">
      <Setter Property="Foreground" Value="#FFD49696"/>
      <Setter Property="FontSize" Value="16"/>
    </Style>
  </phone:PhoneApplicationPage.Resources>

  <!--LayoutRoot is the root grid where all page content is placed-->
  <Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!--TitlePanel contains the name of the application and page title-->
    <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
      <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION"
                       Style="{StaticResource PhoneTextNormalStyle}"/>
      <TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0"
                       Style="{StaticResource PhoneTextTitle1Style}"/>
    </StackPanel>


    <!--ContentPanel - place additional content here-->
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" >
      <TextBox Height="72" HorizontalAlignment="Left" Margin="12,66,0,0"
       Name="textBoxOriginal" Text="Original" VerticalAlignment="Top"
       Width="374" />
      <TextBlock Height="30" Margin="35,185,0,0" Name="textBlock1"
       Text="{Binding Text, ElementName=textBoxOriginal}"
       VerticalAlignment="Top" Width="374"
       Style="{StaticResource TestTextBlockStyle}" />
      <TextBox Height="72" HorizontalAlignment="Left" Margin="12,280,0,0"
        Text="{Binding Text, ElementName=textBoxOriginal, Mode=TwoWay}"
        VerticalAlignment="Top" Width="374" Name="textBox2" />
    </Grid>
  </Grid>
</phone:PhoneApplicationPage>

<Button Style="{StaticResource CustomButtonStyle}" />

The next question is where is CustomButtonStyle defined? It can be defined either in App.xaml or the current XAML page in the Resources collection like this:

<phone:PhoneApplicationPage.Resources>
    <Style x:Key="CustomButtonResource" TargetType="Button" >
        <Setter Property="Margin" Value="20,20,0,0" />
    </Style>
</phone:PhoneApplicationPage.Resources>

Figure 2-12 shows the UI in the emulator for the XamlBasics project.

Figure 2.12. XAML Basics UI

The UI is pretty simple, but it helps me explain the concept of markup extensions for resources and data binding. The TextBlock has a style resource applied to it via a markup extension that makes the text very small and a reddish color. Here is the style resource wrapped in the PhoneApplicationPage.Resources element from Listing 2-1:

<phone:PhoneApplicationPage.Resources>
  <Style x:Key="TestTextBlockStyle" TargetType="TextBlock">
    <Setter Property="Foreground" Value="#FFD49696"/>
    <Setter Property="FontSize" Value="16"/>
  </Style>
</phone:PhoneApplicationPage.Resources>

The style is named TestTextBlockStyle via the x:Key attribute. The style is applied to the TextBock via the StaticResource markup extension as shown here:

<TextBlock Height="30" Margin="32,187,50,0" Name="textBlock1" ....
Style="{StaticResource TestTextBlockStyle}" />

This syntax applies to all types of resources, not just element styles. It allows for consistent UX by sharing resources across an application. Resources can be stored at the Page level or the Application level in App.xaml. Resources can also be stored in external files in Resource Dictionaries. I explore the StaticResource markup extension further when I cover Expression Blend later in this chapter, but for now this section provides solid background to help you understand how to program in XAML with resources.

Let's now move on to an overview of the data binding markup extension with Element Data binding. Element data binding allows one control's property to data bind to another control's property value. The stylized TextBlock and the TextBox below it in Figure 2-1 databind to the first TextBox via element data binding. Run the project and enter text in the first TextBox, notice the other two change values as you type.

Element Data binding is a powerful concept, but at its simplest level it saves the developer from writing simple event handlers that do nothing but copy values from one control to another. How this works is that when you type in the first TextBox on the screen shown in Figure 2-12, the reddish text TextBlock and the TextBox below it get the same value automatically via Element Data binding. Here is the XAML for the TextBlock that uses the Binding markup extension to element databind:

<TextBlock Height="30" Margin="32,187,50,0" Name="textBlock1"
  Text="{Binding Text, ElementName=textBoxOriginal}"
  VerticalAlignment="Top" Width="374"
  Style="{StaticResource TestTextBlockStyle}" />

The Binding markup extension first identifies the target property that the property is binding to, in this case TextBlock.Text is binding to TextBox.Text. The ElementName attribute value within the Binding markup extension specifies textBoxOriginal.Text as the target control/property that textBlock1.Text is databound to by default as one-way or read-only data binding.

The third control on the page in Figure 2-12, the TextBox, also databinds to the first TextBox as shown here:

<TextBox Height="72" HorizontalAlignment="Left" Margin="12,280,0,0"
  Text="{Binding Text, ElementName=textBoxOriginal, Mode=TwoWay}"
  VerticalAlignment="Top" Width="374" Name="textBox2" />

The Binding markup extension for the textBox2 TextBox looks very similar to the TextBlock's Binding, except that it also specifies Mode=TwoWay in the Binding markup extension. This means that if you type a value in the third TextBox named textBox2, the same value propagates back to the original TextBox named textBoxOriginal, which then updates the TextBlock's value via one-way Element data binding.

Data binding in XAML is an incredibly powerful construct that extends beyond Element data binding to object data binding via collections of data retrieved from a server via web service calls. I explore data binding further in a later section in this chapter on Expression Blend.

Combining TypeConverters with Element Data binding can provide a powerful XAML construct that avoids writing what would normally be a lot of boilerplate code. As an example, you could Element Databind a TextBlock to the Position property of a MediaElement that is playing either an audio or video segment. There is a type mismatch between the TextBlock.Text property's type of String and the MediaElement.Position property's type of TimeSpan. You can get around this by writing a simple event handler that manually converts from a TimeSpan value to a String value. A more elegant way to handle this is to create a simple ValueConverter that is applied as part of the Element Data binding markup extension. TypeConverter objects are used by the XAML parser at compile time; however, ValueConverter objects apply at runtime for converting values when data binding. I cover ValueConverters in detail in Chapter 6.

This section concludes the XAML overview. The next section dives into the class model available within Silverlight for Windows Phone and is the underlying objects behind the XAML markup.

Silverlight for Windows Phone supports 2D graphics primitives such as rectangles, ellipses, lines, and paths. Generally these objects have been used in Silverlight to build up images, separate UI areas, as well as incorporated within controls. One of the key reasons to use XAML primitives is to take advantage of the infinite scaling capabilities of vector-based graphics.

On Windows Phone 7, UI design is all about the content, not UI "chrome" – so you won't see a heavy use of UI control chrome in most applications. Where graphics primitives can be useful on Windows Phone 7 is in game development when you need to draw game scenes for 2D game development.

For game development, vector graphics primitives or raster images can be used to draw the scene – so which one should you use? Vector-based graphics require a level of CPU processing to convert from a vector to raster format so that the GPU can render the scene. Therefore, wherever possible, it is recommended to use a raster format like .png files to avoid the additional format conversation, saving battery. Given the fixed screen size of a mobile device, little fidelity is lost by sing raster graphics.

I cover the graphics primitives in more detail with a sample application called GraphicsPrimitives in the Chapter 2 Solution. Figure 2-13 shows the UI.

Figure 2.13. Graphics Primitives UI

Listing 2-6 shows the XAML markup for the GraphicsPrimitives project.

<phone:PhoneApplicationPage
    x:Class="GraphicsPrimitives.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

  <!--LayoutRoot is the root grid where all page content is placed-->
  <Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="*"/>

</Grid.RowDefinitions>

    <!--TitlePanel contains the name of the application and page title-->
    <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
      <TextBlock x:Name="ApplicationTitle" Text="Chapter 2"
        Style="{StaticResource PhoneTextNormalStyle}"/>
      <TextBlock x:Name="PageTitle" Text="graphics primitives"
         Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
    </StackPanel>

    <!--ContentPanel - place additional content here-->
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
      <Ellipse Height="146" HorizontalAlignment="Left" Margin="12,28,0,0"
         x:Name="ellipse" Stroke="White" StrokeThickness="3"
         VerticalAlignment="Top" Width="176" />
      <Rectangle x:Name="Rectangle" Fill="LightGray" HorizontalAlignment="Left"
         Margin="12,200,0,227" Stroke="White" Width="145"/>
<Image HorizontalAlignment="Left" Margin="21,213,0,0"
         x:Name="image1" VerticalAlignment="Top"
         Source="images/bookcover.jpg" Stretch="None" />
<Path x:Name="Line" Data="M245,28 L404,200" Fill="#FFF4F4F5"
         HorizontalAlignment="Right" Height="173" Margin="0,28,51,0"
         Stretch="Fill" UseLayoutRounding="False" VerticalAlignment="Top"
         Width="160" Stroke="White" StrokeThickness="5" />
      <Path Data="M406,307 L244,306 L239,187" Fill="White"
         HorizontalAlignment="Right" Margin="0,200,49.5,227" Width="161.5"
         Stretch="Fill" Stroke="White" UseLayoutRounding="False" Name="Pen" />
      <Path x:Name="pencil"   Height="55" Margin="24,0,19,93.143"
          Stretch="Fill" Stroke="White" UseLayoutRounding="False"
          VerticalAlignment="Bottom" Data="M31,396 C36.294918,415.62234 34.544609,412.77231

 57,424
 C67.599434,429.29971 74.964737,436.59296 87,439 C91.685699,439.93713 97.165527,439 102,439
C131.96695,439 133.0285,434.60718 158,419 C181.28416,404.44739 192.78926,421.84195 221,443
C236.51602,454.63702 255.19547,455.07272 274,430 C290.42596,408.09872 279.30313,393.7677

 319,407
C334.2662,412.08875 343.0755,439.55231 359,441 C369.82889,441.98444 372.32379,433.58371

 379,425
C383.57141,419.12247 397.35007,414.1167 406,417 C419.57794,421.52597 422,469.74692 422,412
C428.6496,413.32993 435.72543,412.92343 443,413"/>
<Canvas Height="104" HorizontalAlignment="Left" Margin="6,495,0,0" Name="canvas1"
              VerticalAlignment="Top" Width="444">
        <Ellipse Canvas.Left="75" Canvas.Top="24" Height="60"
           x:Name="ellipseCanvas1" StrokeThickness="1" Width="76" Stroke="White" />
        <Ellipse Canvas.Left="290" Canvas.Top="24" Height="60"
           x:Name="ellipseCanvas2" StrokeThickness="1" Width="76" Stroke="White" />
      </Canvas>
    </Grid>
  </Grid>
</phone:PhoneApplicationPage>

The Ellipse and Rectangle controls are pretty straightforward except that, as a developer, you might be wondering what is setting the top and left values for the Ellipse and Rectangle objects at the top. How are they positioned?

<Ellipse Height="146" HorizontalAlignment="Left" Margin="12,28,0,0"
    x:Name="ellipse" Stroke="White" StrokeThickness="3"
    VerticalAlignment="Top" Width="176" />
<Rectangle x:Name="Rectangle" Fill="LightGray" HorizontalAlignment="Left"
    Margin="12,200,0,227" Stroke="White" Width="145"/>

Since I mentioned game development earlier, it is worth spending a little bit of time on the layout system. Silverlight includes a layout system as part of the rendering engine that places objects based on the Margin property for the Grid and StackPanel layout controls. The Margin property takes four values representing the distance from the Left, Top, Right, and Bottom sides of the containing control, in this case the ContentPanelGrid object. Notice that just the first two values are configured for the Ellipse. If the other values are not set, the Width and Height values determine sizing for the object.

For game development, it would be odd to draw game scenes using just Margin values to place game sprites or images. Silverlight includes another layout control, the Canvas object, which allows the developer to set Top and Left directly on the object. This may seem strange because graphics primitives and even controls do not include a Top or Left property. Check the Properties Tool window in Visual Studio 2010 for any object to confirm.

We added a Canvas at the bottom of the Grid and place two Ellipse objects in it. Here is the markup for the Ellipse objects.

<Canvas Height="104" HorizontalAlignment="Left" Margin="6,495,0,0" Name="canvas1"
        VerticalAlignment="Top" Width="444">
  <Ellipse Canvas.Left="75" Canvas.Top="24" Height="60"
      x:Name="ellipseCanvas1" StrokeThickness="1" Width="76" Stroke="White" />
  <Ellipse Canvas.Left="290" Canvas.Top="24" Height="60"
      x:Name="ellipseCanvas2" StrokeThickness="1" Width="76" Stroke="White" />
</Canvas>

The Ellipse objects are placed using Attached Property syntax, i.e., Canvas.Top and Canvas.Width properties. Attached properties are a special dependency property that allows the attached property to be configured on and apply to a contained object in the XAML tree. I cover attached properties in the next section, but they provide a powerful extensibility mechanism without having to create custom objects. Given that Silverlight objects tend to have many more properties then their Windows Forms counterparts already, attached properties allows controls to take advantage of additional properties without having to actually declare them in every object

The last item I'll cover here are the two <Path /> objects named Pen and Pencil. The controls have those named because that is the tool I used to draw them in Expression Blend. I cover Expression Blend later in this chapter. The Path objects include a Data property that is set to what looks like a code.

The Data property is set to a value that follows the syntax of the Path Mini-Language. The Path Mini-Language has a similar syntax as the Scalable Vector Graphics (SVG) markup Path object. Please refer to a SVG reference for more info on the syntax if interested. Otherwise, use Expression Blend to visually draw objects without worrying about the underlying Data value generated for the Path object.

The other object that is part of the GraphicsPrimitives project is the Image object. It takes an image file such as a .png as the value for its Source property. It can be configured to stretch and scale an image by setting the Stretch property to Fill or UniformttoFill. The Image object is the most common graphics primitive a developer will work with. I cover working with the Image object in detail in Chapter 6.

This wraps up the overview of the .NET Framework for Silverlight and XAML. Now let's dive into the details on controls.

Silverlight for Windows Phone 7 includes a rich set of controls that are already templated with the Metro theme" by default. Figure 2-14 shows a quick search of controls available on my laptop.

Figure 2.14. Avaialble controls on the author's laptop

Some of the controls are "sub" controls that are generally associated with a primary control. As an example, the ListBoxItem control always sits within a ListBox control. The ZoomBox control is part of the Bing Maps Map control, etc. Still, as you can see, there are a rich set of controls available for Windows Phone 7 developers.

The Chapter 2 solution in the code download has a project named BuiltInControls to demonstrate a few of the controls that ship with the Windows Phone Developer Tools. One control in Figure 2-4 that may not be on your system is the SmoothStreamingMediaElement control. This control plays media like the built-in MediaElement, but it also supports IIS Smooth Streaming adaptive streaming technology, which allows you to chunk up a media stream to different sizes depending on available bandwidth conditions. Smooth Streaming is especially important on mobile devices where bandwidth can vary greatly by optimizing the user experience for available conditions. You can learn more about Smooth Streaming at IIS.net. I cover media playback in Chapter 6.

There's an additional control available as part of the Microsoft Advertising SDK for Windows Phone 7. You can download it here:

www.microsoft.com/downloads/en/confirmation.aspx?FamilyID=b0f00afc-9709-4cc2–ba2c-57728db6cbd6

The download installs the control and API documentation here:

C:Program Files (x86)Microsoft Advertising SDK for Windows Phone 7

All that's needed is to add a reference to the control and a few lines of code to generate revenue from your free applications. I cover how to integrate advertising into your application in Chapter 6. Other controls shown in Figure 2-14 are pulled in by the Silverlight for Windows Phone 7 Toolkit, which is covered below in Chapter 5.

The Canvas object may feel most comfortable to developers who are not familiar with WPF or Silverlight and have built UIs in technologies similar to .NET Windows Forms. The Canvas container enables absolute positioning of UI elements – very similar to Windows Forms or other layout technologies.

The StackPanel arranges controls side-by-side, either vertically or horizontally, via the Orientation property, taking into account the configured Margin and Padding for each control nested within the StackPanel control.

The Grid control is similar to an HTML table in laying out controls. It supports multiple rows and columns in the RowDefinitions and ColumnDefinitions collections. By default, if a control is nested inside a Grid without any rows or columns defined, the control renders in the upperleft-hand corner, which represents row zero and column zero.

When you define columns and rows on a Grid, you can specify the Width in the ColumnDefinition object for a column and the Height in the RowDefinitions object for a row in pixels. You can also leave Width and Height set at their default value of Auto or specify Auto explicitly for each.

Leaving Width and Height set to Auto causes the Grid to size rows and columns equally as much as possible; however, the ultimate size is determined by the layout system, which takes into account the size of the content. For example, if a Grid has two rows defined with the default of Auto, but the content in the first row has a minimum size that is twice that of the content in the second row, the layout system causes the first row to be twice the width of the second.

The Grid supports a much more powerful method of sizing columns and rows: star sizing. When you specify a star (*) as the Width or Height of a column or row, the column or row receives a proportional amount of space relative to the other columns or rows, respectively. This XAML has the same effect as setting Width and Height to the default of Auto:

<Grid.ColumnDefinitions>
  <ColumnDefinition Width="*"/>
  <ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
   <RowDefinition Height="*"/>
   <RowDefinition Height="*"/>
</Grid.RowDefinitions>

It gets interesting when you prepend an integer to * for Width or Height. For example, to give up to twice the amount of available space to the second column and second row, specify 2* for both the Width and Height, like this:

<Grid.ColumnDefinitions>
  <ColumnDefinition Width="*"/>
  <ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>

<Grid.RowDefinitions>
  <RowDefinition Height="*"/>
  <RowDefinition Height="2*"/>
</Grid.RowDefinitions>

Note that I said "up to twice the amount." That is because the layout system takes into account the minimum size required for content. If the second column wants twice as much space as the first column, the content in the first column may prevent the second column from getting all the requested space, depending on the minimum width values configured on the content in the first column.

WPF introduced the concept of Triggers, which allowed actions to happen such as starting an animation StoryBoard object by clicking a button without writing any C# code. Behaviors were introduced in Silverlight 3 and take the concept of Triggers even further while including full Expression Blend support with drag-and-drop support to apply behaviors.

Behaviors allow developers to add logic to a control visually in Blend. You can think of them as code-less events or actions meaning no C# code is needed to utilize a Behavior. To find behaviors in Expression Blend, click on the Assets tab and select Behaviors to filter to the list of items. Figure 2-15 shows a list of available behaviors.

Figure 2.15. Expression Blend built-in behaviors

Additional Silverlight behaviors can be found at the Expression Blend Gallery located here:

http://gallery.expression.microsoft.com/en-us/site/search

For the LayoutControls sample project, three TextBlock controls are put into the UI of MainPage. xaml with text of Canvas, StackPanel, and Grid, respectively. Three pages are added to the project named CanvasPage.xaml, StackPanelPage.xaml, and GridPage.xaml. Switch back to MainPage. xaml to drag-and-drop a NavigateToPageAction behavior onto the TextBlock with the text Canvas.Figure 2-16 shows the Properties window for the behavior. The EventName property indicates the event to kick off the action, in this case touching the label will navigate to the page configured for the TargetPage property.

Figure 2.16. NavigateToPageAction behavior configuration

Without writing any code, when the CanvasTextBlock is touched, the MouseLeftButtonDown event fires and the PhoneApplicationFrame will navigate to the TargetPage of CanvastPage.xaml. We do the same for the other two labels so that they navigate to the StackPanelPage.xaml and GridPage.xaml pages respectively. Here is a snippet of the XAML added to the Canvas textbox as a result of dragging-and-dropping the behavior:

<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Canvas"

 VerticalAlignment="Top" Margin="12,43,0,0">
  <Custom:Interaction.Triggers>
    <Custom:EventTrigger EventName="MouseLeftButtonDown">
      <ic:NavigateToPageAction TargetPage="/CanvasPage.xaml"/>
    </Custom:EventTrigger>
  </Custom:Interaction.Triggers>
</TextBlock>

Under the hood, behaviors are just XAML markup programmed visually with Expression Blend. The navigation actions do not include animations but this quick demo touches upon just the beginning of what Silverlight Behaviors can offer in terms of simplifying code with standardized behaviors and actions. Chapter 5 covers how to add animations to page transitions.

Now that the navigation has been visually programmed with Behaviors, it is time to add the layout controls starting with the Canvas control to CanvasPage.xaml. By default the Canvas control is not listed in the Asset Bar. As covered in Chapter 1, click and hold the chevron at the bottom of the Asset Bar on the left to pop-out the search UI, or click and hold on the Grid icon in the Asset Bar and the UI to switch to Canvas is presented.

Double-click on Canvas to add it to the CanvasPage.xaml UI. Type Shift-V to go back to Selection mode and then right-click on the Canvas and select Auto-Size

Move the Ellipse to about the middle of the ContentPanelGrid 's area. Notice that the Margin value did not change as what is normally the case when objects are placed within a Grid layout control. Because the Ellipse is within a Canvas layout control, objects are absolutely positioned using Canvas.Left and Canvas.Top attached properties instead of via Margin. Here is the XAML for the ellipse:

<Ellipse Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100" Canvas.Left="176"

 Canvas.Top="279"/>

The Canvas layout control operates differently with respect to the Silverlight Layout system. Controls are absolutely positioned within a Canvas, making it the ideal layout control for Silverlight-based game development. Developers can apply Margin to controls within a Canvas but the Margin is applied relative to the Canvas.Top and Canvas.Left properties, not to the bounds of the Canvas, which is different behavior compared to a Grid.

Grid Page

For GridPage.xaml, we don't add an additional Grid, because there is already a Grid control named ContentPanel by default when adding a new page to the project. Click and hold the Rectangle to switch to Ellipse, and double-click as before to add the Ellipse to the Grid. By default it is placed in Grid.Row = 0 and Grid.Column=0. Initially the ContentPanel does not have any additional Rows or Columns so let's add a couple visually to make a tic-tac-toe type grid layout as shown in Figure 2-17.

Figure 2.17. GridPage.xaml at desig time

The Ellipse is placed in the center position in the Grid control resulting in this Xaml:

<Ellipse Fill="#FFF4F4F5" Stroke="Black" Grid.Column="1" Grid.Row="1" Width="100"

 Height="100"/>

We see two additional attached properties used to position the Ellipse within the Grid Control: Grid.Column and Grid.Row.

StackPanel Page

Double-click on StackPanel to add it to the StackPanelPage.xaml UI. Press Shift-V to go back to Selection mode, and then right-click on the StackPanel and select Auto-Size

The StackPanel control does not support absolute positioning like the Canvas. Developers can use Margin and Padding to adjust the display within the StackPanel. Remove two of the six Ellipses so that four are stacked. Multi-select the remaining four Ellipse controls and then set the Top and Bottom Margin values to 10. This results in the Ellipses separating from each other a bit but still within the behavior of the StackPanel.

Now set a Width on all four Ellipse controls of 100 pixels to remove the stretch. By default, we now have four circles stacked and spaced. Finally, add a 100 Left Margin to the second Ellipse and 100 Right Margin to the third Ellipse resulting in Figure 2-18.

Figure 2.18. StackPanel.xaml at design time

The layout controls provide an immense amount of flexibility within the layout system. Developers should use the controls to lay out UI as much as possible initially. As an example, use a Grid with Rows and Columns to separate UI first. For items that are lined up either horizontally or vertically, use a StackPanel. Adjust HorizontalAlignment and VerticalAlignment as needed.

Once the general layout is in place, Apply Margin and Padding as needed to space controls within containers. Resist the temptation to set Width and Height on every control initially. Width and Height override all other layout configurations and can result in odd layout behavior where controls appear to be cut off. Only set Width or Height when needed to ensure correct display of content.

With all that said, the Silverlight Layout System takes CPU cycles to determine positioning. In most cases following the above recommendations works fine and provides maximum flexibility with great performance. Only in cases when frame rates are dropping should a developer consider absolute positioning to reduce layout calculations and even then the gains may be marginal. In the next section, I shift gears over to another major topic in XAML development: data binding.

In addition a separate project named DemoLiveData is available to provide an object collection and an xml data file to work with for the rest of this chapter. The project contains two simple classes, a Customer class and a Customers class to serve as the live data. Listings 2-7 and 2-8 show the Customer and Customers classes.

namespace SampleData.LiveData
{
  public class Customer
  {
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string PhoneNumber { get; set; }
    public string Address { get; set; }
    public string City { get; set; }
    public string State { get; set; }
    public string Zip { get; set; }
  }
}

using System.Collections.Generic;

namespace SampleData.LiveData
{
  public class Customers
  {
    private List<Customer> _customerList;

    public Customers()
    {
      _customerList = new List<Customer>()
      {
        new Customer(){FirstName="Rob",LastName="Cameron",PhoneNumber="555-555-5555",
                        Address="123 Main Street", City="Atlanta",State="GA", Zip="30042"},
        new Customer(){FirstName="Amanda",LastName="Cam",PhoneNumber="555-555-5555",
                        Address="123 Main Street", City="Philadephia",State="PA",

 Zip="19111"},
        new Customer(){FirstName="Anna",LastName="Ron",PhoneNumber="555-555-5555",
                        Address="123 Main Street", City="New York",State="NY", Zip="10001"},

new Customer(){FirstName="John",LastName="Smith",PhoneNumber="555-555-5555",
                        Address="123 Main Street", City="Chicago",State="IL", Zip="20011"},
        new Customer(){FirstName="Jane",LastName="Doe",PhoneNumber="555-555-5555",
                        Address="123 Main Street", City="San Francisco",State="CA",

 Zip="30333"},
        new Customer(){FirstName="Daniel",LastName="Booth",PhoneNumber="555-555-5555",
                        Address="123 Main Street", City="Dallas",State="TX", Zip="79999"},
        new Customer(){FirstName="Arthur",LastName="Olson",PhoneNumber="555-555-5555",
                        Address="123 Main Street", City="Seattle",State="WA", Zip="50000"},
        new Customer(){FirstName="Janet",LastName="Rich",PhoneNumber="555-555-5555",
                        Address="123 Main Street", City="Portland",State="OR", Zip="43334"},
        new Customer(){FirstName="Janus",LastName="Poor",PhoneNumber="555-555-5555",
                        Address="123 Main Street", City="Sacramento",State="CA", Zip="85755"},
        new Customer(){FirstName="Alice",LastName="Mer",PhoneNumber="555-555-5555",
                        Address="123 Main Street", City="Kansas City",State="KA", Zip="48488"}
      };
    }
    public List<Customer> CustomerList { get { return _customerList; } }
  }
}

To instantiate the data, simply create the Customers class and data bind to the CustomerList. The XML file named ApressBooks.xml lists details on about 20 books that have been published by Apress over the years. I won't list the full XML file, but here is a summary of the schema with one of the sample book data present:

<ApressBook>
   <ID>4</ID>
   <ISBN>1-4302-2435-5</ISBN>
   <Author>Jit Ghosh and Rob Cameron</Author>
   <Title>Silverlight Recipes: A Problem-Solution Approach, Second Edition</Title>
     <Description>Silverlight Recipes: A Problem-Solution Approach, Second Edition is your

practical companion to developing rich, interactive web applications with Microsoft's

latest technology. This book tackles common problems and scenarios that on-the-job

developers face every day by revealing code and detailed solutions. You'll quickly be able

to integrate real-world, functioning code into your applications—and save hours of coding

time.</Description>
   <DatePublished>2010-07-15T00:00:00</DatePublished>
   <NumPages>1056</NumPages>
   <Price>$49.99</Price>
</ApressBook>

The next three sections cover the scenarios listed previously and demonstrated in the Chapter 2 solution. That includes a project named Data Binding, which includes a MainPage.xaml and a folder named pages that includes three pages to cover each topic that follows.

Element data binding is when a property on one control data binds to the value of a property on another control. To demonstrate this, we add a Rectangle and a Slider control to the page named ElementDataBindingPage.xaml with the Rectangle on the left and the Slider control oriented vertically.

The experience we want to create is that when the Slider is positioned, the Opacity on the Rectangle is modified. The Slider has a MinimumValue of zero and MaximumValue of one, with a default of one. The LargeChange property is changed to .1 and the SmallChange property is changed to .01 to keep the value consistent with what are valid values for the Opacity property.

What we want to do is data bind the Rectangle'sOpacity value to the Value property of the Slider. To do this, select the Rectangle object and click the small button to the right of the field in the Properties Window to bring up the menu shown in Figure 2-19 to select the Element Property Binding... menu item.

Figure 2.19. Expanded menu options for the Opacity property

The menu shown in Figure 2-19 is mostly the same for any Property selected for a control. When Element Property Binding... is clicked, the Artboard switches to Element Property Binding mode, allowing the developer to select a control to then choose a property. Figure 2-20 shows the UI. Notice that it indicates that the Slider control will be given a name of slider. This is because the control must be named for Element Binding to work.

Figure 2.20. Element Binding mode with mouse over the slider

Once the Slider control is clicked, it is named slider and you can select the property to bind to as shown in Figure 2-21.

Figure 2.21. Element Binding – Create Binding dialog

The Slider.Value property is the desired property so click OK to create the element binding. The XAMLor the Rectangle is updated to include element binding for the Opacity value as shown here:

<Rectangle Fill="#FF0000E0" Height="134" Margin="30,44,0,0" Stroke="Black"

 VerticalAlignment="Top"
 HorizontalAlignment="Left" Width="188" Opacity="{Binding Value, ElementName=slider}"/>

The Binding markup extension indicates that the Opacity property for the Rectangle should get its value from the UI element named "slider." Markup extensions are identified by the braces within the quotes as covered above in the XAML overview. Binding is a class in the .NET Framework for Silverlight that connects the property, in this case Opacity, to the data source, in this case the Value property on the Slider control.

Data binding to collection of objects is a very typical scenario. Silverlight for Windows Phone 7 has rich support for data binding to object collections, as is the case with Silverlight. We continue to customize the DataBinding project by adding a ListBox onto the ObjectDataBindingPage.xaml ContentPanel Grid. Add a reference to the DemoLiveData project to provide an object data source.

In Expression Blend, right-click on the ListBox and select the "Data bind ItemSource to Data..." menu item. Click the "+CLR Object" button in the Create Data Binding dialog shown in Figure 2-22.

Figure 2.22. Create Data Binding dialog

This brings up the Create Object Data Source dialog shown in Figure 2-23, where we select SampleData.LiveData.Customers and click OK.

Figure 2.23. Create Object Data Source dialog

This returns us back to the Create Data Binding dialog with an object data source pointing to the custom object collection. Select the CustomerList Field to data bind it to the ItemSource as shown in Figure 2-24 and click OK.

Figure 2.24. Create Data Binding with Object data source

Figure 2-25 shows the ListBox now data bound to the object data source.

Figure 2.25. Data-bound ListBox

In Figure 2-25, the data source is configured but it just displays the ToString() value for the Customer object, which defaults to the full type name. This is because an ItemTemplate is not configured on the ListBox. The ItemTemplate is used to layout the individual Customer records. Listing 2-9

<phone:PhoneApplicationPage
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:SampleData_LiveData="clr-namespace:SampleData.LiveData;assembly=DemoLiveData"
    x:Class="DataBinding.ObjectDataBindingPage"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
    shell:SystemTray.IsVisible="True">

<phone:PhoneApplicationPage.Resources>
    <SampleData_LiveData:Customers x:Key="CustomersDataSource" d:IsDataSource="True"/>
  </phone:PhoneApplicationPage.Resources>

  <phone:PhoneApplicationPage.FontFamily>
    <StaticResource ResourceKey="PhoneFontFamilyNormal"/>
  </phone:PhoneApplicationPage.FontFamily>
  <phone:PhoneApplicationPage.FontSize>
    <StaticResource ResourceKey="PhoneFontSizeNormal"/>
  </phone:PhoneApplicationPage.FontSize>
  <phone:PhoneApplicationPage.Foreground>
    <StaticResource ResourceKey="PhoneForegroundBrush"/>
  </phone:PhoneApplicationPage.Foreground>

  <!--LayoutRoot is the root grid where all page content is placed-->
  <Grid x:Name="LayoutRoot" Background="Transparent" DataContext="{Binding

 Source={StaticResource CustomersDataSource}}">
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!--TitlePanel contains the name of the application and page title-->
    <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
      <TextBlock x:Name="ApplicationTitle" Text="Chapter 2 - DATA BINDING"

 Style="{StaticResource PhoneTextNormalStyle}"/>
      <TextBlock x:Name="PageTitle" Text="object data binding" Margin="9,-7,0,0"

 Style="{StaticResource PhoneTextTitle1Style}"/>
    </StackPanel>

    <!--ContentPanel - place additional content here-->
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
      <ListBox Margin="12,0" ItemsSource="{Binding CustomerList}"/>
    </Grid>
  </Grid>
</phone:PhoneApplicationPage>

The Expression Blend work results in the following XAML changes:

It is important to note that by setting the DataContext on the LayoutRootGrid, it makes the data source collection, individual records, and fields available to nested XAML controls automatically. As an example, an ItemTemplate can be added to the ListBox that Binds TextBlock control Text properties to the FirstName and LastName properties of the Customer class just by specifying the data field name in the Binding marketup extension. I demonstrate how to do this visually next.

Right-click on the ListBox, select Edit Additional Templates, then Edit Generated Items, and finally click Create Empty. This puts the Artboard into template editing mode with an empty Grid. Drag two TextBlock controls next to each other with some spacing to fit the FirstName and LastName fields. Next click the more actions button next to the Text property in the Properties Window for the first TextBlock to bring up Figure 2-26.

Figure 2.26. Create data binding

Expression Blend understands that we are creating an ItemTemplate to display individual Customer records in the ListBox that is data bound to the CustomersList so the fields available for controls in the ItemTemplate are Customer class fields. We select FirstName for the left TextBlock and LastName for the second TextBlock. Adding the ItemTemplate results in the much more useful display of first name and last name for each record. Here is the resulting XAML:

<DataTemplate x:Key="CustomersListBoxDataTemplate">
  <Grid>
    <TextBlock Margin="0" TextWrapping="Wrap"
    Text="{Binding FirstName}"
    d:LayoutOverrides="Height" Width="75"/>
    <TextBlock Margin="0,0,-148,0" TextWrapping="Wrap"
    Text="{Binding LastName}"
    d:LayoutOverrides="Height" HorizontalAlignment="Right" Width="118"/>
  </Grid>
</DataTemplate>

The first step to data binding to XML is to obtain the XML file, which can be retrieved from a remote server or embedded as part of the application. For this demonstration, the XML file is retrieved from the application, because I don't cover remote server access until Chapter 4.

There are two ways to parse XML data in Silverlight: the XmlReader class and LINQ to XML, which is one of the new technologies that became available in .NET Framework 3.5 and later. The XmlReader class is a fast-forward–only, non-caching XML parser. For processing large XML files, XmlReader is better suited than LINQ to XML for performance reasons. LINQ to XML provides rich object-based XML processing using the common LINQ syntax.

The work in this section is focused on the XmlDataBindingPage.xaml page, which has two ListBox controls: a ListBox named XmlDataLinqListBox that is loaded via data binding with LINQ to XML and another ListBox named XmlDataReaderListBox that is loaded via XmlReader in Code.

The ApplicationBar control is enabled with two icon buttons, one to switch between the two ListBox controls by alternatively hiding and making visible the controls. The other icon button loads data into the XmlDataReaderListBoxListBox. We configure an icon for the icon button that loads the data via XmlReader by simply browsing the list of icons available as resources and configure the Refresh icon. The other icon was created by combining the default next and back icons into one. The second icon button switches between the two ListBox controls using the Visibility property.

Now that we have the sample project set up, the next two sections cover the code to load the XML data using both methods.

http://msdn.microsoft.com/en-us/library/cc189053(VS.95).aspx

XmlReaderSettings XmlRdrSettings = new XmlReaderSettings();
XmlRdrSettings.XmlResolver = new XmlXapResolver();
XmlReader reader = XmlReader.Create("ApressBooks.xml",
XmlRdrSettings);

http://msdn.microsoft.com/en-us/library/system.xml.xmlreadersettings(VS.95).aspx

using System;
using System.Collections.Generic;
using System.Linq;
using System.Xml;
using System.Xml.Linq;
using System.Collections;

namespace DemoLiveData
{
  public class ApressBooks
  {
    private List<ApressBook> _apressBookList;
    public List<ApressBook> ApressBookList
    {
      get
      {
        if (null == _apressBookList)
          RetrieveData();
        return _apressBookList;
      }
    }

    private void RetrieveData()
    {
      XmlReaderSettings XmlRdrSettings = new XmlReaderSettings();
      XmlRdrSettings.XmlResolver = new XmlXapResolver();
      XmlReader reader = XmlReader.Create("ApressBooks.xml", XmlRdrSettings);

      XDocument xDoc = XDocument.Load(reader);

      _apressBookList =
        (from b in xDoc.Descendants("ApressBook")
         select new ApressBook()
         {
           Author = b.Element("Author").Value,
           Title = b.Element("Title").Value,
           ISBN = b.Element("ISBN").Value,

Description = b.Element("Description").Value,
           PublishedDate = Convert.ToDateTime(b.Element("DatePublished").Value),
           NumberOfPages = b.Element("NumPages").Value,
           Price = b.Element("Price").Value,
           ID = b.Element("ID").Value
         }).ToList();
    }
  }
}

using System;

namespace DemoLiveData
{
  public class ApressBook
  {
    public string Author { get; set; }
    public string Title { get; set; }
    public string ISBN { get; set; }
    public string Description { get; set; }
    public DateTime PublishedDate { get; set; }
    public string NumberOfPages { get; set; }
    public string Price { get; set; }
    public string ID { get; set; }
  }
}

XmlReader

For this section, the XML records are added to the ListBox.Items collection for the XmlDataReaderListBox on the XmlDataBindingPage.xaml page without using an ItemTemplate. In Silverlight 4 XPath is supported so that you can create a Data Template that parses the bound XML object but for now we just bind the XML object as is without a template. Here is the code to load up the data:

private void XmlReaderIconButton_Click(object sender, EventArgs e)
{
  XmlReaderSettings XmlRdrSettings = new XmlReaderSettings();
  XmlRdrSettings.XmlResolver = new XmlXapResolver();
  XmlReader reader = XmlReader.Create("ApressBooks.xml", XmlRdrSettings);

  // Moves the reader to the root element.
  reader.MoveToContent();

  while (!reader.EOF)

{
    reader.ReadToFollowing("ApressBook");
    // Note that ReadInnerXml only returns the markup of the node's children
    // so the book's attributes are not returned.
    XmlDataReaderListBox.Items.Add(reader.ReadInnerXml());
  }
  reader.Close();
  reader.Dispose();
}

Figure 2-27 shows both methods in action.

Figure 2.27. Xml Data Binding UI

In this section I covered the Silverlight for Windows Phone 7 data binding capabilities. When live data is not available, developers can take advantage of the sample data capabilities available in Expression Blend, which I cover in the next section.

This menu item enables direct modification of the control for maximum customization. There are two sub-menu items "Create Empty..." and "Edit a Copy..." to create a customized control. Selecting the "Create Empty..." menu item is essentially starting from scratch. The template contains a Grid to start create a new control UI.

Most customizations start with the "Edit a Copy..." menu item, which extracts the Control's internal visual tree, including visual states and animations, and makes it available for customization. This is very similar to inheriting from an existing control in other languages but much more powerful.

The Edit Additional Templates menu item can have one or more options depending on the control. For example, a ListBox control has the following options:

The Generated Items ItemTemplate is the template applied to the data bound list of items. Without customization, the ListBox displays the .ToString() value for the data bound type. This is the most common – and necessary – customization for a ListBox control.

The ItemContaineStyle is also a customization applied to the data bound list of items. This style is applied to the container element generated for each item. For a ListBox, the generated container control is a ListBoxItem control. I don't cover ItemsContainerStyle in this section. I will discuss customizations in Chapter 5 when I cover the Visual State Manager.

The last additional template for the ListBox is the ItemsPanel template, which just has a "Create Empty..." option. This template customizes the container that all of the ListBoxItem controls exist in.

As mentioned, different types of controls can have different options for additional templates to edit. As another example, the progress bar does not have any additional templates to edit but the Button Control has a ContentTemplate that customizes content rendering for the Button control by applying a data template to the content.

I discuss editing the control template and additional templates in the next couple of sections to demonstrate these concepts with the ListBox, Button, and ProgressBar controls.

The ListBox control needs to data bind with a collection of data to be interesting. We create a sample data source at the Project level named ProductsSampleData that has 100 items.The sample data text, a url, and an image in order to make it interesting. Next up is working with the ItemTemplate in the first section.

Working with ItemTemplate

The first step we take is to drag the Products collection to the ListBox, which data binds the collection and creates an ItemTemplate automatically that can be used as a starting point as shown in Figure 2-34.

Figure 2.34. Generated ItemTemplate for Products sample data

Here is the XAML markup for the ItemTemplate that we customize in Blend shortly:

<DataTemplate x:Key="ProductsItemTemplate">
  <StackPanel>
    <TextBlock Text="{Binding Description}"/>
    <TextBlock Text="{Binding Name}"/>
    <TextBlock Text="{Binding Price}"/>
    <Image Source="{Binding ProductImage}" HorizontalAlignment="Left" Height="64" Width="64"/>
    <TextBlock Text="{Binding Url}"/>
  </StackPanel>
</DataTemplate>

To edit the template, click the drop-down arrow next to (ListBox) at the top of the ArtBoard under where the filenames are displayed and select Edit Additional Templates

The first modification is to add 40px bottom margin to the root StackPanel to create space between the items. Next the items are re-arranged to present a better display with the item name, price, image, and URL at the top. Do this by re-arranging the controls in the first item visually.

Note

Because it is a repeated template for each item, the ItemTemplate is dynamically applied to the items below the first item as the first item is visually edited.

To improve the display and better utilize space, multi-select the Name and Price fields, right-click, select Group Into, and pick a container control. Any one of the containers can be used to arrange the Name and Price fields, but choose the StackPanel with Orientation set to Horizontal in this case to flow the content across the screen. Grab the lower right-hand corner of the Image to increase the Image size. We next apply built-in styles to further refine the UI. Finally, set the DescriptionTextBox TextWrapping property to Wrap. Figure 2-35 shows the final modifications to the generated template shown in Figure 2-34.

Figure 2.35. Customized ItemTemplate for Products sample data

This completes our overview on working with the ItemTemplate customization for the ListBox. Let's turn to the ItemsPanel customization next.

<ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
        <StackPanel/>
</ItemsPanelTemplate>

In this section I cover some additional control customizations available to developers. Next we transform a standard rectangle Button to an ellipse Button via a custom control template.

Custom Control Template

To get started, drag a Button on the ArtBoard, right-click on the Button, and select Edit Template, then "Edit a Copy..." to go into control template editing mode. The ButtonBackground Layer is a Border. You may be tempted replace the Border with an Ellipse control, but that would make the necessary changes much more complex due to animation dependencies and the fact that the Border is actually a container control whereas the Ellipse is not.

Instead, make a simple modification by adjusting the CornerRadius property for the Border by setting it to 50. The Button now has rounded corners and can take on various elliptical shapes depending on the Height and Width properties. Figure 2-36 shows the Button in action.

Figure 2.36. Custom Button control template

There are much more complex modifications possible that involve editing the Visual States defined in the template. I cover modifying states in Chapter 5, when I discuss the Visual State Manager. For this section I will expose you to control customizations by modifying the internal visual tree via a control template.

We start by creating a new project named PanoramaApp using the Windows Phone Panorama Application project template. This template is a fully functioning application that is based on the Panorama control leveraging sample data.

A 2272 wide × 1704 in height photo from a recent vacation is added to the project. We modify the photo to be 800 pixels in height, maintaining aspect ratio, in Paint.NET to prevent stretching the image when the project is debugged. In the emulator, the image fits nicely but the White text doesn't show very well against the image – it needs more contrast. Open the image in any editing too, such as Paint.NET and add a layer that is 30% Black over the entire of the image to provide more contrast with the White text while allowing the background image to show through when the project is run again in the emulator.

Notice though that, when you swipe over to the second pane, part of the text is clipped in the Title, as shown in Figure 2-42. The lower case 'l' and 'I' are clipped at the top.

Figure 2.42. Clipped Title text

To fix this, you can modify the control template in Expression Blend. Select the Panorama control, right-click, select Edit Template, Edit a Copy to create a Style resource. Click OK to the dialog box to go into Style editing mode. Select the TitleLayer in the Objects and Timeline Tool Window. Adjust the Top Margin to slide the title down a bit by changing the value from −76 to −68. When you run the application, this puts the top of the 'l' right against the top of the screen to fully display the text. Otherwise, the application behaves just as before.

Let's say you want to put your company name and logo as the title for a Panorama application. Once again, we can edit the Panorama control's template to create a custom Style to support this. First we add a new wrinkle to the sample code. The image for the Title in the Panorama will be an Apress logo. In the spirit of customizing the design to fit the logo, the Panorama background is changed to a solid color to a yellow similar to Apress' logo yellow.

In Expression Blend, the Device tab shown in Figure 2-43 can help you test out your application by changing the Orientation, Theme, and Accent color at design time. It also allows you to choose to preview the application in the emulator or device.

Figure 2.43. Device tab in Expression Blend

Switching the Theme from the default of Dark to Light changes the font from White to Black. The darker font of the Light theme looks much better; however, this is a setting that a user can change on a whim. By default Windows Phone 7 obey the theme settings automatically because of the default control styles applied to controls.

Applications can override the default theme by setting custom values for Foreground color and the like on individual controls but that can be error prone. A better way to do this is to redefine the built-in Metro styles to force the foreground color to Color.Black regardless of theme setting, making the change in effect for the entire application with just a few lines of code.

In the App Application objectconstructor, remove the pre-defined resource and then add back the resource with modifications. Here is example code to redefine the pre-defined styles:

this.Resources.Remove("PhoneForegroundColor");
this.Resources.Add("PhoneForegroundColor",  Colors.Black);

this.Resources.Remove("PhoneAccentColor");
this.Resources.Add("PhoneAccentColor",Color.FromArgb(200,200,200,200));

this.Resources.Remove("PhoneBackgroundColor");
this.Resources.Add("PhoneBackgroundColor ",  Colors.White);

Now that the resources are redefined to better fit the branding colors, we will now convert the title from a text title to an image. You can make this modification two different ways. The simplest method is to set Panorama.Title to an Image without editing the control template using code like this:

<controls:Panorama.Title>
  <Image Source="images/panorama_title.jpg" Height="80" Width="420" Margin="-20,80"/>
</controls:Panorama.Title>

The other way to modify the Title is to edit the Panorama's TitleTemplate by right-clicking on the Panorama, select Edit Additional Templates, and then Create Empty... to enter template editing mode in Expression Blend. This updates the Panorama's TitleTemplate to point to a resource:

<controls:Panorama  Background="#FFFFCC00"
TitleTemplate="{StaticResource PanoramaTitleDataTemplate}">

Here is the XAML for PanoramaTitleDataTemplate:

<DataTemplate x:Key="PanoramaTitleDataTemplate">
  <Grid>
    <Image HorizontalAlignment="Left" VerticalAlignment="Top"
       Source="images/panorama_title.jpg" Margin="-20,80,0,0"/>
  </Grid>
</DataTemplate>

A nice application customization is to make the Panorama.Background image dynamic. The Title property can be databound to a Brush type, which can be a png image or color Brush or it could simply be set when the page is Loaded or Activated via a background thread. If the Image is downloaded dynamically, you would not want to perform the download in the main UI thread. For the same reason, the background image could be configured on a Timer control as well.

The Panorama control lands on the most left PanoramaItem by default. Many applications implement a navigation menu on the left most pane but want the user to land on a PanoramaItem with content by default. We modify the PanoramaImageTitle project by adding a PanoramaItem to the left of the two existing PanoramaItem objects and mock up a menu.

The new PanoramaItem is named MenuPanoramaItem. The second PanoramaItem with the first set of content is named DefaultPanoramaItem, and will be displayed when the application first loads. A line of code is added to the MainPage_Loaded event to display the DefaultPanoramaItem upon load:

MainPanorama.DefaultItem = DefaultPanoramaItem;

When the user loads the application, it lands on the content page as before, but when wiping right the user will find the second set of content and then swiping again brings up the menu. The circular page scrolling in the Panorama control makes discoverability of the navigation menu via the menu very easy.

Now that I've discussed the Panorama control, let's switch over to the other major navigation control, the Pivot control.

Like the Panorama control, the Pivot control supports having a Background configured as a Brush (Color or Gradient), as well as an image in the same way that a Panorama can be configured. This includes data binding the background image as well as dynamically loading the image.

The PivotTitle property can be modified exactly like the Panorama as demonstrated in the section above covering either modifying the TitleTemplate or simply setting the value onto the Title property via element property syntax.

The Pivot control exposes a SelectedItem property that can be set in order to display a particular PivotItem other than the default leftmost PivotItem. Simply provide a name to the Pivot and PivotItem controls so that they can be identified in code. This code in MainPage_Loaded in MainPage.xaml sets the second PivotItem as the default:

MainPivot.SelectedItem = SecondPivotItem;

In the next section I conclude this chapter with a comparison of the Pivot Control vs. the Panorama control.

As mentioned, the Panorama and Pivot controls have a lot in common in terms of base functionality. Both controls mimic the built-in native control versions in terms of behavior and animations yet provide a simple programming interface with strong customization available. The controls include built-in touch navigation with support for flick and pan for a great navigation experience.

From a programming standpoint both controls function like tab controls with an Items collection for either Panorama or PivotItem controls allowing rich content presentation in compact amount of space. Both controls allow the developer to focus on building the content within the Item control panes, which is usually a matter of customizing a ListBox control, greatly simplifying programming tasks while providing a rich user experience.

The controls themselves can be data bound with content template properties and item container styles for the Title, Header, and Item Panel, and so on. The controls also include full Blend support such as control template modification and visual states.

In terms of usage, the vast majority of Windows Phone 7 Silverlight applications will open to an initial page containing either a Panorama or Pivot control. For rich initial content presentation, the Panorama control is usually the better choice. For denser content presentation, or larger amounts of content, the Pivot control is ideal.

Many applications will consist of a root Panorama control with a PanoramaItem dedicated to a menu. The menu items then use the navigation framework to navigate the UI to sub-pages consisting of Pivot controls or plain old page depending on content needs. The hardware Back button provides navigation back to the root Panorama control and is in incredibly important part of the navigation framework.