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:
- 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.
- 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.
- 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.
- 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>
- 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" />
- 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.
- 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;
}
- 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...
