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，設置其爲首頁，是不是也可以。但是這樣就會被頁面堆棧記錄，當進行返回操作時，就會返回到該也頁面上來，就失去了起意義了。當然也可以管理頁面堆棧，刪除其記錄，但是這樣，就顯得麻煩了。。

源碼在這裏