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

Custom Splash Screen using Silverlight 4.0

, 10 May 2011 CPOL
Rate this:
Please Sign up or sign in to vote.
How to make Custom Splash Screen using Sliverlight 4.0

Introduction

In this post, I am going to show you Custom Splash Screen using Silverlight 4.0.

Background

The Silverlight splash screen model relies on three properties that are exposed by Silverlight.

  • splashscreensource: The URI of an XAML page that displays while the primary package (source) is being downloaded
  • onsourcedownloadprogresschanged: References a JavaScript event handler that will be invoked continuously while the source is being downloaded
  • onsourcedownloadcomplete: References a JavaScript event handler that will be invoked once, when the source download is complete. (For more on this property, click here.)

Using the Code

For adding a custom splash screen:

CustomSplashScreen.jpg

  1. Create a Silverlight application into Visual Studio name "CustomSplashScreen".
    To replace the default behavior, you will be changing the CustomSplashScreen_Web project, not the CustomSplashScreen project. This is because the XAML page for the splash screen must be outside of the package. Otherwise, it wouldn't be available while the package itself was downloading.
  2. Right-click CustomSplashScreen.Web in the Solution Explorer and choose Properties. Click the Web tab. Change the Start Action default page from CustomSplashScreenTestPage.aspx to CustomSplashScreenTestPage.html.
  3. Right-click CustomSplashScreen.Web in the Solution Explorer and choose Add, New Item. Select the Silverlight option in the Categories tree view. Choose the Silverlight JScript Page option. Name the page SplashScreen.xaml. Click Add.
  4. SplashScreen.xaml for editing, if it is not already open. This is where you will author your splash screen. Select All and Paste over the existing code with the following, then save the file:
    <Grid x:Name="LayoutRoot"
          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"
          d:DesignHeight="300"
          d:DesignWidth="400">
        <Grid.Background>
    
            <RadialGradientBrush>
                <RadialGradientBrush.RelativeTransform>
                    <TransformGroup>
                        <ScaleTransform CenterX="0.5"
                                        CenterY="0.5"
    
                                        ScaleX="2"
                                        ScaleY="3" />
                        <TranslateTransform X="0.5"
                                            Y="0.5" />
    
                    </TransformGroup>
                </RadialGradientBrush.RelativeTransform>
                <GradientStop Color="#FFF26300"
                              Offset="0.282" />
                <GradientStop Color="#FFE29360"
    
                              Offset="1" />
            </RadialGradientBrush>
        </Grid.Background>
    
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
    
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid  Grid.Column="0"
               Width="300"
    
               Height="300"
               Grid.Row="0"
               HorizontalAlignment="Center"
               VerticalAlignment="Center">
            <Ellipse Width="200"
    
                     Height="200"
                     HorizontalAlignment="Center"
                     VerticalAlignment="Center"
                     Margin="0,0,0,0"
                     Fill="#FFF4A168"
    
                     Opacity="0.8" />
            <Ellipse Width="180"
                     Height="180"
                     HorizontalAlignment="Center"
    
                     VerticalAlignment="Center"
                     Margin="0,0,0,0"
                     Fill="#FFF26300"
                     Opacity="0.5" />
    
            <TextBlock x:Name="textBlock1"
                       TextWrapping="Wrap"
                       FontSize="110"
                       FontFamily="Trebuchet MS"
    
                       Foreground="White"
                       Text="100"
                       Opacity="0.8"
                       HorizontalAlignment="Center"
                       VerticalAlignment="Center" />
        </Grid>
    
        <Grid Grid.Row="1"
              Margin="0,0,0,50">
    
            <Rectangle Height="5"
    
                       Margin="0,10"
                       HorizontalAlignment="Stretch">
                <Rectangle.Fill>
                    <LinearGradientBrush EndPoint="0.5,1"
                                         StartPoint="0.5,0">
    
                        <GradientStop Color="#FFBBD2E8"
                                      Offset="0" />
                    </LinearGradientBrush>
                </Rectangle.Fill>
            </Rectangle>
    
            <Rectangle Height="8"
                       HorizontalAlignment="Stretch">
                <Rectangle.Fill>
                    <LinearGradientBrush EndPoint="0.5,1"
                                         StartPoint="0.5,0">
    
                        <GradientStop Color="#FF6BAAE8"
                                      Offset="0" />
                        <GradientStop Color="#FF216AB1"
                                      Offset="1" />
    
                    </LinearGradientBrush>
                </Rectangle.Fill>
                <Rectangle.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform ScaleX="1"
                                        ScaleY="1"
    
                                        x:Name="scaleTransform" />
                        <SkewTransform AngleX="0"
                                       AngleY="0" />
                        <RotateTransform Angle="0" />
    
                        <TranslateTransform X="0"
                                            Y="0"
                                            x:Name="translateTransform" />
                    </TransformGroup>
    
                </Rectangle.RenderTransform>
            </Rectangle>
           
        </Grid>
    </Grid>
  5. Return to the Silverlight object element area of SplashScreenSourceTestPage.html for editing. Notice that there are a number of "params" elements as child elements of object already. You will now add several params elements to add your custom splash screen information. Add the following params elements:
    <param name="splashscreensource" value="SplashScreen.xaml" />
    
    <param name="onSourceDownloadProgressChanged" 
    	value="onSourceDownloadProgressChanged" />
  6. The second params element is referencing a JavaScript event handler, which you must now define. Right-click CustomSplashScreen.Web in the Solution Explorer. Find the file SplashScreen.js in the solution's file list (this file was added when you added SplashScreen.xaml in a previous step. Open SplashScreen.js for editing.
  7. Delete all pre-existing content of SplashScreen.js. Paste in the following onSourceDownloadProgressChanged function, which will update the progress bar in SplashScreen.xaml.
    function onSourceDownloadProgressChanged(sender, eventArgs)
    {
    sender.findName("textBlock1").Text = 
    	Math.round((eventArgs.progress * 100), 0).toString();
    sender.findName("scaleTransform").ScaleX = eventArgs.progress;
    }
  8. Return to CustomSplashScreenTestPage.html for editing. You still need to reference the JavaScript file you just created. Just after the head element in the HTML, add the following...
    <script type="text/javascript" src="splashscreen.js" />

    ... to your project and make sure that it compiles. The start action at this point will now load CustomSplashScreenTestPage.html and first load your splash screen, and then the source.

    Tip: Clear your browser cache (otherwise, the assembly might still be cached as content by the browser, and you will not experience the load time). Run the application again.

That's all. Enjoy...

License

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

Share

About the Author

KevinBhavsar
Software Developer (Senior) Indralok Technology Pvt. Ltd.
India India
Hello all,
I am Kevin Bhavsar working as Senior Software Engineer in Indralok Technology Pvt. Ltd. at Baroda.
 
"I find that the harder I work, the more luck I seem to have."
 
You can visit my blog at:
http://silverlightfun.blogspot.com/
Follow on   Twitter

Comments and Discussions

 
Questioncustom splash screen not showing Pinmemberpatobenitz11-Jun-13 5:23 
AnswerRe: custom splash screen not showing PinmemberKevinBhavsar21-Jun-13 19:50 
QuestionSplash page not appearing after deploying Silverlight application Pinmemberashok_n31-May-12 5:32 
AnswerRe: Splash page not appearing after deploying Silverlight application PinmemberKevinBhavsar1-Jan-13 19:15 
GeneralNice PinmemberCIDev13-May-11 3:30 
GeneralRe: Nice PinmemberKevinBhavsar15-May-11 19:14 
Thanks Smile | :)
Kevin C. Bhavsar
Senior Software Engineer

GeneralWhat's Sliverlight? PinmemberJohnny J.10-May-11 22:04 
GeneralMy vote of 5 PinmvpKunal_Chowdhury10-May-11 5:47 
GeneralRe: My vote of 5 PinmemberKevin Bhabsar10-May-11 20:10 
Generalnice one PinmemberPranay Rana10-May-11 5:06 
GeneralRe: nice one PinmemberKevin Bhabsar10-May-11 20:10 

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.141015.1 | Last Updated 11 May 2011
Article Copyright 2011 by KevinBhavsar
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid