silverlight程序，在多页面之间进行导航

问题背景：

      类似ASP.NET的masterPage的形式，在父页A中，留有一块类似ASP.NET的ContentPlaceHolder的容器，这个容器里面，我们可以对子页B、C之间进行切换。

      导航事件的触发按钮，我们写成用户控件形式，包含在子页B、C里面，点击这些按钮，要能触发父页的导航控件。

解决思路：

      在程序集 System.Windows.Controls.Navigation 中，有Frame控件，该控件提供了Navigate方法，使得我们可以像沿用ASP.NET的masterPage的风格，来使用silverlight进行多页面之间的导航。

     用户控件可以使用VisualTreeHelper来向上遍历，直到查询到我们所需要的导航控件，然后就可以使用该控件进行导航啦。

核心步骤：

     1：用户控件中的按钮要能触发父页面的导航控件。

      我们可以抽象成，子控件需要可以向上遍历，当查询到父控件后，获取父控件的引用。

      本部分代码如下：

using System;
using System.Windows;
using System.Windows.Media;
namespace userControlNavigate
{
    public class SearchParentControl
    {
        public static T getParentColtrol<T>(DependencyObject childControl, string parentControlName) where T : FrameworkElement
        {
            DependencyObject currentParentControl = VisualTreeHelper.GetParent(childControl);

            while (currentParentControl!=null)
            {
                //如果当前父元素和我们要找的类型名称一致，返回，当然，我们可以省略查询父控件的名称，这样向上遍历时匹配到合适的类型，就立刻返回。
                if (currentParentControl is T && 
                    (string.Equals((currentParentControl as T).Name, parentControlName, StringComparison.CurrentCultureIgnoreCase) | 
                      string.IsNullOrEmpty(parentControlName)))
                {
                    return currentParentControl as T;
                }
                currentParentControl = VisualTreeHelper.GetParent(currentParentControl);
            }
            return null;
        }
    }
}
     

2：在获取父控件后，要使用该控件提供的导航功能

using System;
using System.Windows;
using System.Windows.Controls;

namespace userControlNavigate
{
    public class NavHelper
    {
        private static string URIPath = "/";
        /// <summary>
        /// 用于子控件获取父控件的nav控件，然后使用该nav控件导航到指定的页面
        /// </summary>
        /// <param name="sender">子控件实体</param>
        /// <param name="searchName">父控件名称</param>
        /// <param name="NavViewName">要导航到视图的名称,注意是文件名称，不是路径，页面文件都在指定页面文件夹下</param>
        public static void navigate(DependencyObject sender, string searchName, string NavViewName)
        {
            Frame NavFrame = SearchParentControl.getParentColtrol<Frame>(sender, searchName);
            NavFrame.Navigate(new Uri(URIPath + NavViewName, UriKind.Relative));
        }
    }
}

更动态的页面切换方式

silverlight给我们提供了丰富属性来供动画使用，在本例中，我们希望在新的页面切人的时候以翻转的形式进入我们的视野

通过对目标控件PlaneProjection.RotationY的值进行操作，我们可以达到在Y轴上翻转的效果。

前台代码如下：

<UserControl x:Class="userControlNavigate.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:nav="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
    <UserControl.Resources>
        <Storyboard x:Name="SBFadeIn">
            <DoubleAnimation Duration="0:0:0.3" From="-90" To="0" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="NavFrame" d:IsOptimized="True"/>
        </Storyboard>
    </UserControl.Resources>
        <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="0.2*" />
            <RowDefinition Height="0.6*"/>
            <RowDefinition Height="0.12*"/>
        </Grid.RowDefinitions>
        <TextBlock Foreground="Black" FontSize="30" Grid.Row="0" HorizontalAlignment="Center">HEAD</TextBlock>

        <nav:Frame x:Name="NavFrame" Grid.Row="1" Navigated="NavFrame_Navigated">
            <nav:Frame.Projection>
                <PlaneProjection />
            </nav:Frame.Projection>
        </nav:Frame>
        
        <TextBlock Foreground="Black" FontSize="30" Grid.Row="2" HorizontalAlignment="Center">Foot</TextBlock>
    </Grid>
</UserControl>

当导航完成后，我们播放切入动画，实现新页面翻转进入视野    

后台代码：

using System;
using System.Windows;
using System.Windows.Controls;

namespace userControlNavigate
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            Loaded+=new RoutedEventHandler(MainPage_Loaded);
        }
        private void MainPage_Loaded(object sender, EventArgs e)
        {
            NavFrame.Navigate(new Uri("/Home.xaml", UriKind.Relative));
        }

        private void NavFrame_Navigated(object sender, System.Windows.Navigation.NavigationEventArgs e)
        {
            SBFadeIn.Begin();
        }
    }
}

更动态的背景图片

     借助于silverlight动画，我们可以将动画直接作为网站的背景，本例中动画使用<Grid><Canvas>的容器顺序，通过Grid达到将背景动画铺满浏览器，通过Canvas的 Z-index属性，将背景动画垫在诸多控件底部。这样我们的背景动画就完成架构啦。动画的代码是直接拿同事的作品。。就不贴了，源码里面有。

 

源码在一楼奉上