Click here to Skip to main content
Click here to Skip to main content

Windows Phone 7 better Splash screen

, 12 Feb 2011
Rate this:
Please Sign up or sign in to vote.
this article describes how to create windows phone 7 splash screen with better idea, and does now make problem with Microsoft rules.

Introduction

In this article, I will show how you can change your old windows phone splash screen to an new intelligent one, because there will be a problem when you make the splash screen appears as the first page of the project.

you know that Microsoft team checks the windows phone application before accepting it in the marketplace, and there are some rules that your application must achieve, the important one here is that when the user presses the back button on the first screen the application must close( pause ) the application, so if there is a traditional splash screen , it will appear for the user.

and in this article, I will demonstrate how to create a loading progressbar, to give your application some motions.

Using the code

First, create a new windows phone 7 project, and then create a new page called MySplash.xaml.

sp1.png

now you add a reference for the namespace System.Windows.Controls.Primitives, which will be System.Windows.Controls.

sp2.png

Then you add the progressbar to the page, I created a DLL library to replace code implementation, so you add the library ( Add Reference ) called Libs_ProgressTempCSharp which will be located in the code sample.

After that open the global application page (App.xaml) and call the library like this:

xmlns:unsupported="clr-namespace:Microsoft.Phone.Controls.Unsupported"

sp4.png

and then add this style to Application.Resources section

   <Application.Resources>

        <Style x:Key="PerformanceProgressBar" TargetType="ProgressBar">

            <Setter Property="Foreground" Value="{StaticResource PhoneAccentBrush}"/>

            <Setter Property="Background" Value="{StaticResource PhoneAccentBrush}"/>

            <Setter Property="Maximum" Value="100"/>

            <Setter Property="IsHitTestVisible" Value="False"/>

            <Setter Property="Padding" Value="{StaticResource PhoneHorizontalMargin}"/>

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="ProgressBar">

                        <unsupported:RelativeAnimatingContentControl HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">

                            <unsupported:RelativeAnimatingContentControl.Resources>

                                <ExponentialEase EasingMode="EaseOut" Exponent="1" x:Key="ProgressBarEaseOut"/>

                                <ExponentialEase EasingMode="EaseOut" Exponent="1" x:Key="ProgressBarEaseIn"/>

                            </unsupported:RelativeAnimatingContentControl.Resources>

                            <VisualStateManager.VisualStateGroups>

                                <VisualStateGroup x:Name="CommonStates">

                                    <VisualState x:Name="Determinate"/>

                                    <VisualState x:Name="Indeterminate">

                                        <Storyboard RepeatBehavior="Forever" Duration="00:00:04.4">

                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="IndeterminateRoot">

                                                <DiscreteObjectKeyFrame KeyTime="0">

                                                    <DiscreteObjectKeyFrame.Value>

                                                        <Visibility>Visible</Visibility>

                                                    </DiscreteObjectKeyFrame.Value>

                                                </DiscreteObjectKeyFrame>

                                            </ObjectAnimationUsingKeyFrames>

                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="DeterminateRoot">

                                                <DiscreteObjectKeyFrame KeyTime="0">

                                                    <DiscreteObjectKeyFrame.Value>

                                                        <Visibility>Collapsed</Visibility>

                                                    </DiscreteObjectKeyFrame.Value>

                                                </DiscreteObjectKeyFrame>

                                            </ObjectAnimationUsingKeyFrames>

                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.0" Storyboard.TargetProperty="X" Storyboard.TargetName="R1TT">

                                                <LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="0.1"/>

                                                <EasingDoubleKeyFrame KeyTime="00:00:00.5" Value="33.1" EasingFunction="{StaticResource ProgressBarEaseOut}"/>

                                                <LinearDoubleKeyFrame KeyTime="00:00:02.0" Value="66.1"/>

                                                <EasingDoubleKeyFrame KeyTime="00:00:02.5" Value="100.1" EasingFunction="{StaticResource ProgressBarEaseIn}"/>

                                            </DoubleAnimationUsingKeyFrames>

                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.2" Storyboard.TargetProperty="X" Storyboard.TargetName="R2TT">

                                                <LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="0.1"/>

                                                <EasingDoubleKeyFrame KeyTime="00:00:00.5" Value="33.1" EasingFunction="{StaticResource ProgressBarEaseOut}"/>

                                                <LinearDoubleKeyFrame KeyTime="00:00:02.0" Value="66.1"/>

                                                <EasingDoubleKeyFrame KeyTime="00:00:02.5" Value="100.1" EasingFunction="{StaticResource ProgressBarEaseIn}"/>

                                            </DoubleAnimationUsingKeyFrames>

                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.4" Storyboard.TargetProperty="X" Storyboard.TargetName="R3TT">

                                                <LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="0.1"/>
                                                <EasingDoubleKeyFrame KeyTime="00:00:00.5" Value="33.1" EasingFunction="{StaticResource ProgressBarEaseOut}"/>

                                                <LinearDoubleKeyFrame KeyTime="00:00:02.0" Value="66.1"/>

                                                <EasingDoubleKeyFrame KeyTime="00:00:02.5" Value="100.1" EasingFunction="{StaticResource ProgressBarEaseIn}"/>

                                            </DoubleAnimationUsingKeyFrames>

                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.6" Storyboard.TargetProperty="X" Storyboard.TargetName="R4TT">

                                                <LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="0.1"/>

                                                <EasingDoubleKeyFrame KeyTime="00:00:00.5" Value="33.1" EasingFunction="{StaticResource ProgressBarEaseOut}"/>

                                                <LinearDoubleKeyFrame KeyTime="00:00:02.0" Value="66.1"/>

                                                <EasingDoubleKeyFrame KeyTime="00:00:02.5" Value="100.1" EasingFunction="{StaticResource ProgressBarEaseIn}"/>

                                            </DoubleAnimationUsingKeyFrames>

                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.8" Storyboard.TargetProperty="X" Storyboard.TargetName="R5TT">

                                                <LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="0.1"/>

                                                <EasingDoubleKeyFrame KeyTime="00:00:00.5" Value="33.1" EasingFunction="{StaticResource ProgressBarEaseOut}"/>

                                                <LinearDoubleKeyFrame KeyTime="00:00:02.0" Value="66.1"/>

                                                <EasingDoubleKeyFrame KeyTime="00:00:02.5" Value="100.1" EasingFunction="{StaticResource ProgressBarEaseIn}"/>

                                            </DoubleAnimationUsingKeyFrames>

                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="R1">

                                                <DiscreteDoubleKeyFrame KeyTime="0" Value="1"/>

                                                <DiscreteDoubleKeyFrame KeyTime="00:00:02.5" Value="0"/>

                                            </DoubleAnimationUsingKeyFrames>

                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.2" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="R2">

                                                <DiscreteDoubleKeyFrame KeyTime="0" Value="1"/>

                                                <DiscreteDoubleKeyFrame KeyTime="00:00:02.5" Value="0"/>

                                            </DoubleAnimationUsingKeyFrames>

                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.4" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="R3">

                                                <DiscreteDoubleKeyFrame KeyTime="0" Value="1"/>

                                                <DiscreteDoubleKeyFrame KeyTime="00:00:02.5" Value="0"/>

                                            </DoubleAnimationUsingKeyFrames>

                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.6" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="R4">

                                                <DiscreteDoubleKeyFrame KeyTime="0" Value="1"/>

                                                <DiscreteDoubleKeyFrame KeyTime="00:00:02.5" Value="0"/>

                                            </DoubleAnimationUsingKeyFrames>

                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.8" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="R5">

                                                <DiscreteDoubleKeyFrame KeyTime="0" Value="1"/>

                                                <DiscreteDoubleKeyFrame KeyTime="00:00:02.5" Value="0"/>

                                            </DoubleAnimationUsingKeyFrames>

                                        </Storyboard>

                                    </VisualState>

                                </VisualStateGroup>

                            </VisualStateManager.VisualStateGroups>

                            <Grid>

                                <Grid x:Name="DeterminateRoot" Margin="{TemplateBinding Padding}" Visibility="Visible">

                                    <Rectangle x:Name="ProgressBarTrack" Fill="{TemplateBinding Background}" Height="4" Opacity="0.1"/>

                                    <Rectangle x:Name="ProgressBarIndicator" Fill="{TemplateBinding Foreground}" HorizontalAlignment="Left" Height="4"/>

                                </Grid>

                                <Border x:Name="IndeterminateRoot" Margin="{TemplateBinding Padding}" Visibility="Collapsed">

                                    <Grid HorizontalAlignment="Left">

                                        <Rectangle Fill="{TemplateBinding Foreground}" Height="4" IsHitTestVisible="False" Width="4" x:Name="R1" Opacity="0" CacheMode="BitmapCache">

                                            <Rectangle.RenderTransform>

                                                <TranslateTransform x:Name="R1TT"/>

                                            </Rectangle.RenderTransform>

                                        </Rectangle>

                                        <Rectangle Fill="{TemplateBinding Foreground}" Height="4" IsHitTestVisible="False" Width="4" x:Name="R2" Opacity="0" CacheMode="BitmapCache">

                                            <Rectangle.RenderTransform>

                                                <TranslateTransform x:Name="R2TT"/>

                                            </Rectangle.RenderTransform>

                                        </Rectangle>

                                        <Rectangle Fill="{TemplateBinding Foreground}" Height="4" IsHitTestVisible="False" Width="4" x:Name="R3" Opacity="0" CacheMode="BitmapCache">

                                            <Rectangle.RenderTransform>

                                                <TranslateTransform x:Name="R3TT"/>

                                            </Rectangle.RenderTransform>

                                        </Rectangle>

                                        <Rectangle Fill="{TemplateBinding Foreground}" Height="4" IsHitTestVisible="False" Width="4" x:Name="R4" Opacity="0" CacheMode="BitmapCache">

                                            <Rectangle.RenderTransform>

                                                <TranslateTransform x:Name="R4TT"/>

                                            </Rectangle.RenderTransform>

                                        </Rectangle>

                                        <Rectangle Fill="{TemplateBinding Foreground}" Height="4" IsHitTestVisible="False" Width="4" x:Name="R5" Opacity="0" CacheMode="BitmapCache">

                                            <Rectangle.RenderTransform>

                                                <TranslateTransform x:Name="R5TT"/>

                                            </Rectangle.RenderTransform>

                                        </Rectangle>

                                    </Grid>

                                </Border>

                            </Grid>

                        </unsupported:RelativeAnimatingContentControl>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

    </Application.Resources>

    

try to arrange and decorate your splash screen as the way you like ( I choose the simplest one ) add your progressbar control, select its forecolor, and don't forget to use the style for it.
    <ProgressBar x:Name="DownloadProgress" IsIndeterminate="False" 
    Style="{StaticResource PerformanceProgressBar}" Margin="0,347,7,173" />
sp3.png please don't forget to Indeterminate the progressbar from the page load event
    this.DownloadProgress.IsIndeterminate = true;

    
so, still nothing new to now, make the other page ( not the splash page ) the default page ( DefaultTask ) , of course you have to change it from the WMAppManifest.xml file. and here I call the page [ MainPage.xaml ]
open the MainPage.xaml and call this namespaces
using System.Threading;
using System.Windows.Controls.Primitives;


the first namespace [Threading] contains the BackgroundWorker class which used for multithreading, and it will be used to Sleep the thread for the time you want

The second namespace contains a control called Popup which responsible for showing a page or usercontrol or any piece on the current page

So let's write the code


 add this code inside the class
    Popup Mypopup = new Popup() { IsOpen = true, Child = new MySplash() };


     BackgroundWorker MybackroungWorker=new BackgroundWorker();

    
I used object initializer for the Popup  , then  sat the IsOpen  member variable to true, and the second thing ( important ) I sat the name of the child element that I will show ( and here it's my splash which is called, MySplash ) , you must know that we call the name of the page class, not the name of the page.
write this methodmethod
        
 private void PopupView()

        {

            MybackroungWorker.DoWork += ((s, args) =>

            {

                Thread.Sleep(4000); // time here

            });


            

            MybackroungWorker.RunWorkerCompleted += ((s, args) =>

            {

                this.Dispatcher.BeginInvoke(() =>
 {
                    this.Mypopup.IsOpen = false;
                }
                    );
            });
            MybackroungWorker.RunWorkerAsync();
        }


this method is called the popup . set the backgroundworker time to stop the thread via the Thread.Sleep() method , which takes a parameter value by millisecond, and here its 4 seconds (4000 millisecond)

you need to call the method now, I prefer to call it in the constructor

    PopupView();

Still some work is left, when you press the back button, this popup will appear so I will make a public static variable, which will detect if the splash is opened or not

make a class with a public static variable called IsOpened ,

    public class General 
{


    public static bool IsOpen = false;

}

check the process before calling the PopupView method

    if (General.IsOpen==false)


    PopupView();


    General.IsOpen = true;

Points of Interest

The amazing thing in the code is the Popup class, which can be used wildly, and it will give your project nice effects, for example you can use it for displaying the about information

( may be opacity ), disappearing the about information when the user press it, ... etc, I will let you free to think and create.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

khalil saleem
Web Developer Developers.ps
Palestinian Territory (Occupied) Palestinian Territory (Occupied)
.net developer since year 2002
asp.net expert, WAP , Silverlight, Windows Phone, I hope that I give Human kind some thing useful
Follow on   Twitter

Comments and Discussions

 
QuestionLibs_ProgressTempCSharp is not found Pinmemberkylin174-Sep-11 9:16 
GeneralError PinmemberNickelless9-Mar-11 0:55 
GeneralMy vote of 1 Pinmemberh3213-Feb-11 5:20 
GeneralRe: My vote of 1 PinmvpPete O'Hanlon14-Feb-11 0:48 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140821.2 | Last Updated 12 Feb 2011
Article Copyright 2011 by khalil saleem
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid