Windows Phone笔记(7)页面间导航以及数据传递

　　Windows Phone笔记之前的示例都只是基于单个页面的简单示例，一般是继承了PhoneApplicationPage类的MainPage页面，但是实际中的应用程序却不可能这么简单，肯定都是由多个页面组成的，那么这就要求我们首先要了解：Windows Phone的页面之间是如何跳转(导航)的？以及如何在页面间传值？这就是这篇笔记需要解决的问题。

1.页面间的导航

　　Windows Phone中页面间的导航非常简单，有过B/S开发经验的开发人员会发现Windows Phone页面间的导航基本上和HTML页面的导航一样。现在我们通过一个简单的示例程序来了解在Windows Phone中如何进行页面间的跳转(导航)。

首先创建一个Silverlight for Windows Phone项目，MainPage.xaml代码如下:

　　　　 <!--ContentPanel - 在此处放置其他内容-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<TextBlock Text="Navigation to SecondPage" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="32" Padding="0 34" Name="tblNavigationToSecondPage" ManipulationStarted="tblNavigationToSecondPage_ManipulationStarted"></TextBlock>
</Grid>

后台处理MainPage.xaml.cs页面的代码:

public partial class MainPage : PhoneApplicationPage
{
Random ran = new Random();
// 构造函数
public MainPage()
{
InitializeComponent();
}

/// <summary>
　　　　 /// 触摸TextBlock以外的屏幕时发生
12　　　　  /// </summary>
　　　 　/// <param name="e"></param>
protected override void OnManipulationStarted(ManipulationStartedEventArgs e)
{
ContentPanel.Background = new SolidColorBrush(Color.FromArgb(255, (byte)ran.Next(255), (byte)ran.Next(255), (byte)ran.Next(255)));
base.OnManipulationStarted(e);
}

/// <summary>
　　　　 /// 触摸TextBlock控件跳转到SecondPage
　　　　 /// </summary>
23　　　　  /// <param name="sender"></param>
　　　 　/// <param name="e"></param>
private void tblNavigationToSecondPage_ManipulationStarted(object sender, ManipulationStartedEventArgs e)
{
this.NavigationService.Navigate(new Uri("/SecondPage.xaml", UriKind.Relative));

e.Complete();
e.Handled = true;
}
}

完成MainPage页面代码编写后，新建一个SecondPage页面

SecondPage.xaml代码:

<!--ContentPanel - 在此处放置其他内容-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<TextBlock Text="Go Back to SecondPage" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="32" Padding="0 34" Name="tblNavigationToMainPage" ManipulationStarted="tblNavigationToMainPage_ManipulationStarted"></TextBlock>
</Grid>

后台处理SecondPage.xaml.cs代码:

public partial class Second : PhoneApplicationPage
{
Random ran = new Random();
public Second()
{
InitializeComponent();
}

private void tblNavigationToMainPage_ManipulationStarted(object sender, ManipulationStartedEventArgs e)
{
this.NavigationService.Navigate(new Uri("/MainPage.xaml", UriKind.Relative));
//this.NavigationService.GoBack();
e.Complete();
e.Handled = true;
}
}

以上是该示例的全部代码，两个页面的结构类似，点击TextBlock控件以外的屏幕区域就会改变页面背景颜色，点击MainPage页面的TextBlock控件会跳转到SecondPage页面，如果点击SecondPage页面的话就会调用页面的GoBack()方法，那么现在我们通过运行程序来分析页面导航的一些技术要点。

　　首先点击MainPage页面，改变页面的背景色，然后点击TextBlock控件跳转到SecondPage页面，点击SecondPage页面的TextBlock控件退回MainPage页面:







下面我们做一个简单的修改,把SecondPage页面的TextBlock元素触摸事件的处理代码改为:

private void tblNavigationToMainPage_ManipulationStarted(object sender, ManipulationStartedEventArgs e)
{
this.NavigationService.Navigate(new Uri("/MainPage.xaml", UriKind.Relative));
//this.NavigationService.GoBack();
e.Complete();
e.Handled = true;
}

再次和刚才一样的操作,运行效果如下:







Silverlight for Windows Phone的导航系统是基于栈(stack)的，stack是一种后进先出的数据结构。在这里我们把调用Navigate()方法的页面成为源(source)页面,把导航到的页面成为目标(destination)页面。在第一个示例中，源页面MainPage页面调用Navigation方法时，该页面被放进栈中，同时创建目标页面SecondPage的一个新的实例并显示出来，当调用目标页面的GoBack()方法时(相当于手机中的Back键，在程序初始状态下按该键应用程序会被终止)，SecondPage页面的实例会被抛弃，位于栈顶部的MainPage实例就会弹出并显示出来。所有我们可以看到MainPage页面的背景色还是之前的颜色。第二个示例中点击SecondPage页面的TextBlock控件我们可以看到页面的颜色已经回到初始状态，这就表示:SecondPage导航到的是一个MainPage页面的一个新的实例，我们要记住这点:调用源页面的Navigation方法会创建一个目标页面的新的实例，之前的实例会被丢弃。

2.页面间数据的传递

　　和前面的导航类似，Windows Phone页面间的数据传递也和传统的HTML页面通过URI传递数据的方式相似。下面我们通过一个示例程序来演示在Windows Phone程序中页面如何进行数据的传递。

MainPage.xaml代码:

<!--ContentPanel - 在此处放置其他内容-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<TextBlock Text="Navigation to SecondPage" VerticalAlignment="Center"  Name="tblNavigationSecondPage" HorizontalAlignment="Center" Padding="0 34" FontSize="32" ManipulationStarted="tblNavigationSecondPage_ManipulationStarted"/>
</Grid>

MainPage.xaml.cs后台处理程序:

public partial class MainPage : PhoneApplicationPage
{
Random ran = new Random();
// 构造函数
public MainPage()
{
InitializeComponent();
}

/// <summary>
　　　　 /// 触摸TextBlock控件时触发
　　　　 /// </summary>
　　　 　/// <param name="sender"></param>
　　　 　/// <param name="e"></param>
private void tblNavigationSecondPage_ManipulationStarted(object sender, ManipulationStartedEventArgs e)
{
String destination = "/SecondPage.xaml";

//当ContentPanel的背景色不是默认的值(Brush类型null)时
　　　　　　  //将背景颜色传递到目标页面中去
if (this.ContentPanel.Background is SolidColorBrush)
{
Color clr = (ContentPanel.Background as SolidColorBrush).Color;
destination += string.Format("?Red={0}&Green={1}&Blue={2}", clr.R, clr.G, clr.B);
}
this.NavigationService.Navigate(new Uri(destination, UriKind.Relative));

e.Complete();
e.Handled = true;
}

/// <summary>
　　　　 /// 触摸TextBlock控件以外的屏幕改变背景色
　　　　 /// </summary>
　　　 　/// <param name="e"></param>
protected override void OnManipulationStarted(ManipulationStartedEventArgs e)
{
this.ContentPanel.Background = new SolidColorBrush(Color.FromArgb(255, (byte)ran.Next(255), (byte)ran.Next(255), (byte)ran.Next(255)));
base.OnManipulationStarted(e);
}
}

接着，同样也新建一个SecondPage页面。

SecondPage.xaml代码如下:

<!--ContentPanel - 在此处放置其他内容-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<TextBlock FontSize="32" Padding="0 34" Text="SecondPage" Name="tblGoBack" VerticalAlignment="Center" HorizontalAlignment="Center" ManipulationStarted="tblGoBack_ManipulationStarted"/>
</Grid>

SecondPage.xaml.cs后台处理程序:

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
//通过NavigationContext对象获取源页面传递的字符串，并存放在字典对象中
IDictionary<string, string> parameters = this.NavigationContext.QueryString;
//传递的字符串中有Red的话
if (parameters.ContainsKey("Red"))
{
byte R = Byte.Parse(parameters["Red"]);
byte G = Byte.Parse(parameters["Green"]);
byte B = Byte.Parse(parameters["Blue"]);
//改变背景色
this.ContentPanel.Background = new SolidColorBrush(Color.FromArgb(255, R, G, B));
}

base.OnNavigatedTo(e);
}

private void tblGoBack_ManipulationStarted(object sender, ManipulationStartedEventArgs e)
{
this.NavigationService.GoBack();

e.Complete();
e.Handled = true;
}

编译运行，首先改变MainPage页面背景色，然后点击MainPage页面的TextBlock控件导航到SecondPage页面，可以看到源页面的背景色值被传递到目标页面中，并显示出来。





　　分析代码:在SecondPage页面的后台处理程序中，我们重写了定义在Page类中的OnNavigation方法，这个方法在页面执行完初始化的构造函数后马上调用；我们通过页面的NavigationContext属性来访问源页面传递的字符串，该对象只有一个属性:QueryString,这个属性返回的是一个字典容器。

参考资料:

　　《Programming Windows Phone 7 Microsoft Silverlight Edition》


　 Windows Phone开发者交流群：79339880，欢迎大家来一起讨论交流，共同学习进步。