使用Frame控件设计Silverlight的导航

这里所说的导航其实就是在Silverlight的页面之间前进后退以及跳转。通过Frame控件配合后台NavigationService类可以很容易的做到页面之间的导航。

这就是工具箱中的Frame控件了，就把它当作一个控件用就行了，将其拖放到设计视图中，大小任意。如果想将整个应用程序的显示空间全部用于Frame内容的显示，那就铺满整个区域。如果只是想一部分作为显示跳转，那么可以将其大小位置根据需要进行设置。比如可以在Frame外面加上一些前进后退主页地址之类的，模仿浏览器的功能。

这里就将整体页面分为两个部分，顶部是一个小导航栏，剩下的部分全部由Frame控件占满。

对于Frame导航来说，一般需要使用Page，这样才可以在Page上与NavigationService进行交互，达到可以在Page内控制导航的功能。

为了演示，这里就新建了三个页面：Page1.xaml、Page2.xaml、Page3.xaml。

Frame所在页面的XAML代码如下：

<Grid x:Name="LayoutRoot">
    <navigation:Frame x:Name="frame_main" Source="/Page1.xaml" Margin="0,37,0,0" Navigated="frame_main_Navigated" BorderBrush="Black" BorderThickness="0,2,0,0" />
    <Button x:Name="btn_goBack" Content="后退" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Width="75" Click="btn_goBack_Click"/>
    <Button x:Name="btn_goForward" Content="前进" HorizontalAlignment="Left" Margin="90,10,0,0" VerticalAlignment="Top" Width="75" Click="btn_goForward_Click"/>
    <TextBox x:Name="tb_address" HorizontalAlignment="Left" Height="23" Margin="170,9,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="380"/>
    <Button x:Name="btn_go" Content="跳转" HorizontalAlignment="Left" Margin="555,10,0,0" VerticalAlignment="Top" Width="75" Click="btn_go_Click"/>
</Grid>

设置Frame控件的Source属性来设置其初始显示的页面，这里就是Page1了。如果页面在项目中的子文件夹下，则写相应路径即可。

为了演示不同路径下的显示，这里就将Page2和Page3放到SubPages文件夹中。

那么在导航的时候，Page2的相对地址就是：/SubPages/Page2.xaml

一、在Frame所在页，通过调用Frame控件上的方法，可以对其内容进行导航控制。

比如跳转按钮，btn_go_Click方法内容如下：

frame_main.Navigate(new Uri(tb_address.Text, UriKind.RelativeOrAbsolute));

通过获取输入的地址，调用Frame控件的Navigate方法，传入Uri对象进行跳转。

比如前进/后退按钮，btn_goForward_Click、btn_goBack_Click方法内容如下：

private void btn_goForward_Click(object sender, RoutedEventArgs e)
{
    if (frame_main.CanGoForward)
    {
        frame_main.GoForward();
    }
}

private void btn_goBack_Click(object sender, RoutedEventArgs e)
{
    if (frame_main.CanGoBack)
    {
        frame_main.GoBack();
    }
}

通过判断CanGoForward和CanGoBack来判断框架内页面是否可以前进后退（就是有历史记录大概意思，不然刚打开也没地方后退，也没地方前进），然后调用Frame控件的GoForward、GoBack方法来达到前进后退的效果。

地址栏中的地址在Frame控件的Navigated时间中更新：

private void frame_main_Navigated(object sender, NavigationEventArgs e)
{
    tb_address.Text = frame_main.Source.ToString();
}

通过Frame控件的Source属性得到当前框架内显示页的地址。

 

二、Frame控件内部显示页对框架的导航操作

其实这跟上面的操作方法基本一致，只是在内部页面不能获取也不需要获取Frame控件，而是直接使用NavigationService来进行框架导航的操作。

比如跳转到Page2则变成：

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

而前进/后退同样是在NavigationService上调用：

if (NavigationService.CanGoForward)
{
    NavigationService.GoForward();
}

if (NavigationService.CanGoBack)

{

    NavigationService.GoBack();

}

同样可以通过Source属性获取当前框架显示内容的URI地址。

NavigationService.Source;

注：NavigationService只能在继承了Page类的页面类中使用，所以在其他比如用户控件UserControl是调用不到的。