Windows Phone 7天初学(2):页面导航

来源:互联网 时间:1970-01-01

PhoneApplicationPage代表了内容不同的页面,PhoneApplicationFrame是页面控件容器,是框架,一个应用程序只有一个框架Frame,是唯一的,不同的页面之间需要进行导航,导航以页面为基础进行导航的。

导航主要有XAML直接导航和后台代码导航方式。

一、XAML直接导航方式

XAML方式使用HyperLinkButton按钮,定义其的NavigateUri属性,如下:

NavigateUri="/MyPic/Shanghai.xaml"

二、后台代码导航方式

代码方式,使用类NavigationService,如下

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

实际开发中,为避免使用一串的长地址,特别是网站有多层结构时,为简化、方便使用导航网址,使用别名导航:

<Application.Resources>

        <daohang:UriMapper x:Key="MyMapper">

            <daohang:UriMapping Uri="MyPage" MappedUri="/MyPic/MyPage.xaml"/>            
        </ daohang:UriMapper>
    </Application.Resources>

别名使用:

NavigateUri=" MyPage "

NavigationService.Navigate(new Uri("MyPage ", UriKind.Relative));

当需传递参数时,导航相应的表示为:

(1) XAML直接导航:

NavigateUri="/MyPic/Shanghai.xaml?city=1"

(2) 后台代码导航:

NavigationService.Navigate(new Uri("/MyPic/Shanghai.xaml?city=1 ", UriKind.Relative));

(3) 使用别名地址导航。

<daohang:UriMapping Uri="MyPage/{MyCity}" MappedUri="/MyPic/MyPage.xaml?city={MyCity}"/>

案例2-1:我的相册:My Photos

创建一个针对Windows Phone导航的应用,完成一个我的相册“My Photos”应用程序 。

(1)启动Visual Studio 2010,创建“Windows Phone Application”。

(2)设计程序界面,效果如图2-1所示:

 

 

图2-1

XAML主要代码如下:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <TextBlock Height="50" HorizontalAlignment="Left" Margin="39,47,0,0" 
Name="textBlock1" Text="昆明旅游" VerticalAlignment="Top" Width="135" FontSize="32" />
            <TextBlock FontSize="32" Height="50" HorizontalAlignment="Left" 
Margin="39,124,0,0" Name="textBlock3" Text="桂林旅游" VerticalAlignment="Top" Width="135" />
            <TextBlock FontSize="32" Height="50" HorizontalAlignment="Left" 
Margin="39,211,0,0" Name="textBlock2" Text="北京旅游长城" VerticalAlignment="Top" Width="196" />
            <HyperlinkButton Content="查看" Height="50" HorizontalAlignment="Left" Margin="278,47,0,0" Name="hyperlinkButton1" 
VerticalAlignment="Top" Width="109" />
            <Button Content="查看" Height="76" HorizontalAlignment="Left" Margin="278,113,0,0" Name="button1" 
VerticalAlignment="Top" Width="109" />
            <HyperlinkButton Content="查看" Height="50" HorizontalAlignment="Left" Margin="278,212,0,0" Name="hyperlinkButton2" 
VerticalAlignment="Top" Width="109" />
            <TextBlock FontSize="32" Height="50" HorizontalAlignment="Left" Margin="39,301,0,0" 
Name="textBlock4" Text="海南旅游海边" VerticalAlignment="Top" Width="196" />
            <Button Content="查看" Height="76" HorizontalAlignment="Left" Margin="278,288,0,0" Name="button2" VerticalAlignment="Top"
 Width="109" />
        </Grid>

(3) 在项目资源管理器,新建旅游目录旅游Lvyou,并添加对应四个竖屏Page,添加照片目录Photos,并拷进相应的示例照片。如图2-2:

 

 

图2-2

(4) 更改各导航页面的标题,并加进一旅游图片,如Kunming.xaml,效果如图2-3:

 

 

图2-3

XAML代码为:

<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="我的相册" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="长城" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>
        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Image Height="505" HorizontalAlignment="Left" Margin="32,34,0,0"
 Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="361" Source="/WindowsPhoneApplication2-1;component/Photos/changchen.jpg" />
        </Grid>

(5)回到主页面MainPage,“昆明旅游”使用XAML直接导航方式,就是定义NavigateUri属性,如下:

<HyperlinkButton Content="查看" Height="50" HorizontalAlignment="Left" Margin="278,47,0,0" Name="hyperlinkButton1"
 VerticalAlignment="Top" Width="109" NavigateUri="/lvyou/Kunming.xaml" />

(6)“桂林旅游”使用后台代码方式导航。在MainPage设计视图中,双击“桂林旅游”对应的“查看”按扭,定义事件处理程序,实现导航,代码如下:

private void button1_Click(object sender, RoutedEventArgs e)
 {
  NavigationService.Navigate(new Uri ("/lvyou/guilin.xaml",UriKind.Relative ));
}

(7)“北京旅游”使用别名地址导航。首先在App.xmal中新增命名空间的支持,如下:

xmlns:mm="clr-namespace:System.Windows.Navigation;assembly=Microsoft.Phone"

在资源块中添加定义Uri映射关系

<Application.Resources>
        <navig:UriMapper x:Key="LvyouMapper"  >
            <navig:UriMapping Uri="beijing" MappedUri="/Lvyou/Changchen.xaml"></navig:UriMapping>
        </navig:UriMapper>
</Application.Resources>

在App.xaml.cs定义的映射资源数据放入应用程序框架RootFrame 的UriMapper对象中,代码如下:

this.RootFrame.UriMapper = Resources["LvyouMapper"] as UriMapper;

回到MainPage.xaml中,现只需定义别名即可实现导航,在“北京旅游”对应的“查看”控件,定义NavigateUri属性为相应的别名,形式如下:

NavigateUri="beijing"

如用后台代码方式,可表示为:

NavigationService.Navigate(new Uri ("LvyouMapper ",UriKind.Relative ));

(8) “海南旅游”导航带参数方式,在对应单击事件处理程序中,定义带参数,如下:

private void button2_Click(object sender, RoutedEventArgs e)
        {
            NavigationService.Navigate(new Uri("/lvyou/Haikou.xaml?photo=海边风景", UriKind.Relative));
        }

(9)打开Haikou.xaml定义Loaded事件,读取参数处理程序如下:

if (NavigationContext.QueryString.Count > 0)  //如带参数,则处理
            {
                this.PageTitle.Text = NavigationContext.QueryString["photo"] ;
            }

 

 

(10)运行后,显示首页,效果如下:

 

 

图2-4

可查看相应旅游照片,如单击北京旅游长城边的“查看”,显示对应的效果,如图2-5:

 

 

图2-5

查看“海南旅游”,传递参数后,更改标题为“海边风景”,效果如图2-6:

 

 

图2-6

源码下载

本文出自 “蓝海战术” 博客,请务必保留此出处http://wanxl.blog.51cto.com/2129901/567695


相关阅读:
Top