Creating a Beautiful Splash Screen For Silverlight Applications

Supreet Tare

XAML Splash ScreenSilverlight Applicationsjava Script fileSilverlight 1.0 Javascript pageTelerik's Silverlight

10 Comments

Join the conversation! Your thoughts help the community grow.

Chase Thomas12y ago
Great article - we had some problems getting the splash screen to load using a site with Windows Auth (IIS kept giving me a 404 error for the splash screen XAML file ) To fix this problem I just had to add an XML declaration to the top of the xaml file - that solved our problem!
Supreet Tare13y ago
you are using a Silverlight splash screen JS Page & not a general Silverlight page right?
- Samsoum sam13y ago
  Hi, I had the same error then ''nitin nitin''': 'Grid' root element requires a x:Class attribute to support event handlers in the XAML file. Either remove the event handler for the Completed event, or add a x:Class attribute to the root element. Is there a solution for that. Thank you very match
nitin nitin13y ago
This is my splashscreen.xaml <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="768" d:DesignWidth="1024"> <Grid.Background> <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> <GradientStop Color="#3e3632" Offset="0.0" /> <GradientStop Color="#3e3632" Offset="0.25" /> <GradientStop Color="#292421" Offset="0.55" /> <GradientStop Color="#292421" Offset="1.0" /> </LinearGradientBrush > </Grid.Background> <Grid.Resources> <Storyboard x:Name="sb1" x:Key="textblock" RepeatBehavior="1x" Completed="onCompleted"> <DoubleAnimation Duration="0:0:5" To="255" Storyboard.TargetProperty="X" Storyboard.TargetName="myTranslate" d:IsOptimized="True"/> </Storyboard> </Grid.Resources> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <Grid Grid.Row="0"> <Grid.ColumnDefinitions> <ColumnDefinition Width="1.5*"/> <ColumnDefinition Width="97*"/> <ColumnDefinition Width="1.5*"/> </Grid.ColumnDefinitions> <Grid Grid.Column="1"> <Grid.RowDefinitions> <RowDefinition Height="15*"/> <RowDefinition Height="85*"/> </Grid.RowDefinitions> <Grid Grid.Row="1"> <Grid.ColumnDefinitions> <ColumnDefinition Width="33.3*"/> <ColumnDefinition Width="63.7*"/> </Grid.ColumnDefinitions> <Grid Grid.Column="1"> <Grid.ColumnDefinitions> <ColumnDefinition Width="38.7*"/> <ColumnDefinition Width="2.9*"/> <ColumnDefinition Width="22.1*"/> </Grid.ColumnDefinitions> <Grid Grid.Column="0"> <Grid.RowDefinitions> <RowDefinition Height="16.9*"/> <RowDefinition Height="2.7*"/> <RowDefinition Height="5.4*"/> <RowDefinition Height="61.3*"/> </Grid.RowDefinitions> <TextBlock Text="Mahindra" Foreground="#fff" FontSize="84" HorizontalAlignment="Right" VerticalAlignment="Center" FontFamily="Fonts/SegoeBd.ttf#Segoe" Grid.Row="0"></TextBlock> <TextBlock Text="PV Plant Control" Foreground="#fff" FontSize="30" HorizontalAlignment="Right" VerticalAlignment="Center" FontFamily="Fonts/SegoeL.ttf#Segoe Light" Grid.Row="2"></TextBlock>  <TextBlock x:Name="textBlock" HorizontalAlignment="Left" TextWrapping="Wrap" Text="Be it Videos, Images, Flash or Audio we support all." VerticalAlignment="Center" Grid.Row="4" Height="400" Width="350" Foreground="#FF24A9F3" FontSize="18" RenderTransformOrigin="0.5,0.5" Margin="20,0,0,0"> <TextBlock.RenderTransform> <TransformGroup> <TranslateTransform x:Name="myTranslate"/> </TransformGroup> </TextBlock.RenderTransform>   </TextBlock> </Grid> <Grid Grid.Column="1"> <Grid.RowDefinitions> <RowDefinition Height="24*"/> <RowDefinition Height="61.3*"/> </Grid.RowDefinitions>  </Grid> <Grid Grid.Column="2" Width="300" Height="300" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Top"> <Ellipse Width="200" Height="200" HorizontalAlignment="Center" VerticalAlignment="top" Margin="0,0,0,0" Fill="#e61740" Opacity="0.8" /> <Ellipse Width="180" Height="180" HorizontalAlignment="Center" VerticalAlignment="top" Margin="0,10,0,0" Fill="#e61740" Opacity="0.5" /> <TextBlock x:Name="textBlock1" TextWrapping="Wrap" FontSize="110" FontFamily="Trebuchet MS" Foreground="White" Text="100" Opacity="0.8" Margin="-9,38,0,0" HorizontalAlignment="Center" VerticalAlignment="top" /> </Grid>  </Grid> </Grid> </Grid> </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="#e61740" Offset="0" /> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> <Rectangle Height="8" HorizontalAlignment="Stretch"> <Rectangle.Fill> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#e61740" Offset="0" /> <GradientStop Color="#e61740" 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>
nitin nitin13y ago
I am getting error for Storyboard completed="Oncompleted" 'Grid' root element requires a x:Class attribute to support event handlers in the XAML file. Either remove the event handler for the Completed event, or add a x:Class attribute to the root element.
Supreet Tare13y ago
@Mahesh Sir, Thanks for your advise. Changed the tag now. :)
Mahesh Chand13y ago
Got it @Supreet. Feel free to edit your article keywords using Article Edit feature. And yes we are working on better comment control and notifications on the site :) Cheers!
Supreet Tare13y ago
Just realized there are actually 2 different comment sections & I should use this one while replying then the Facbook one. I am not sure if you will receieve a notification for the comments posted as FB user below. Copying the content here again :) Dear @Mahesh Sir, The tag was due to the Splash File Extension that we can use in Silverlight Projects. I actually meant to use 'Silverlight 1.0 Javascript Page' the default page name that we need to use to show custom splash screens. Somehow I tagged it as 2 different Tags called Silverlight 1.0 & Javascript. Blame the extra caffeine consumed :P We are using Silverlight 5 in our projects. :)
Mahesh Chand13y ago
Nice Supreet. In your article tags, you have Silverlight 1.0. I was curious if you are using Silverlight in your company's project and if you were still using Silverlight 1?
Dinesh Beniwal13y ago
Good Start Supreet, Welcome to the C# Corner.

There are many other great articles and blog posts on how to create simple Silverlight Splash Screens. This article adds on top of them and helps you design a more complex splash screen with Story Boards and Floating Text Blocks.

I am not a great designer and thus I am taking a design que from Telerik's Silverlight Demos splash screen. They have some amazing designers and their splash screen is an amazing example of that. If you have not already noticed it please visit http://demos.telerik.com/silverlight/ and have a look yourself. We will try to replicate the same behavior in our splash screen.

Here is a step-by-step guide to do this.

1. Create your XAML

In order to add the splash screen you will first need to add a new Silverlight 1.0 JavaScript (we will refer to it as SLJS for the sake of writing simplicity) page on your server side code.

Since you cannot modify this file in Blend, I created a new Silverlight project and created a new Silverlight User control in it.

Once I had completed the design of this page in Blend, I copied the content to the Silverlight JS page on the server side.

I had to make a few modifications that are listed below.

First delete the x:class namespace as that is not supported on a SLJS page
Also delete the underlying code file (in my case it was SplashScreen.xaml.cs)
I added a storyboard animation to float the text from left to right

<Grid.Resources>

<Storyboardx:Name="sb1"RepeatBehavior="1x"Completed="onCompleted">

<DoubleAnimationDuration="0:0:5"To="255"

Storyboard.TargetProperty="X"Storyboard.TargetName="myTranslate"d:IsOptimized="True"/>

</Storyboard>

</Grid.Resources>

Based on your design, the following content may change (I designed it to match the same as Telerik's splash page):

<Grid Background="#FFF4F4F4" RenderTransformOrigin="0.5,0.5"> <Grid.RowDefinitions> <RowDefinition Height="120"/> <RowDefinition Height="32"/> <RowDefinition Height="8"/> <RowDefinition Height="20"/>
 <RowDefinition Height="375*"/> </Grid.RowDefinitions> <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Grid.Row="0" Text="Silverlight" VerticalAlignment="Top" Height="153" Width="806" FontSize="133.333" 
Foreground="#FFEEEEEE" Grid.RowSpan="3"/> <!--<StackPanel Orientation="Horizontal" Grid.Row="1" Margin="100,0,0,0" >
<Image Source="/Content/np_logo.PNG" Margin="0,0,5,0" Width="32" />
<TextBlock Text="Netpractise" FontSize="26.667" Foreground="Black"  FontFamily="Moire Light" x:Name="editing" FontWeight="ExtraBold" Height="32"/>
</StackPanel>--> <Image Source="/Content/np.PNG" Grid.Row="1" Margin="100,0,0,0" HorizontalAlignment="Left" /> <Rectangle Height="5" Fill="#FFA0DA0A" Width="200" HorizontalAlignment="Left"  Margin="100,0,0,0" 
Grid.Row="2"/> <!--<TextBlock Text="digital communication innovation" Loaded="onTextBoxDigitalLoaded" Margin="100,0,0,0"  HorizontalAlignment="Left" FontFamily="Moire" FontSize="13.333" Height="16" Grid.Row="3"/>--> 
<Image Source="/Content/baseline.PNG"  Margin="100,0,0,0" Width="300"  HorizontalAlignment="Left" Grid.Row="3"/> <!-- Progress bar--> <Rectangle Fill="#FF24A9F3" Height="5" HorizontalAlignment="Left" x:Name="uxProgress" 
Grid.Row="2"/> <!--floating text boxes--> <TextBlock x:Name="textBlock" HorizontalAlignment="Left" TextWrapping="Wrap" Text="Be it Videos, Images, Flash or Audio we support all."
VerticalAlignment="Center" Grid.Row="4" Height="400" 
Width="510" Foreground="#FF24A9F3" FontSize="48" FontFamily="Segoe WP Light" RenderTransformOrigin="0.5,0.5"
Loaded="onTextBoxLoaded" Margin="20,0,0,0"> <TextBlock.RenderTransform> <TransformGroup> <TranslateTransform x:Name="myTranslate"/> </TransformGroup> </TextBlock.RenderTransform> <!--The story board can be placed 
within this to run from XAML or JS functions can be used.--> <!--<TextBlock.Triggers>
<EventTrigger RoutedEvent="TextBlock.Loaded">
<BeginStoryboard>
</BeginStoryboard>
</EventTrigger>                
</TextBlock.Triggers>--> </TextBlock> <TextBlock x:Name="txtProgressPercentage" Grid.Row="4" HorizontalAlignment="Right" Margin="0,-150,-170,0" VerticalAlignment="Center" TextWrapping="Wrap" Height="358" Width="651" 
FontSize="300" Foreground="#FFE4E4E4"/> </Grid>

2. Code the logic in JavaScript file

When you add a new SLJS page in your application, it also creates an underlying .js file where you can write your code logic.

All I had to do was to create 3 functions in it ; they are:

onSourceDownloadProgressChanged

This is to update the progress bar and the big textblock that shows % update in numbers.

var i = 0;
function onSourceDownloadProgressChanged(sender, eventArgs)
{
sender.findName("txtProgressPercentage").Text = Math.round(Math.round((eventArgs.progress * 1000)) / 10, 1).toString();
//get browser width var width = window.document.body.clientWidth;
sender.findName("uxProgress").Width = (width * eventArgs.progress);
}

onTextBoxLoaded

This is to trigger the first story board.

function onTextBoxLoaded(sender, eventArgs)
{
// Retrieve the Storyboard and begin it.     sender.findName("sb1").begin();
}

onCompleted

This is to change the Text of the floating Text box and start the Storyboard again with updated text.

function onCompleted(sender, eventArgs)
{
try{
i++;
sender.findName("myTranslate").X = 0;
switch (i) {
case 1:
sender.findName("textBlock").Text = "This is my first content";
break;
case 2:
sender.findName("textBlock").Text = "This is my second content";
break;
case 3:
sender.findName("textBlock").Text = "This is my third content.";
break;
case 4:
sender.findName("textBlock").Text = "This is my fourth content";
break;
case 5:
sender.findName("textBlock").Text = "This is my fifth content.";
break;
case 6:
sender.findName("textBlock").Text = "This is my sixth content";
i = 1;
break;
}
}catch(e){
}
sender.findName("sb1").begin();

I have 6 text block contents that show up on the screen one by one. You can have as many as you want and can also pull them from a collection if that's what you need.

3. Updating the Default.html or Default.aspx page

This is an important and the last step to hook the splash screen we created to our Silverlight application.

Just add a few parameters and a link to the JavaScript file just below the </head> tag.

<script type="text/javascript" src="splashscreen.js"></script>

The following new parameters go in <div id="silverlightControlHost">:

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

The first parameter just tells your app which splash screen to load at startup and the second one calls the js function that eventually updates the progress bar and % progress textblock with numbers.

That's all to it.

This is just an example that shows how you can use Triggers and Storyboards in your splash screens. Use your imagination and create some fantastic start screens. Do leave a link below in comments so I can check them :)

Happy Coding :)