Click here to Skip to main content
14,028,764 members
Click here to Skip to main content
Add your own
alternative version


60 bookmarked
Posted 9 Oct 2010
Licenced CPOL

WPF Loading Splash Screen

, 9 Oct 2010
Rate this:
Please Sign up or sign in to vote.
Simple animated loading text, like last MSN messenger, show animation and transparent mask in WPF


In the last version of MSN messenger, you can notice simple animated text loading when you login to your account. I tried to make something similar to make the application loading look professional.

Step by Step

Create Splash Window

Add a new window to your WPF application. You can call it Splashwindow, to make the window borderless and top most you need to add some properties as follows by adding to XAML in window tag or by using property panel.

WindowStyle="None" WindowStartupLocation="CenterScreen" 
	ResizeMode="NoResize" ShowInTaskbar="False" Topmost="True"

Change BackGround

By default, the new window content contains a grid. We can change the grid background using linear gradient brush by adding the following code:

           <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
               <GradientStop Color="#FFB9BBFF" Offset="0" />
               <GradientStop Color="White" Offset="1" />
               <GradientStop Color="White" Offset="0.72" />

It will look like this:


Add Opacity Mask

To make effect of fading, we need to create a second grid to cover the lower half of the window with opacity mask. That will lead to fading effect when the text moves from the border to the center of the grid, the mask will be transparent in the lower and upper part of the second grid, and adding text to the grid to display the loading message, the sequence of display is moved from down to the middle with the new text then moving to the top to hide.

The following code of XAML creates the masked grid with text box:

<Grid VerticalAlignment="Bottom" HorizontalAlignment="Stretch"
   Height="150" Background="#00FFFFFF">
               <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                   <GradientStop Color="#00000000" Offset="0.283"/>
                   <GradientStop Color="#00000000" Offset="0.778"/>
                   <GradientStop Color="White" Offset="0.491"/>
           <TextBlock x:Name="txtLoading" TextAlignment="Left"
       FontSize="16" FontWeight="Normal"  Foreground="#FF052045"
       Text="Beta 0.9"  TextWrapping="Wrap" VerticalAlignment="Bottom"
       HorizontalAlignment="Right" Width="421" >
    <DropShadowEffect BlurRadius="6" Color="#FF797979" Direction="201"
       Opacity="0.68" ShadowDepth="3" />

The grid background value is =#00FFFFFF which is completely transparent. We don't need to show the grid but without background, the mask will not work. You can notice in the previous XAML that the textblock has shadow effect.

In design view, it will look like this:


Create Animation

In WPF, you can define animation. You don't need to write it yourself. In Microsoft Blend, just add a new storyboard and define key frames and make change like Flash but WPF will generate a readable format for animation. The animation will be defined in window resources tag and accessed by key. The following code shows two storyboards, each one having a one second duration, just change the bottom margin of textblock to move from the hidden region to visible according to opacity mask and vice versa.

        <Storyboard x:Key="showStoryBoard">
            <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty=
		"(FrameworkElement.Margin)" Storyboard.TargetName="txtLoading">
                <EasingThicknessKeyFrame KeyTime="0:0:0" Value="0,0,0,0"/>
                <EasingThicknessKeyFrame KeyTime="0:0:1" Value="0,0,0,70"/>
        <Storyboard x:Key="HideStoryBoard">
            <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty=
		"(FrameworkElement.Margin)" Storyboard.TargetName="txtLoading">
                <EasingThicknessKeyFrame KeyTime="0:0:0" Value="0,0,0,70"/>
                <EasingThicknessKeyFrame KeyTime="0:0:1" Value="0,0,0,150"/>

Working with Code Behind

Now we have created what we need in XAML. In code behind, we will create a thread to do loading work and make animation to the text, first we need to access animation, define two storyboard objects to access window resources storyBoards.

Storyboard Showboard;
Storyboard Hideboard;

To access the window resource by the following code, just after InitializeComponent() call:

Showboard = this.Resources["showStoryBoard"] as Storyboard;
Hideboard = this.Resources["HideStoryBoard"] as Storyboard;

Create two functions - one to show the text and one to hide as follows:

 private void showText(string txt)
           txtLoading.Text = txt;
private void hideText()

We need to create delegate for each function to enable calling form the loading thead as follows:

private void load()
          this.Dispatcher.Invoke(showDelegate, "first data to loading");
          //do some loading work

          this.Dispatcher.Invoke(showDelegate, "second data loading");
          //do some loading work

          this.Dispatcher.Invoke(showDelegate, "last data loading");
           //do some loading work

          //close the window
      (Action)delegate() { Close(); });

Displaying the Splash

There are many ways to display the splash screen, but the simplest way I think is just add the following after InitializeComponent in main window:

new SplashWindow().ShowDialog();

I hope you found that useful.

Points of Interest

The main point is using of opacity mask and accessing storyboard form code behind, and the power of animation in WPF.


  • 10th October, 2010: Initial post


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


About the Author

amr azab
Software Developer hlogic
Egypt Egypt
work mainly with microsoft .net technology ,not because it is the better ,but it is growing rapidly and take advantages of other technologies, i don't hate java but it is not my first choice.

You may also be interested in...

Comments and Discussions

GeneralTo Continue to main Window after Splash screen loading is complete Pin
Zoyeb Shaikh27-Sep-18 16:43
professionalZoyeb Shaikh27-Sep-18 16:43 
PraiseExcellent Creativity ! Pin
C. A. Bradley10-Aug-17 9:03
memberC. A. Bradley10-Aug-17 9:03 
BugCompiler Error on showDelegate Pin
MayurPadhiyar26-Feb-16 0:26
memberMayurPadhiyar26-Feb-16 0:26 
Questiongood and it is useful Pin
karthik cad/cam19-Sep-14 1:35
memberkarthik cad/cam19-Sep-14 1:35 
GeneralMy vote of 1 Pin
Member 800649730-Jul-14 2:58
memberMember 800649730-Jul-14 2:58 
QuestionNot in a thread Pin
jian.zeng25-Jul-13 23:33
memberjian.zeng25-Jul-13 23:33 
GeneralMy vote of 5 Pin
Utkatsh Patnaik10-Jun-13 22:03
memberUtkatsh Patnaik10-Jun-13 22:03 
QuestionGreat, easy, nice and short Pin
OdinsAuge21-Mar-13 0:30
memberOdinsAuge21-Mar-13 0:30 Pin
Claire Joy Abequibel28-Aug-12 8:44
memberClaire Joy Abequibel28-Aug-12 8:44 
GeneralMy vote of 5 Pin
Monir Sabbagh9-Mar-12 19:23
memberMonir Sabbagh9-Mar-12 19:23 Pin
maxvalt196527-Nov-11 9:52
membermaxvalt196527-Nov-11 9:52 
GeneralMindblowing creativity. In wild words, Its f***ing beautiful Pin
Vinayaka Amaresh10-Jun-11 21:01
memberVinayaka Amaresh10-Jun-11 21:01 
QuestionAwesome splash screen, but not quite a "real" splash screen? Pin
Raymond Zwiener18-Nov-10 17:53
memberRaymond Zwiener18-Nov-10 17:53 
GeneralMy vote of 4 Pin
png_drummer@hotmail.com8-Nov-10 18:53
memberpng_drummer@hotmail.com8-Nov-10 18:53 
GeneralMy vote of 2 Pin
FantasticFiasco12-Oct-10 20:22
memberFantasticFiasco12-Oct-10 20:22 
gawady12-Oct-10 7:28
membergawady12-Oct-10 7:28 

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

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

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web03 | 2.8.190419.4 | Last Updated 10 Oct 2010
Article Copyright 2010 by amr azab
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid