Creating and using Splash Screen in Silverlight 2.0.

 

In this lab, we will try out a “Splash Screen” screen. So, What is Splash Screen?

Splash Screen is a XAML (Extensible Application Markup Language) code, which will get splashed before downloading the .XAP file at client’s browser. Sometimes,if the .XAP file is bulky in size or end user’s bandwidth is poor, then downloading of .XAP always takes time. Till the time you can keep user entertained in various ways- For Example, You can play small animation or you can show download progress or show company Logo and many more !!

So, Let’s get started -

1) Create a Silverlight Project with the name SLSplashScreenApplication.

2) Once your project is created, let’s add a .MP3 or .WMV file into Silverlight project.

3) Then, bundle the same media file with .XAP file. You may have other contents also in your .XAP file as shown bellow - But for this Lab to make our .XAP file bulky in size, we are taking a media file.

Note-: Try to keep your .XAP file as small as you can.

4) I have taken a Sample Video “Taare Zameen Par.mp3” which I am deploying with .XAP file. ( I have renamed the file to Taare.mp3" )

5) Now, add a MediaElement into Page.xaml and then set Source property of the same to our MP3 song and make its AutoPlay property “True” as shown bellow-

<UserControl x:Class="SLSplashScreenApplication.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="Black">
        <MediaElement x:Name="Bear" AutoPlay="True" Height="400"
 Width="600"  Source="/Taare.mp3"/>
    </Grid>
</UserControl>

6) Now add to add a SplashScreen int our application, right click to Web Site and add a XMLFile with name and extension as shown bellow-

7) Now add small Animation and a TextBlock in our SplashScreen.xaml file as shown in bellow code-

<Grid
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
  <Grid.Resources>
    <Storyboard x:Name="Ani" RepeatBehavior="Forever" >
      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
 Storyboard.TargetName="e2" Storyboard.TargetProperty="(UIElement.Opacity)">
        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="1"/>
        <SplineDoubleKeyFrame KeyTime="00:00:00.7000000" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:00.8000000" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:00.9000000" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:01" Value="0"/>
      </DoubleAnimationUsingKeyFrames>
      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
Storyboard.TargetName="e4" Storyboard.TargetProperty="(UIElement.Opacity)">
        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:00.7000000" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:00.8000000" Value="1"/>
        <SplineDoubleKeyFrame KeyTime="00:00:00.9000000" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:01" Value="0"/>
      </DoubleAnimationUsingKeyFrames>
      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
Storyboard.TargetName="e5" Storyboard.TargetProperty="(UIElement.Opacity)">
        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:00.7000000" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:00.8000000" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:00.9000000" Value="1"/>
        <SplineDoubleKeyFrame KeyTime="00:00:01" Value="0"/>
      </DoubleAnimationUsingKeyFrames>
      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
Storyboard.TargetName="e6" Storyboard.TargetProperty="(UIElement.Opacity)">
        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:00.7000000" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:00.8000000" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:00.9000000" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:01" Value="1"/>
      </DoubleAnimationUsingKeyFrames>
      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
Storyboard.TargetName="e3" Storyboard.TargetProperty="(UIElement.Opacity)">
        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:00.7000000" Value="1"/>
        <SplineDoubleKeyFrame KeyTime="00:00:00.8000000" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:00.9000000" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:01" Value="0"/>
      </DoubleAnimationUsingKeyFrames>
      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
Storyboard.TargetName="e1" Storyboard.TargetProperty="(UIElement.Opacity)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:00.7000000" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:00.8000000" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:00.9000000" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:01" Value="0"/>
      </DoubleAnimationUsingKeyFrames>
    </Storyboard>

  </Grid.Resources>
  <Grid.Background>
    <RadialGradientBrush>
      <GradientStop Color="#FF000000"/>
      <GradientStop Color="#FF2A2779" Offset="0.50400000810623169"/>
    </RadialGradientBrush>
  </Grid.Background>
  <TextBlock FontSize="20"  Foreground="Gold" Text="Show Progress !!" 
x:Name="txtProgress"/>
  <Ellipse HorizontalAlignment="Left" Margin="132,203,0,209" 
VerticalAlignment="Stretch" Width="79" Stroke="#FF000000" x:Name="e1">
    <Ellipse.Fill>
      <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FF000000"/>
        <GradientStop Color="#FF88C81E" Offset="1"/>
      </LinearGradientBrush>
    </Ellipse.Fill>
  </Ellipse>
  <Ellipse HorizontalAlignment="Left" Margin="226,212,0,218" 
VerticalAlignment="Stretch" Width="64" Stroke="#FF000000" x:Name="e2">
    <Ellipse.Fill>
      <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FF000000"/>
        <GradientStop Color="#FF88C81E" Offset="1"/>
      </LinearGradientBrush>
    </Ellipse.Fill>
  </Ellipse>
  <Ellipse HorizontalAlignment="Right" Margin="0,225,220,225" 
VerticalAlignment="Stretch" Stroke="#FF000000" Width="44" x:Name="e4">
    <Ellipse.Fill>
      <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FF000000"/>
        <GradientStop Color="#FF88C81E" Offset="1"/>
      </LinearGradientBrush>
    </Ellipse.Fill>
  </Ellipse>
  <Ellipse HorizontalAlignment="Right" Margin="0,230,170,230" 
VerticalAlignment="Stretch" Stroke="#FF000000" Width="34" x:Name="e5">
    <Ellipse.Fill>
      <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FF000000"/>
        <GradientStop Color="#FF88C81E" Offset="1"/>
      </LinearGradientBrush>
    </Ellipse.Fill>
  </Ellipse>
  <Ellipse HorizontalAlignment="Right" Margin="0,234,126,235" 
VerticalAlignment="Stretch" Stroke="#FF000000" Width="28" x:Name="e6">
    <Ellipse.Fill>
      <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FF000000"/>
        <GradientStop Color="#FF88C81E" Offset="1"/>
      </LinearGradientBrush>
    </Ellipse.Fill>
  </Ellipse>
  <Ellipse HorizontalAlignment="Stretch" Margin="305,220,278,217" 
VerticalAlignment="Stretch" Stroke="#FF000000" x:Name="e3">
    <Ellipse.Fill>
      <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FF000000"/>
        <GradientStop Color="#FF88C81E" Offset="1"/>
      </LinearGradientBrush>
    </Ellipse.Fill>
  </Ellipse>
</Grid>

7) The code looks lengthy, but it is playing a small animation. It is Showing a big Ellipse and small,

small, small by hiding the previous one.

9) Now open “SLSplashScreenApplicationTestPage.html” Page and 

following two parameters into <object/> tag 

which is acting like a Silverlight container control-

<param name="splashscreensource" value="SplashScreen.xaml" />
<param name="onsourcedownloadprogresschanged"
 value="OnSourceDownloadProcressChanged" />

i) Give a SplashScreen.xaml file as a source to parameter named as splashscreensource.

ii) Second parameter will allow us to access the controls or resources which we are using in 

SplashScreen.xaml by using JavaScript function and do some dynamic, entertaining work like mentioned earlier.

iii) It will even allow us to track, download of .XAP file 

in percentage format which 

we can display in to our SplashScreen.xaml file.

10) So, now let’s write JavaScript function,

 which will display the download progress in percentage 

into the TextBlock which is there in 

SplashScreen.xaml and play the animation as well.

function OnSourceDownloadProcressChanged(sender, args)
{
    sender.findName("txtProgress").Text =
 "Download Progress is : [" + args.progress + "]";
    sender.findName("Ani").Begin();
}

11) That’s all !! Hit F5 by making “SLSplashScreenApplicationTestPage.html” as a start up page and see your splash screen is working.

Now as you have completed writing the twelve Silverlight Lab, let’s have a closer look on thirteenth lab “Using Custom Types in XAML.”