WP7創建動畫閃屏，啓動畫面所有知識深入詳解（附源碼）

在這篇文章中，我將主要談論Windows Phone 7的屏幕啓動畫面。一般來說，WP7的應用可以：
使用圖片作爲啓動畫面
使用動畫閃屏
不使用閃屏

默認情況下啓動一個Windows Phone 7應用程序時，需要一點時間來顯示完整的應用程序。這就是爲什麼提前顯示一個自己的自定義啓動畫面是一種比較好的做法。

在這裏我不得不感謝一直支持我的滷麪網版主，是他讓我提起興趣寫了這麼一篇文章，再次感謝滷麪網，一個非常不錯的wp7開發論壇,後面我也將再次向大家發佈幾篇高質量文章，請大家到滷麪上找我吧，呵呵

進入正題：

使用靜態圖像作爲啓動畫面

創建一個Windows Phone 7應用程序項目時，它生成一個默認SplashScreenImage.jpg圖像：

最簡單的方法添加自定義閃屏，你只用使用一個新的來取代現有的SplashScreenImage.jpg圖像就行。
你可以按照下列步驟：
1）圖像文件添加到您的項目命名它SplashScreenImage.jpg（注：這個名字是很重要的！）
2）圖像大小寬度：480px，高度800px：（480×800）。
3）設置圖像 Build Action 爲 Content

創建動畫型的啓動屏幕
開始首先，我需要一提的是，你可以使用一個BackgroundWorker線程。基本上BackgroundWorker類允許你在一個單獨的後臺線程進行操作，而讓WP7的渲染線程和UI線程可用。如果你想響應的用戶界面，這將是非常有必要的。你可以偵聽後臺操作完成的事件和信號。要啓動的後臺操作，調用RunWorkerAsync方法。
注意：您必須小心，在DoWork事件處理函數中不要操作任何用戶界面對象。當然ProgressChanged和RunWorkerCompleted事件回調函數中，你能操作用戶界面。
瞭解更多信息，您可以查看MSDN中BackgroundWorker類文檔。
現在讓我們開始與動畫閃屏的真正做法。您可以遵循以下步驟：
1）創建一個Windows Phone 7應用程序項目
2）添加新名爲AnimatedSplashScreen.xaml的UserControl
3）在MainPage.xaml.cs中包括下列命名空間：

using System.Threading;
using System.Windows.Controls.Primitives;

複製代碼

到MainPage.xaml.cs中加入以下代碼

請注意，爲了顯示啓動畫面，我們將添加在MainPage加載時，儘可能快顯示啓動畫面。我們將在構造函數中運行BackgroundWorker。當RunWorkerCompleted完成時，彈出窗口（啓動畫面）將被關閉，這時MainPage將成爲可見。下面即是我們的閃屏功能的動作方式:

起初，會出現一個彈出閃屏
然後，我們啓動了一個後臺線程，做了一些工作（(Thread.Sleep(5000);）。
當後臺線程完成，調用RunWorkerCompleted，覆蓋在主屏幕的彈窗將關閉（myPopup.IsOpen = FALSE）。
然後，你會看到你的MainPage.xaml顯示出來。

public partial class MainPage : PhoneApplicationPage
{
    BackgroundWorker backroungWorker;
    Popup myPopup;
    // Constructor
    public MainPage()
    {
        InitializeComponent();
        myPopup = new Popup() { IsOpen = true, Child = new AnimatedSplashScreen() };
        backroungWorker = new BackgroundWorker();
        RunBackgroundWorker();
 
    }
 
    private void RunBackgroundWorker()
    {
        backroungWorker.DoWork += ((s, args) =>
        {
            Thread.Sleep(5000); 
        });
 
        backroungWorker.RunWorkerCompleted += ((s, args) =>
        {
            this.Dispatcher.BeginInvoke(() =>
            {
                this.myPopup.IsOpen = false;
            }
        );
        });
        backroungWorker.RunWorkerAsync();
    }
}

複製代碼

4）回到AnimatedSplashScreen.xaml。
在這裏，我們將在我們的閃屏添加一些更多的元素，：TextBlock，image和PerformanceProgressBar的。

<StackPanel x:Name="LayoutRoot" Background="Black" Height="800" Width="480">
<TextBlock Text="WindowsPhoneGeek Sample Splash Screen" x:Name="text" Foreground="Green" FontSize="65" TextWrapping="Wrap" Margin="0,20,0,0"/>
<Image Source="logo.png" x:Name="logoImage" Stretch="None" Margin="0,0,0,50">
    <Image.Projection>
        <PlaneProjection/>
    </Image.Projection>
</Image>
<toolkit:PerformanceProgressBar IsIndeterminate="True" Foreground="Green"/>
</StackPanel>

複製代碼

注意：不要忘記給LayoutRoot的或UserControl設置背景，高度和寬度，否則你的啓動畫面將是透明，這時主頁將是可見的！

下一步是添加一個更復雜的動畫與視角。我們將使用一些翻轉動畫，我們將需要給圖像元素添加PlaneProjection。爲了有一個繞X軸的翻轉效果，我們需要做的是改變旋轉角度到360，並確保CernerofRotationX和CenterOfRotationY設置爲0.5（這是默認值，你不需要改變任何東西） 。我們也將生成TextBlock的前景色的動畫。
這裏動畫應該看起來如下：

<UserControl.Resources>
    <Storyboard x:Key="flippingAnimation" >
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="logoImage">
            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
            <EasingDoubleKeyFrame KeyTime="0:0:2" Value="360"/>
        </DoubleAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="text">
            <DiscreteObjectKeyFrame KeyTime="0">
                <DiscreteObjectKeyFrame.Value>
                    <SolidColorBrush Color="White"/>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
            <DiscreteObjectKeyFrame KeyTime="0:0:2">
                <DiscreteObjectKeyFrame.Value>
                    <SolidColorBrush Color="Green"/>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</UserControl.Resources>

複製代碼

我們最後開始在我們的UserControl的構造函數中開始動畫：

public AnimatedSplashScreen()
{
    InitializeComponent();
    Storyboard flippingAnimation = this.Resources["flippingAnimation"] as Storyboard;
    flippingAnimation.Begin();
}

複製代碼

5）建立並運行該項目。最終的結果應該是：

不使用閃屏
如果您不希望您的應用程序有任何閃屏，只是從您的項目刪除的文件SplashScreenImage.jpg就行。
您可能會問自己：我們爲什麼不乾脆創造一個新的一頁，並在WMAppManifest.xml中設置爲在啓動頁，但是這樣做用戶進入主頁面時，再按返回鍵會返回到啓動頁，這是我們不希望的（當然你也可以用其它方式對頁面堆棧進行管理。但這絕對不是好辦法（你將需要自己處理導航）。

我希望，這些文章對大家有幫助的。完整的源代碼可以在這裏找到：

源代碼請猛擊這裏