Wp7 allows you to create an animated flash screen and provide in-depth explanation of all the startup screen knowledge (with source code)

In this article, I will focus on the screen startup screen of Windows Phone 7. Generally, WP7 applications can:
Use images as startup screens
Use animated flash screen
Do not use pop-up Screen

By default, when you start a Windows Phone 7 Application, it takes some time to display the complete application. This is why it is better to display a custom startup screen in advance.

 

Here, I have to thank the author who has always supported me for writing such an article with interest. I would like to thank the author again for a very good wp7 Development Forum, I will also post several high-quality articles to you later. Please contact me on the noodles.

Enter the subject:

 

Use static images as the startup Screen

When you create a Windows Phone 7 Application project, you must generate a splashscreenimage.jpg image:

You can use a new one to retrieve the current splashscreenimage.jpg image.
Follow these steps:
1. Upload the image file to your project name. splashscreenimage.jpg (Note: This name is very important !)
2) image size width: 480 PX, height 800px :( 800 × ).
3) set image Build Action to Content

 

Create an animated startup Screen
First, you can use a BackgroundWorker thread. Basically, the BackgroundWorker class allows you to operate in a separate background thread, making the rendering thread and UI thread of WP7 available. If you want to respond to the user interface, this will be very necessary. You can listen on events and signals completed in the background. Call the RunWorkerAsync Method for background operations to be started.
Note: You must be careful not to operate any user interface objects in the DoWork event handler function. Of course, you can operate the user interface in the ProgressChanged and RunWorkerCompleted Event Callback functions.
For more information, see the BackgroundWorker class document in MSDN.
Now let's start with the real practices of animation flash screen. Follow these steps:
1) create a Windows Phone 7 Application Project
2) Add UserControl named AnimatedSplashScreen. xaml.
3) include the following namespace in MainPage. xaml. cs:

 

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

Add the following code to MainPage. xaml. cs:

Please note that to display the startup screen, we will add the startup screen as soon as possible during MainPage loading. We will run BackgroundWorker In the constructor. When RunWorkerCompleted is completed, the pop-up window (startup screen) will be closed, and MainPage will become visible. The following figure shows how the screen flash function works:

At first, a pop-up screen will appear
Then, we started a background Thread and did some work (Thread. Sleep (5000 );).
When the background thread is finished, call RunWorkerCompleted. the pop-up window that overwrites the main screen will be closed (myPopup. IsOpen = FALSE ).
Then, you will see your MainPage. xaml display.

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) return to AnimatedSplashScreen. xaml.
Here, we will add more elements in our splash screen: TextBlock, image and ceceprogressbar.

<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>

 

Note: Do not forget to set the background, height, and width for LayoutRoot or UserControl. Otherwise, your boot screen will be transparent and the homepage will be visible!

The next step is to add a more complex animation and perspective. We will use some flip animations and we will need to add PlaneProjection to the image element. To have a flip effect around the X axis, we need to change the rotation angle to 360 and make sure that CernerofRotationX and CenterOfRotationY are set to 0.5 (this is the default value and you don't need to change anything ). We will also generate an animation of the foreground color of TextBlock.
The animation here should look as follows:

<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>

At last, we started animation in the UserControl constructor:

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

5) Create and run the project. The final result should be:

Do not use pop-up Screen
If you do not want your application to have any flash screen, just remove the file splashscreenimage.jpg from your project.
You may ask yourself: Why don't we just create a new page, and in WMAppManifest. in xml, it is set to on the startup page, but when the user enters the home page, then press the return key to return to the startup page, this is what we don't want (of course you can manage the page stack in other ways. But this is definitely not a good solution (you will need to handle the navigation by yourself ).

I hope these articles will help you. Complete source code can be found here:

Click here for the source code