Passing a Message Between Pages in Windows Phone 7

Introduction

In this article we are going to explore how to pass a message between pages in Windows Phone 7. Further in details this article explains that we have two pages inside the Windows Phone application and want to pass a message between the pages we have in Windows Pphone 7. In this article we will learn how it is possible to do that. In this we have to pass a message such as whenever we click on the first page button to retrieve the message from the user then it will navigate to the other page. Further the only issue is that how do I get the data entered on page1 back to MainPage or to the calling page? The answer is that we have to use the NavigationService.Navigate method to add the data in page 2, and use the NavigationContext.QueryString property to retrieve the data in MainPage. Let's create a small sample to see how this works. Further we will see that there will be another page opened in which there is a Textbox and two buttons; inside the Textbox we will write the message which we have to send to the other page which is the first page. Let's see that how it is possible. So to do it we have to use the followiing steps.

Step 1: In this step first of all we have to open a Windows Phone application; let us see how you will open it.

Go to Visual Studio 2010
File->New->Project
Select the template named as Silverlight for Windows Phone
Select the Windows Phone application
Give it a name as you want.

Step 2: In this step you have to add another new page inside the Windows Phone application; let us see from where you have to add it.

Go to Solution Explorer and Select the project and right-click on it:

Add New Item:

Select new Windows Phone page:

Step 3: In this step we will see the code for the MainPage.xaml.cs file which is given below.

Code:

using System;

using System.Collections.Generic;

using System.Linq;

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 msgpassing

{
public partial class MainPage : PhoneApplicationPage

{

// Constructor

public MainPage()

{

InitializeComponent();

display_data.Click += (display_data_Click);

}
private void display_data_Click(object sender, RoutedEventArgs e)

{

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

}

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

{

string Mytxt = string.Empty;

if (NavigationContext.QueryString.TryGetValue(

"mytextbox",

out Mytxt))

{

DisplayText.Text = Mytxt;

}

base.OnNavigatedTo(e);

}

Description: In the above code of the MainPage.xaml.cs first of all we have to create the event handler for the display_data button. Further the job of this event handler is to navigate to page1. At last at the end of the page of MainPage.xaml we have to add an override of the OnNavigatedTo method. In that method you'll retrieve the QueryString if it exists and add the string retrieved to the TextBlock.

Step 4: In this step we will see the code for the MainPage.xaml file which is given below.

Code:

<phone:PhoneApplicationPage

x:Class="msgpassing.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">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<TextBlock.Foreground>

</LinearGradientBrush>

</TextBlock.Foreground>

</TextBlock>

</StackPanel>

<Grid.Background>

</LinearGradientBrush>

</Grid.Background>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Button.Background>

</LinearGradientBrush>

</Button.Background>

</Button>

</Grid>

</phone:PhoneApplicationPage>

Step 5: In this step you will see the design of the MainPage.xaml file which is given below.

Step 6: In this step we are going to write the code for the Page1.xaml.cs file which is given below.

Code:

using System;

using System.Collections.Generic;

using System.Linq;

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 msgpassing

{

public partial class Page1 : PhoneApplicationPage

{

public Page1()

{

InitializeComponent();

OK.Click += MyMyButtonClick;

Cancel.Click += MyMyButtonClick;

}
private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)

{

}

void MyMyButtonClick(object sender, RoutedEventArgs e)

{

Button MyButton = sender as Button;

string Mymsg = string.Empty;

if (MyButton.Name == "OK")

{

Mymsg = mytextbox.Text;

}

NavigationService.Navigate(new Uri("/MainPage.xaml?mytextbox=" + Mymsg, UriKind.Relative));

}

Step 7: In this step we will see the design code for the Paig1.xaml file which is given below.

Code:

<phone:PhoneApplicationPage

x:Class="msgpassing.Page1"

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"

FontFamily="{StaticResource PhoneFontFamilyNormal}"

FontSize="{StaticResource PhoneFontSizeNormal}"

Foreground="{StaticResource PhoneForegroundBrush}"

SupportedOrientations="Portrait" Orientation="Portrait"

mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"

shell:SystemTray.IsVisible="True" Loaded="PhoneApplicationPage_Loaded">

<Grid.Background>

</LinearGradientBrush>

</Grid.Background>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<TextBox.Background>

</LinearGradientBrush>

</TextBox.Background>

</TextBox>

<Button.Background>

</LinearGradientBrush>

</Button.Background>

</Button>

<Button.Background>

</LinearGradientBrush>

</Button.Background>

</Button>

</StackPanel>

</Grid>

</phone:PhoneApplicationPage>

Description: Now we have to open Page1.xaml.cs and let's add the logic for passing the user's entry to MainPage.xaml.cs. Whenever the user clicks the OK button the message written inside the textbox will be passed to the MainPage. Further ahead to do this we want to respond to either the OK or the Cancel Button, but only if the user clicks OK will we pick up the data in the TextBox. Begin by creating a common event handler for the two buttons. The implementation of the click event handler needs to differentiate which button called it and thus must cast the sender object to an object of type Button. Further we have a button and will ask for the name and property of that calling button to see which event handler will be called.

Step 8: In this step we just see the design figure of the Page1.xaml file which is given below.