Deccansoft Software Services - Silverlight

Configuring Silverlight plugin

Agenda:

Passing parameters to a Silverlight Application

Background param in Object tag

GPU Acceleration param in Object tag

MaxFrameRate param in Object tag

Plugin Sizing

Passing parameters to a Silverlight Application

When we create a new Silverlight solution, Visual Studio creates a hosting website where both an ASP.NET and an
HTML file are generated where we can execute our application. Silverlight application is hosted through an OBJECT
tag. Because this is normal HTML, the OBJECT tag can have several PARAMS. The most important one is the source
param, which refers to the XAP.
Using these parameters, we can configure the Silverlight plugin. These parameters have a predefined name. These
parameters can be used to enable or disable an option such as transparency of the Silverlight plugin. One
exception to this is the InitParams parameter. The value of this one is a dictionary-like list of key/value pairs that
are passed to the Silverlight. These parameters are passed to the Startup method of the App class and are
accessible there via the e.InitParams. These parameters are not accessible in any other location, so if we want to
capture them, we have to do it there.
There are two ways to pass parameters to an in-browser Silverlight application without modifying the XAP:

Using the querystring of the containing HTML/ASP.NET page

Using the InitParams attribute of the object tag that hosts the XAP file

The first method is straight forward: just add a querystring to the URL. You can retrieve the querystring using the
HtmlPage.Document as below:
private void Application_Startup(object sender, StartupEventArgs e)
{ Page p = new Page();
this.RootVisual = p;
StackPanel layoutRoot = p.LayoutRoot;
foreach (String key in HtmlPage.Document.QueryString.Keys)
{
layoutRoot.Children.Add(new TextBlock()

Text = String.Format(from QueryString: {0} = {1}", key, HtmlPage.Document.QueryString[key])

});
}
}

The second method consists of adding a value for the InitParams attribute of the object tag that hosts the XAP file.
The input format of this parameter is a single string with individual parameters delimited using a comma (,), and
keys delimited from values using an equal sign (=). For example:
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%"height="100%">
<param name="source" value="ClientBin/Pochet.SL.xap" />

Deccansoft Software Services - Silverlight

Configuring Silverlight plugin

<param name="background" value="white" />

<param name="minRuntimeVersion" value="4.0.50401.0" />
<param name="autoUpgrade" value="true" />
<param name="InitParams" value="key1=value1,key2=value2,key3=value3" />
<a href=http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0 style="text-decoration:none">
<img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight"style="borderstyle:none"/>
</a>
</object>
These delimiters are processed so that Silverlight can provide them as a dictionary, which can be used as follows:
private void Application_Startup(object sender, StartupEventArgs e)
{
Page p = new Page();
this.RootVisual = p;

// This assumes that Page.LayoutRoot exists and is a StackPanel.

StackPanel layoutRoot = p.LayoutRoot;

// Display the custom initialization parameters.

foreach (String key in e.InitParams.Keys)
{
layoutRoot.Children.Add(new TextBlock() {
Text = String.Format(
"from InitParams: {0} = {1}", key,
e.InitParams[key])
});
}
}

Background param in Object tag

Gets or sets the background color of the rectangular region that displays XAML content.
<object ...>
<param name="background" value="colorValue"/>
...
</object>

<object

id="silverlightControl"

data="data:application/x-silverlight-2,"

type="application/x-silverlight-2"

width="100%" height="100%">
<param name="source" value="ClientBin/SilverlighttoJavascript.xap"/>
<param name="onError" value="onSilverlightError" />

Deccansoft Software Services - Silverlight

Configuring Silverlight plugin

<param name="onLoad" value="onSilverlightLoad" />

<param name="background" value="red" />
.
The above parameter in the object tag shows the Silverlight content with background color as Red.This also shows
how Silverlight content is hosted in a browsers window.

GPU Acceleration param in Object tag

Another feature of Silverlight 3 i support for hardware acceleration. In Silverlight 1 and 2, all rendering was done in
software, which meant that the performance of complex animations and video playback depended heavily on the
capabilities of the host PC. Silverlight 3, however, can take advantage of hardware GPUs.
The XAML code below depicting an Ellipse. Set the Ellipse opacity to 0.5 and also define some animations that
rotate and scale the Ellipse continuously--all actions designed to stress a software rendering pipeline.
<UserControl x:Class="GPUDemo.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid x:Name="LayoutRoot">
<Grid.Background>
<LinearGradientBrush StartPoint="0.5,0.0" EndPoint="0.5,1.0">
<GradientStop Color="#e08080" Offset="0" />
<GradientStop Color="#8080e0" Offset="1" />
</LinearGradientBrush>
</Grid.Background>

Deccansoft Software Services - Silverlight

Configuring Silverlight plugin

<Canvas x:Name="EllipseCanvas" Width="340" Height="322" Opacity="0.5">

<Canvas.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="Rotate"
Storyboard.TargetProperty="Angle"
From="0" To="360" Duration="0:0:0.5"
RepeatBehavior="Forever" />
<DoubleAnimation
Storyboard.TargetName="Scale"
Storyboard.TargetProperty="ScaleX"
From="1.0" To="1.5" Duration="0:0:0.5"
AutoReverse="True" RepeatBehavior="Forever" />
<DoubleAnimation
Storyboard.TargetName="Scale"
Storyboard.TargetProperty="ScaleY"
From="1.0" To="1.5" Duration="0:0:0.5"
AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Canvas.Triggers>
<Canvas.RenderTransform>
<TransformGroup>
<RotateTransform x:Name="Rotate"
CenterX="167" CenterY="202" />
<ScaleTransform x:Name="Scale"
CenterX="167" CenterY="202" />
</TransformGroup>
</Canvas.RenderTransform>
<!-- Ellipse XAML code -->
</Canvas>
</Grid>
</UserControl>
Run the program and use Task Manager to gauge CPU usage. The reading varied from 13% to 35%. When a single
application is using a third of the CPU, that application is definetly stressing the host PC.
Then repeat the test with GPU support enabled. First, open GPUDemoTestPage.html and add one line to the
<OBJECT> element that instantiates the Silverlight control:

Deccansoft Software Services - Silverlight

Configuring Silverlight plugin

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

Second, add the following XAML to the ellipse canvas to enable the entire ellipse to be cached as a bitmap and
rendered by the GPU:
<Canvas.CacheMode>
<BitmapCache />
</Canvas.CacheMode>
Run the application again, CPU usage ranged from 2% to 8%, clearly demonstrating that much of the rendering
load had been offloaded to the GPU.
Silverlight 3 offers a cache visualization feature that's enabled by including the following <PARAM> element in the
control's <OBJECT> tag:
<param name="EnableCacheVisualization" value="true" />
When cache visualization is enabled, objects that are cached (that is, handled by the GPU) are displayed in their
normal colors, while objects that aren't cached are tinted.
MaxFrameRate param in Object tag
MaxFrameRate - Gets or sets the maximum number of frames that Silverlight can render per second.
<object ...>
<param name="maxframerate" value="int"/>
...
</object>
EnableFramerateCounter - Gets or sets a value that indicates whether to display the current frame rate in the
hosting browser's status bar.
If EnableGPUAcceleration is true AND EnableFramerateCounter is true, an additional frame counter displays in
the upper-left corner as an overlay within the Silverlight content area. The format of this frame rate counter is as
follows:
frameRate videoMemoryUsed GPUEnabledSurfaces intermediateSurfaces
videoMemoryUsed is in KB. intermediateSurfaces refers to surfaces implicitly created to represent the softwarerendered parts of the application on the GPU.

Plugin Sizing

MainPage rootPage = new MainPage();

private void Application_Startup(object sender, StartupEventArgs e)
{
this.RootVisual = rootPage;
rootPage.LayoutRoot.MouseLeftButtonDown +=
delegate(Object s, MouseButtonEventArgs args)
{
this.Host.Content.IsFullScreen =!this.Host.Content.IsFullScreen;
};
this.Host.Content.FullScreenChanged += new EventHandler(DisplaySizeInformation);

Deccansoft Software Services - Silverlight

Configuring Silverlight plugin

this.Host.Content.Resized += new EventHandler(DisplaySizeInformation);

}
private void DisplaySizeInformation(Object sender, EventArgs e)
{
String message = String.Format("ActualWidth={0}, ActualHeight={1}",
this.Host.Content.ActualWidth,this.Host.Content.ActualHeight);
rootPage.LayoutRoot.Children.Clear();
rootPage.LayoutRoot.Children.Add(new TextBlock { Text = message });
}
We can retrieve the actual size of the Silverlight plugin through the Content.ActualWidth and
Content.ActualHeight values, but only after the Content.Resized event first occurs. For example, when the
Application.Startup event occurs, these properties do not have meaningful values.
The Silverlight plug-in also changes size when it enters full-screen mode. However, in this case, the
Content.Resized event does not occur. Instead, the Content.FullScreenChanged event occurs. We can display the
plug-in in full-screen mode in response to user input by setting the Content.IsFullScreen property.
In the above code, in the Application Startup event we are handling the Content.Resized and Content.
FullScreenChanged event which will display the plugins Actual Width and Height.