Press the Windows button on the emulator to bring up the Start screen. Then press the

Change the background to Light, and change the accent color to Red (note that you may have to scroll to locate the red accent color).

Press the Windows button again to go back to the Start screen. Note that your application is no longer running (it stopped when you pressed the Windows button), so go back to Visual Studio 2010 Express and press F5 to re-launch your application.

Note that you can see the same controls as before, except the ellipse that you drew from code is nowhere to be found. Figure 9-3 shows two versions of the same application side by side, each with a different theme.

Figure 9.3. Two themes applied to the same Theming application example

By now, you have probably guessed that the reason the ellipse is not visible is that the application paints it white and then displays it on a white background. But how did the other controls manage to show up on the white background when they originally were white themselves? And how can you make the ellipse behave the same way?

The answers lie in a Windows Phone 7 concept known as theme awareness. By default, Windows Phone 7 controls are theme-aware and adjust their appearance based on the theme selected on the device. Problems arise when the color values are hardcoded in the control, as you have done for the ellipse and the rectangle border. In the next few steps, you'll correct the issue of hardcoded colors, first with a designer and the second in code.

If it's still running, stop the application. Open MainPage.xaml in the Design view, and select the rectangular shape. Press F4 to bring up the Properties window, and then click the diamond symbol to the right of the Stroke property.

From the pop-up dialog, click Apply Resource. From the next dialog, double-click the PhoneAccentBrush setting to use the currently selected accent color to draw a rectangle.

Now, adjust the color of the ellipse to the currently selected accent color. Since you drew the ellipse from code, open the MainPage.xaml.cs file and change the following line of code from

Color backgroundColor = Color.FromArgb(255, 255, 255, 255);

to

Color backgroundColor =
(Color)Application.Current.Resources["PhoneAccentColor"];

Launch Visual Studio 2010 Express and select the Windows Phone Application template. Change the Project Name to DetectTheme, select OK, and Visual Studio will set up a new project.

Open MainPage.xaml in Design mode, and add a TextBlock to the page. For this walk-through, you will simply modify the message within this TextBlock; for real-world applications, you will probably choose to do something a bit more exotic than this, such as show a different image.

Open MainPage.xaml.cs (right-click MainPage.xaml in Solution Explorer and choose View Code) and add the following code to the MainPage constructor, right below the InitializeComponent() method:

Visibility v = (Visibility)Resources["PhoneLightThemeVisibility"];
        if (v == System.Windows.Visibility.Visible)
        {
                textBlock1.Text = "Let there be light!";
        }
        else
        {
                textBlock1.Text = "It's dark!";
        }

Create a new Windows Phone project and choose Windows Phone Panorama Application as the template to use for the application. While this is an extremely powerful approach, this type of template creates a Model-View-ViewModel (MVVM)-based project, which has a significant learning curve and is quite different from the way you have developed Windows Phone 7 applications so far in this book (for an example of an MVVM application, see Chapter 3).

Add the Panorama control to the Visual Studio Toolbox (via right-clicking the Toolbox and navigating to the assembly containing this control) and then drag and drop it to your application.

Add a new page to your application that contains a Panorama control. This is perhaps the easiest way to quickly incorporate the Panorama control inside our application; this is the approach you will pursue in this section.

Launch Visual Studio 2010 Express and select the Windows Phone Application template. Change the Project Name to Panorama, select OK, and Visual Studio will set up a new project.

Right-click the project name in Solution Explorer and select Add

You now have a page with the Panorama control in it within the application, but there is no way to get to it. You could either add navigation from MainPage.xaml or simply make PanoramaPage1.xaml the main page within the application. To implement the second choice, rename the current MainPage.xaml to MainPage1.xaml and then rename PanoramaPage1.xaml to MainPage.xaml. Now the Panorama page should be the default page that comes up when the application is launched.

It is time to customize and add content to the Panorama control. Go ahead and change the <controls:Panorama... element to the following:

<controls:Panorama Title="airport" Foreground="Red">

To add new tabs or containers to the Panorama control, you would use the <controls:PanoramaItem... XAML element. Go ahead and add a third PanoramaItem that will contain a text box and a button to search for departures to a specific city right above the closing tag for the Panorama control </controls:Panorama>. Notice that as you add PanoramaItem, your designed view reflects the changes.

<!--Panorama item three-->
<controls:PanoramaItem Header="search" Foreground="{StaticResource
PhoneAccentBrush}">
      <Grid>
        <TextBox Height="72" HorizontalAlignment="Left" Margin="-12,-2,0,0"
      Name="textBox1" Text="TextBox" VerticalAlignment="Top" Width="271" />
        <Button Content="Search" Height="72" HorizontalAlignment="Left"
      Margin="242,-4,0,0" Name="button1" VerticalAlignment="Top" Width="160"
/>
     </Grid>
</controls:PanoramaItem>

Make some minor adjustments to the first two Panorama items to bring them in line with the rest of the UI layout. Replace the top two <controls:PanoramaItem... elements with the following XAML:

<!--Panorama item one-->
                  <controls:PanoramaItem Header="arrivals" Foreground="{StaticResource
PhoneAccentBrush}">
                        <Grid>
                        </Grid>
                  </controls:PanoramaItem>

                  <!--Panorama item two-->
          <controls:PanoramaItem Header="departures" Foreground="{StaticResource
                PhoneAccentBrush}">
                <Grid/>
                  </controls:PanoramaItem>

Finally, add a background image to the Panorama control. The recommended size for the background image is 800 pixels high (of course, that's the standard resolution of Windows Phone 7 devices) and 2,000 or fewer pixels wide. To specify the background image, add the following XAML tag right below the <controls:Panorama ... tag:

<controls:Panorama.Background>
      <ImageBrush ImageSource="PanoramaBackground.jpg"></ImageBrush>
</controls:Panorama.Background>

Press F5 to run the application. You should see a screen that looks very similar to Figure 9-4 (minus the background image, perhaps). Flicking the Panorama control from right to left should allow you to see Arrivals and Departures plus a separate tab designated for searching airport schedules.

Launch Visual Studio 2010 Express and select the Windows Phone Application template. Change the Project Name to NavigationTest, select OK, and Visual Studio will set up a new project.

Right-click the project name in Solution Explorer and select Add

Open MainPage.xaml in Design view. From the toolbox, drag and drop the HyperlinkButton control. With that control selected, press F4 to display its properties and change the contents say "Go to Page1."

Open Page1.xaml in the Design view, and add a button to that page from the toolbox. Edit the contents of the button to say "Go Back to Main Page."

Add a TextBlock underneath the button on Page1.xaml. This TextBlock will be used to show the parameters passed in to this page.

Open MainPage.xaml and double-click the hyperlink on that page. Implement the hyperlinkButton1_Click event handler with the following code:

private void hyperlinkButton1_Click(object sender, RoutedEventArgs e)
{
 NavigationService.Navigate(new Uri("/Page1.xaml", UriKind.Relative));

}

Open Page1.xaml and double-click the button on that page. Implement the button1_Click event handler with the following code:

private void button1_Click(object sender, RoutedEventArgs e)
{
     NavigationService.GoBack();
}

Press F5 to run the application. Now when you click the hyperlink on MainPage.xaml, you are taken to Page1.xaml. When you click the button on Page1.xaml, you are taken back to MainPage.xaml. In the next section, you will enhance this application slightly to pass parameters between the pages.

Open MainPage.xaml.cs and change the hyperlinkButton1_Click event handler to the following:

private void hyperlinkButton1_Click(object sender, RoutedEventArgs e)
{
     NavigationService.Navigate(new Uri("/Page1.xaml?message=Hello,World",
     UriKind.Relative));
}

Here, you are passing the hard-coded string "Hello, world" to Page1.xaml for processing.

In Page1.xaml, you will try to read the query string passed from the prior pages to see if there are non-empty values. Open Page1.xaml.cs and add the following code to that file:

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs

e)
    {
        base.OnNavigatedTo(e);
        string msg = "";
        if (NavigationContext.QueryString.TryGetValue("message", out msg))
                textBlock1.Text = msg;
    }

Press F5 to run the application. Now, if you press the hyperlink from MainPage.xaml, you should see the "Hello, world" message displayed on Page1.

Launch Visual Studio 2010 Express and select the Windows Phone Application template. Change the Project Name to TiltableTest, select OK, and Visual Studio will set up a new project.

Open MainPage.xaml in Design mode, and add a ListBox with four items, a Button, a Hyperlink, and a Checkbox to the page, with the end goal of creating a user interface like the one shown in Figure 9-7.

Figure 9.7. TiltableTest UI layout

You can also paste the following XAML code to get the same interface depicted in Figure 9-7:

<!--ContentPanel - place additional content here-->
     <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

  <ListBox Height="110" HorizontalAlignment="Left" Margin="6,47,0,0"
  Name="listBox1"
          VerticalAlignment="Top" Width="460" ItemsSource="{Binding}" >
                  <ListBoxItem Content="ListBoxItem 1" ></ListBoxItem>
          <ListBoxItem Content="ListBoxItem 2" ></ListBoxItem>
                  <ListBoxItem Content="ListBoxItem 3" ></ListBoxItem>
                  <ListBoxItem Content="ListBoxItem 4" ></ListBoxItem>
          </ListBox>
          <HyperlinkButton Content="HyperlinkButton" Height="30"
HorizontalAlignment="Left"
              Margin="-109,185,0,0" Name="hyperlinkButton1" VerticalAlignment="Top"
              Width="409" />

       <Button Width="186" Height="85" Content="Button" HorizontalAlignment="Left"
        VerticalAlignment="Top" Margin="9,234,0,0" />
                <CheckBox Content="CheckBox" Height="72" HorizontalAlignment="Left"

Margin="12,325,0,0" Name="checkBox1" VerticalAlignment="Top" />

       </Grid>

Download the Tilt Effect Control Sample from http://go.microsoft.com/fwlink/?LinkId=200720, and extract the contents of the .zip file to a known location.

From within the TiltableTest project you created previously, right-click the Add

With TitlEffect.cs now a part of your project, double-click that file to open it. Change the following statement

namespace Controltitleffect

to

namespace TiltableTest

Essentially, you just changed the namespace of this file so that it now belongs to your application.

Now you need to add the IsTiltEnabled dependency property to the MainPage.xaml page. Open MainPage.xaml in a XAML view and, at the very top of the page, right below the xmlnss:mc=... add the following statement:

xmlns:local="clr-namespace:TiltableTest"

You're almost done1 At the top of the page, beneath the statement

shell:System Tray.IsVisible="True"

add

local:TiltEffect.IsTiltEnabled="True">

Right-click the project and select Build. After the project builds, you are ready to run the application.