WindowsPhone开发如何创建动态启动界面

本文采用WindowsPhone 8 SDK，vs 2013，此方法同样适用于wp7，wp8.1.
一般的wp8应用程序在创建时，项目目录中会默认提供一张在程序启动时显示的一张图片，名字叫SplashScreenImage.jpg。这是因为在程序启动时可能会耗费一定的时间来加载首界面，这时这张图片就会先出现。如果你要改变启动画面，使用自己定义好的另外的图片替换它就可以。但是如果，要在启动画面上显示动态的效果呢？下面就来说一下。
为了要在程序启动时显示动态界面，就要将一个页面在MainPage之前显示。也就是说，要把之前的默认的启动画面去掉。为了实现这个效果，需要先把SplashScreenImage.jpg删除掉。创建一个UserControl来显示动态效果，在MianPage显示之前，先显示该UserControl.同时控制其显示的时间，这个时间我们也是可以控制的。这里还要用到BackgroundWorker线程。
使用BackgroundWorker类，你在一个单独的后台线程进行操作，而让wp的渲染线程和UI线程继续执行不受影响。当线程中的事务处理完后可以反馈到ui线程上。
注意：在DoWork事件处理函数中不要操作任何用户界面对象。当然ProgressChanged和RunWorkerCompleted事件回调函数中，你能操作用户界面。具体的使用在后面的代码中，有详细说明。

首先，创建一个UserControl，如下图：

添加新建项

创建好了之后，要将其宽高改为height =800 ，weight = 480，不然覆盖不了整个屏幕。
下面是该control的xmal的代码，代码中有注释。

<UserControl x:Class="LoadingPage.LoadingControl"
    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"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    d:DesignHeight="800"  d:DesignWidth="480"> <!--设置宽高-->

    <!--控件动画资源定义-->
    <UserControl.Resources>
        <!--使用故事板-->
        <Storyboard x:Key="LoadAnimation">
            <DoubleAnimation From="0" To="359" Duration="0:0:1" RepeatBehavior="Forever"
                             Storyboard.TargetName="VisualTransform"
                             Storyboard.TargetProperty="Angle"/>
        </Storyboard>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="{StaticResource PhoneAccentBrush}">
        <!--使用 * 可以平均分配布局-->
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <TextBlock Text="正在加载，请稍后。。。" Grid.Row="1" VerticalAlignment="Center"
                   HorizontalAlignment="Center"/>
        <!-- grid里，使用path画一个圈，而动画以该grid为单位-->
        <Grid  x:Name="Visual" Margin="0,30,0,0" RenderTransformOrigin="0.5,0.5" Grid.Row="2"
              VerticalAlignment="Center" HorizontalAlignment="Center">
            <Grid.RenderTransform>
                <TransformGroup>
                    <RotateTransform x:Name="VisualTransform"/>
                </TransformGroup>
            </Grid.RenderTransform>
            <Path Width="50" Height="50" Stretch="Fill"
                  StrokeThickness="5"
                  StrokeStartLineCap="Round" Data="M1,0 A1,2,90,1,1,0,0">
                <Path.Stroke>
                    <LinearGradientBrush StartPoint="1,0.8" EndPoint="0.3,0.1">
                        <GradientStop Color="White" Offset="0"/>
                        <GradientStop Color="Transparent" Offset="1"/>
                    </LinearGradientBrush>
                </Path.Stroke>
            </Path>
        </Grid>
    </Grid>
</UserControl>

其cs 代码如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Shell;
using System.Windows.Media.Animation;

namespace LoadingPage
{
    public partial class LoadingControl : UserControl
    {
        public LoadingControl()
        {
            InitializeComponent();
            //设置根grid布局宽高为实际设备屏幕的宽高
            LayoutRoot.Height = App.Current.Host.Content.ActualHeight;
            LayoutRoot.Width = App.Current.Host.Content.ActualWidth;
            //在loaded和unloaded时，添加路由事件，开始和停止动画
            this.Loaded += new RoutedEventHandler(LoadingScreenControl_Loaded);
            this.Unloaded += new RoutedEventHandler(LoadingScreenControl_Unloaded);
        }

        void LoadingScreenControl_Unloaded(object sender, RoutedEventArgs e)
        {
            //加载动画资源
            Storyboard sb = this.Resources["LoadAnimation"] as Storyboard;
            //停止动画
            sb.Stop();
        }

        void LoadingScreenControl_Loaded(object sender, RoutedEventArgs e)
        {
            //加载动画资源
            Storyboard sb = this.Resources["LoadAnimation"] as Storyboard;
            //开始动画
            sb.Begin();
        }
    }
}

接下来，将要在MainPage中加入要处理的代码
1、添加以下命名空间，在MainPage.xaml.cs文件中：
using System.Threading;
using System.Windows.Controls.Primitives;
2、使用Popup类，将UserControl添加到Popup中，使其显示。
3、使用BackgroundWorker，进行计时（也可以做其他的初始化操作），让开始界面显示一定时间。
4、结束，取消显示popup

下面是MainPage.xaml.cs代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Shell;
using LoadingPage.Resources;
using System.Windows.Controls.Primitives;
using System.ComponentModel;
using System.Threading;

namespace LoadingPage
{
    public partial class MainPage : PhoneApplicationPage
    {
        // 构造函数
        public MainPage()
        {
            InitializeComponent();
            //在主页初始化后调用动态加载界面
            LoadWelcomePage(2000);
            // 用于本地化 ApplicationBar 的示例代码
            //BuildLocalizedApplicationBar();
        }

        void LoadWelcomePage(int time)
        {
            //使用popup，将用户控件LoadingControl作为其孩子
            Popup popup = new Popup();
            LoadingControl loadingcontrol = new LoadingControl();
            popup.Child = loadingcontrol;
            popup.IsOpen = true;//设置为true 才会显示

            //新建后台线程
            BackgroundWorker bkw = new BackgroundWorker();
            //需要在后台线程中做的工作，注意不能操作与UI线程相关内容
            bkw.DoWork += ( (s,e) => 
            {
                Thread.Sleep(time);
            });
            //后台线程工作执行完后所要做的事情
            bkw.RunWorkerCompleted += ( (s,e) => 
            {
                this.Dispatcher.BeginInvoke(() => 
                {
                    popup.IsOpen = false 
                });

            });
            //执行后台线程
            bkw.RunWorkerAsync();
        }
        // 用于生成本地化 ApplicationBar 的示例代码
        //private void BuildLocalizedApplicationBar()
        //{
        //    // 将页面的 ApplicationBar 设置为 ApplicationBar 的新实例。
        //    ApplicationBar = new ApplicationBar();

        //    // 创建新按钮并将文本值设置为 AppResources 中的本地化字符串。
        //    ApplicationBarIconButton appBarButton = new ApplicationBarIconButton(new Uri("/Assets/AppBar/appbar.add.rest.png", UriKind.Relative));
        //    appBarButton.Text = AppResources.AppBarButtonText;
        //    ApplicationBar.Buttons.Add(appBarButton);

        //    // 使用 AppResources 中的本地化字符串创建新菜单项。
        //    ApplicationBarMenuItem appBarMenuItem = new ApplicationBarMenuItem(AppResources.AppBarMenuItemText);
        //    ApplicationBar.MenuItems.Add(appBarMenuItem);
        //}
    }
}

Thread.Sleep()方法在using System.Threading;命名空间中
BackgroundWorker在using System.Windows.Controls.Primitives;命名空间中

最后

如果不使用popup和usercontrol，而创建一个新的page，设置其为首页，是不是也可以。但是这样就会被页面堆栈记录，当进行返回操作时，就会返回到该也页面上来，就失去了起意义了。当然也可以管理页面堆栈，删除其记录，但是这样，就显得麻烦了。。

源码在这里