The initparams parameter allows us to pass textual initialization parameters to the Silverlight application in the form of key-value pairs. Once the application starts and the Application_Startup event fires, these key-value pairs will be read and processed within the application. The initparams parameter's value is represented by a typical "key = value" form, separating the pairs with a comma. When handled in Silverlight, the initparams collection will be represented as a Dictionary object.

An example of the initparams parameter might look as follows:

<param name="initparams" value="ShowNames=true,CurrentUser=localadmin" />

Reading the values from this collection can be done as follows:

private void Application_Startup(object sender, StartupEventArgs e)
{
this.RootVisual = new MainPage();
string paramValue = e.InitParams["CurrentUser"];
}

When setting the size attributes (Width and Height) of your Silverlight object tag, you're free to choose between fixed sizing (based on pixels) or relative sizing (based on percentages). The size attributes are set on the root object tag element and affect the way your application is drawn to page. Using fixed sizing, the plugin size will remain the same, regardless of the size of its hosting parent element. If, for example, the parent element's width is smaller than the width specified for the plugin, the plugin will be clipped.

By using relative sizing, the plugin size will change whenever the parent element's size changes. If you specify the plugin's width and height to 50 percent and if the parent element's size is 500x500 pixels, your plugin size will be set at 250x250 pixels. If the browser's size changes all of a sudden to, say 300x300 pixels, your Silverlight application will now resize to 150x150 pixels.

One important thing to note here is that if the Silverlight application itself is set to fixed size, it might get clipped as the parent element's size changes. It's usually not a good idea to have a fixed-size application with a relative-size plugin, as you lose all the flexibility of the relative sizing, so try to avoid it if possible.

The windowless parameter is a Boolean type of parameter that specifies whether the Silverlight plugin should be "painted" above any HTML element of the hosting page or not. By default, this property is set to false, which means that the Silverlight content will appear above any HTML content of the hosting page.

Setting the windowless mode to true will allow the underlying HTML content to appear through the transparent areas of the plugin, providing you with seamless integration with the HTML host page. This is mostly useful when you wish to create HTML overlays in your application or when you wish to place Silverlight content below flyover menus. Be careful when using the windowless mode though. Using it will cause your application to take a performance hit, especially if used in combination with a transparent background. Microsoft recommends using the windowless mode only when it's absolutely necessary.

Setting the windowless mode to on is quite straightforward, as can be seen from the following line of code:

<param name="iswindowless" value="true" />

By default, Silverlight shows its spinning blue circle loading screen while loading the XAP file as follows:

When creating your own application, you might want to change this into something more with the spirit of the application. The process of creating a custom splash screen consists of three steps as follows:

There is a logical explanation for why we are creating the splash screen XAML outside the Silverlight application itself. As the splash page is used while the Silverlight application is being downloaded, it wouldn't make sense to create the splash screen inside of it. There are a few limitations for using custom preloaders as follows:

With that being said, let's go ahead and create our first splash screen.

Creating your own splash screen

Create a new Silverlight project in Visual Studio 2010 and name it Chapter8-Preloader. We start off with creating the XAML page of our loader. Right-click on the Chapter8-Preloader.Web project, select Add and then New Item. Select Silverlight from the Installed Templates menu and select Silverlight 1.0 Jscript Page. Name it MyCustomLoader.xaml and click on OK.

We now have a blank XAML page to use as our loader. Change the content of the page as follows:

<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Background="#FF2E682E">
<Grid.Triggers>
<EventTrigger RoutedEvent="Grid.Loaded">
<BeginStoryboard>
<Storyboard x:Name="circle">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush. Color)" Storyboard.TargetName="ellipse" AutoReverse="True">
<EasingColorKeyFrame KeyTime="0" Value="White"/>
<EasingColorKeyFrame KeyTime="0:0:1" Value="#FFF5D500"/>
<EasingColorKeyFrame KeyTime="0:0:2" Value="#FFFF0017"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Grid.Triggers>
<Grid>
<Ellipse x:Name="ellipse" Margin="130,81,131,81" Stroke="White" RenderTransformOrigin="0.856,0.406" StrokeThickness="6"/>
<TextBlock x:Name="ProgressTB" Width="55" Height="20"
FontFamily="Verdana" FontSize="14" Text="0%"
TextAlignment="Center" Foreground="White" />
</Grid>
</Grid>

The first step is complete. We have a nice new graphical representation for our loader. Next, let's integrate the loader with the application. Open the Chapter8-PreloaderTestPage.aspx file and add param to the object tag as follows:

<param name="splashscreensource" value="MyCustomLoader.xaml"/>

This will change the loader to our custom loader. But that's not all. We also wish to handle the download progress event so that we can update our splash screen. The following line of code will add this support:

<param name="onSourceDownloadProgressChanged" value="onSourceDownloadProgressChanged" />

We have defined a callback for the event, now it's time to define the function itself. Open the MyCustomLoader.js file and delete all its content. Add the following code snippet to it:

function onSourceDownloadProgressChanged(sender, eventArgs) {
sender.findName("ProgressTB").Text = Math.round ((eventArgs.progress * 1000)) / 10 + "%";
}

The preceding function looks for an element in the splash file using the findName method and sets its text using the eventArgs progress variable.

All that's left to do now is to tell the host ASPX page to load the MyCustomLoader.js file. Open the Chapter8-PreloaderTestPage.aspx file and add the following line of code to the head element:

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

If you run the application now, everything will compile and run, but you won't see your new loader. The reason for that is that the file loads immediately. To simulate low bandwidth conditions, add a big file to the Silverlight project and set its build action to "Content". Run the application now, and you should see your new splash screen in all its glory: