Custom Splash Screen using Silverlight 4.0

2011-05-09T06:14:00.000-07:00

Hello all,
In this post i am going to show you Custom Splash Screen using Silverlight 4.0

Source Code

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

splashscreensource : The URI of a 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)

For Adding a custom splash screen

1 Create a Silverlight application in to 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"></script>

9 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.

Source code for above project can be found here

CodeProject
Thats all, Enjoy...

2008-12-18T22:26:00.000-08:00

Here is Scheduler month view control which i made in Silverlight 2.0.

you can see it in action here..... Demo

2008-12-05T02:52:00.002-08:00

Copy the following and paste in your website if you want to use this card, Message and Name can be configured in the IntParams and feel free to change the Height and Width of the Silverlight control for your convenience.

For more detail check this blog.

http://jobijoy.blogspot.com/2008/11/interactive-silverlight-christmas-card.html

type="application/x-silverlight-2" style="width: 800px; height: 250px">

object>

div>

Hello From Kevin

2008-12-05T02:48:00.000-08:00

Hello all

This is Kevin Bhavsar from Baroda (Guj-India)

Thanks for coming on my blog.

Enjoy Silverlight

Custom Splash Screen using Silverlight 4.0

Hello From Kevin