DotNetSpeaks - Part 6 - Windows Phone 7

Published:

August 01, 2011 By Sumit Dutta

Visited: 3644

In this artcile we will explore how to perform navigation in Windows Phone 7 using Silverlight. Let's start a new project, select Silverlight for Windows Phone template and choose Windows Phone Application, name the project as Windows Phone 7 Navigation.

Let's start the navigation in Windows Phone 7 by writing some code.

Step 1: Change the ApplicationTitle to Basic Navigation and PageTitle to Navigation in MainPage.xaml

Step 2: Place a TextBlock inside the Grid in MainPage.xaml

Step 3: Place below code in the codebehind in MainPage.xaml

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

namespace Windows_Phone_7_Basic_Navigation
{
   public partial class MainPage : PhoneApplicationPage
   {
      Random rand = new Random();
      public MainPage()
      {
         InitializeComponent ();
      }

      void OnTextBlockManipulationStarted(object sender, ManipulationStartedEventArgs args)
       {
         this.NavigationService.Navigate(new Uri("/SecondPage.xaml", UriKind.Relative));
         args.Complete ();
         args.Handled = true;
      }

      protected override void OnManipulationStarted(ManipulationStartedEventArgs args)
       {
         ContentPanel.Background = new SolidColorBrush(Color.FromArgb(255, (byte)rand.Next(255), (byte)rand.Next (255), (byte)rand.Next (255)));
         base.OnManipulationStarted (args);
      }
   }
}

The code behind contains OnTextBlockManipulationStarted handler as well as overridden method OnManipulationStarted.

OnTextBlockManipulationStarted will be triggered on touch of "Navigate to 2nd Page". OnManipulationStarted will be triggered on touch of anywhere on the screen of Windows Phone 7 apart from "Navigate to 2nd Page" text.

OnTextBlockManipulationStarted will navigate to the second page whereas OnManipulationStarted will change the ContentPanel color to some random color.

On touching the TextBlock, NavigationService property of the page will be accessed which contains properties, methods and events related to navigation.

this.NavigationService.Navigate(new Uri("/SecondPage.xaml", UriKind.Relative));

The Navigate takes the argument of type Uri object. The slash "/" and UriKind.Relative to indicate that URI is relative to MainPage.xaml.

Step 4: Right click on the Windows Phone 7 Basic Navigation project, select Add and New Item, select Windows Phone Portrait Page and name it SecondPage.xaml.

Windows Phone 7 Basic Navigation.png

Step 5: Change the ApplicationTitle of SecondPage.xaml to Basic Navigation and PageTitle to Second Page.

Step 6: Add a TextBlock inside ContentPanel in SecondPage.xaml. TextBlock of MainPage.xaml and SecondPage.xaml will be same, only the Text of SecondPage.xaml will be "Go Back to 1st Page".

Step 7: Place below code in the Codebehind of SecondPage.xaml

using System;
using System.Collections.Generic;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using Microsoft.Phone.Controls;

namespace Windows_Phone_7_Basic_Navigation
{
   public partial class SecondPage : PhoneApplicationPage
   {
      Random rand = new Random();
      public SecondPage()
      {
         InitializeComponent ();
      }

      void OnTextBlockManipulationStarted(object sender, ManipulationStartedEventArgs args)
      {
         this.NavigationService.GoBack();
         args.Complete ();
         args.Handled = true;
      }

      protected override void OnManipulationStarted(ManipulationStartedEventArgs args)
      {
         ContentPanel.Background = new SolidColorBrush (Color.FromArgb(255, (byte)rand.Next(255), (byte)rand.Next (255), (byte)rand.Next (255)));
         base.OnManipulationStarted (args);
      }
   }
}

Again, it is same as MainPage.xaml, if you touch anywhere apart from the TextBlock text "Go Back to 1st Page", the background color will change randomly. On touch of TextBlock text "Go Back to 1st Page" will invoke GoBack method of NavigateService which will take you back to the page which has navigated to SecondPage.xaml in this case it would be MainPage.xaml.

Let's look at navigation call in MainPage.cs

this.NavigationService.Navigate(new Uri("/SecondPage.xaml", UriKind.Relative));

The actual instance of SecondPage class is created behind the scenes.

Now run the application and touch the screen to change color.

Now touch the text "Navigate to 2nd Page"

Windows Phone 7 Basic Navigation

Now you are on the second page, touch anywhere on the screen to change the color of the screen and touch "Go Back to 1st Page" text to go back to the main page or Back button of Phone.

You will notice that main page color will be the same color as you had left.

Windows Phone 7 Basic Navigation

Now touch the TextBlock "Navigate to 2nd Page" again to navigate to second page, you will notice that the second page does not display the screen color which you have left in the last visit. The reason is navigation to second page is happening through brand new instance of the SecondPage class.

Navigation in Silverlight for Windows Phone works as last-in-first-out data structure called stack. When a source page calls navigate, the source page is put on the stack and new instance of new page is created and displayed. When the page calls GoBack (Back button of phone pressed) the page at the top of the stack pops out and displayed.

Now replace

this.NavigationService.GoBack();

with

this.NavigationService.Navigate(new Uri("/MainPage.xaml", UriKind.Relative));

in SecondPage.xaml.

Now when you move to MainPage from SecondPage the color of MainPage won't be retained. The above call will create new instance of MainPage.xaml. And if you keep on pressing TextBlock of each page, the whole stack with instance of MainPage and SecondPage will be created. You need to used Back button of phone to navigate back to through all these pages.

This ends the article of Windows Phone 7 Navigation

Like us if you find this post useful. Thanks!

Session End on Browser Close or Tab Close or Moving out of the site