Windows Phone 7 Execution Model : Navigating Between Pages by Using Global Application Variables

1. Problem

You have to navigate between pages sharing data across them. You want to avoid using a query string because your application has a lot of pages, and you need a smart way to share data between pages.

2. Solution

You can add a public property to the App class and retrieve its value by using the Current static property provided by the Application class.

3. How It Works

The Windows Phone 7 Silverlight application always provides a class deriving from the Application class: the App class. This class represents the running application itself with a reference to the root frame and pages.

Defining a property in the App class ensures that the property is visible to all pages. At any time and from any page, you can use the Current static property from the Application class to retrieve a reference to the current App object. By using the instance of this object, you can easily either retrieve the property value or set it.

4. The Code

Create a new Windows Phone 7 Silverlight application called NavigatingWithGlobalVariableApp from Visual Studio 2010. Add two new pages called Page2.xaml and Page3.xaml by choosing Project Add New Item.

In the App.xaml.cs file, we added a Boolean property that represents the user's choice to have all red pages in the application.

public partial class App : Application
    {
        /// <summary>
        /// Provides easy access to the root frame of the Phone Application.
        /// </summary>
        /// <returns>The root frame of the Phone Application.</returns>
        public PhoneApplicationFrame RootFrame { get; private set; }

        public bool RedPages { get; set; }

					  

/// <summary>
        /// Constructor for the Application object.
        /// </summary>
        public App()
        {
. . .

In the MainPage.xaml file, we added a check box and two hyperlink buttons. The check box has two event handlers to manage selected and deselected states. When the check box is selected, the background of every page will be red; otherwise, it will be black.

. . .
        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <StackPanel>
                <CheckBox x:Name="chkRedColor" Content="I want all red pages"
                          Checked="chkRedColor_Checked" Unchecked="chkRedColor_Unchecked" />
                <HyperlinkButton Content="Navigate to page2" x:Name="hbToPage2"
                          Click="hbToPage2_Click" />
                <HyperlinkButton Content="Navigate to page3" x:Name="hbToPage3"
                          Click="hbToPage3_Click" />
            </StackPanel>
        </Grid>
. . .

					  

In the Checked and Unchecked event handlers' code, we set the RedPages Boolean to true and false, respectively. Moreover, we change the background color properly.

private void chkRedColor_Checked(object sender, RoutedEventArgs e)
        {
            App a = Application.Current as App;
            a.RedPages = true;
            ContentPanel.Background = new SolidColorBrush(Colors.Red);
        }

        private void chkRedColor_Unchecked(object sender, RoutedEventArgs e)
        {
            App a = Application.Current as App;
            a.RedPages = false;
            ContentPanel.Background = new SolidColorBrush(Colors.Black);
        }

					  

As usual, both hyperlink buttons' event handlers contain the code to navigate to the other pages.

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

					  

private void hbToPage3_Click(object sender, RoutedEventArgs e)
        {
            this.NavigationService.Navigate(new Uri("/Page3.xaml", UriKind.Relative));
        }

					  

In Page2.xaml and Page3.xaml, we added the Loaded event handler. In the related code, we retrieved the RedPages Boolean property, setting the page's background color accordingly.

private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)
        {
            App a = Application.Current as App;
            if (a.RedPages == true)
                ContentPanel.Background = new SolidColorBrush(Colors.Red);
        }

5. Usage

Run the application from Visual Studio 2010, selecting Windows Phone 7 Emulator as the output target. From the main page, select the I Want All Pages Red check box. The background color turns red (see Figure 1).

Figure 1. NavigatingWithGlobalVariableApp in action

Click the check box again to deselect it, and the main page's background color turns black. Select the check box once more and then press the Navigate to page2 hyperlink button. The Page2 background color is red (see Figure 2).

Figure 2. Evenpage 2 has the background color set to red.