Silverlight applications run within the context of a web page. On this page, an HTML OBJECT tag is embedded which contains a reference to the Silverlight XAP file, normally within the ClientBin directory. Using parameters (params) in the OBJECT tag, we have a communication channel that allows sending values from the HTML to the Silverlight application: in most cases, we can use known parameter names to both set up the Silverlight application the way we want and secondly pass parameter values to Silverlight.
In this tip, we’ll look at the several options we have to configure the Silverlight plugin from the HTML OBJECT tag. The code for this sample can be downloaded here.
The defaults
When creating a new Silverlight application in Visual Studio 2010, both an *.aspx and a *.html file are created. In “early” versions of Silverlight, the *.aspx page contained the asp:Silverlight control, which was a server-side control to setup a Silverlight application. This control isn’t used anymore, so both files use the above mentioned OBJECT tag. The default-generated code is shown here:
<form id="form1" runat="server" style="height:100%">
<div id="silverlightControlHost">
<object data="data:application/x-silverlight-2,"
type="application/x-silverlight-2" width="100%" height="100%">
<param name="source" value="ClientBin/ConfiguringThePlugin.xap"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="4.0.50826.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0"
style="text-decoration:none">
<img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get
Microsoft Silverlight"
style="border-style:none"/>
</a>
</object>
<iframe id="_sl_historyFrame"
style="visibility:hidden;height:0px;width:0px;border:0px">
</iframe>
</div>
</form>
Let’s now look at how we can use this to configure how the plugin will show the Silverlight application.
Changing the background color
To start, let me show you my beautifully crafted sample, which is a perfect sample of great color choices… Just kidding! Take a look at the picture below.
The green rectangle is the Silverlight application itself. The red block is still “managed” by Silverlight (if you right-click on it, it will still show the Silverlight menu option). The blue block is HTML.
The Silverlight MainPage.xaml is sized as follows:
<UserControl x:Class="ConfiguringThePlugin.MainPage"
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" Width="300" Height="300"
d:DesignHeight="300" d:DesignWidth="400">
<Grid x:Name="LayoutRoot" Background="Green">
<TextBlock Text="The Silverlight plugin" Foreground="White"
FontSize="18"></TextBlock>
</Grid>
</UserControl>
Note the fixed size of 300x300.
The OBJECT tag now has the following settings:
#silverlightControlHost {
height: 500px;
width:500px;
background: Blue;
text-align:center;
}
</style>
...
<body>
<form id="form1" runat="server" style="height:100%">
<div id="silverlightControlHost">
THE DIV
<object data="data:application/x-silverlight-2,"
type="application/x-silverlight-2" width="400" height="400">
<param name="source" value="ClientBin/ConfiguringThePlugin.xap"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="Red" />
<param name="minRuntimeVersion" value="4.0.50826.0" />
<param name="autoUpgrade" value="true" />
<param name="Windowless" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0"
style="text-decoration:none">
<img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get
Microsoft Silverlight"
style="border-style:none"/>
</a>
</object>
<iframe id="_sl_historyFrame"
style="visibility:hidden;height:0px;width:0px;border:0px">
</iframe>
</div>
</form>
</body>
</html>
In this sample, note the width and height that have been specified in the CSS style, as well as the background color (blue). Also note that the param named background is now set to Red.
By setting the background to Red instead of White (the default), we made sure that if the Silverlight control is smaller than the space it can fill, we have control through the HTML how this space will be filled. By default (and this is in most cases the best practice), the Silverlight application will fill the available space (because no width and height have been set so it will take all the available space).
Note that we can change the Windowless to true as well, which would allow us to “integrate” the HTML and the Silverlight content. In Windowless mode, Silverlight doesn’t have its own rendering window, allowing us to create an experience that contains both HTML and Silverlight overlapped with each other. In that case, the background is also very useful.
Changing the plugin size
Take another look at my piece of art. Note that we see 3 items:
- The green rectangle, containing the Silverlight MainPage
- The red rectangle, containing the object tag. Silverlight fills this rectangle, but since the page was smaller than the available size, the HTML background shines through
- The blue rectangle, which is the div element that hosts the object tag.
So in fact, we have several ways to configure how much space the Silverlight app gets. By default, it takes up the entire page, but assume you want to create a banner in Silverlight, you need to size your application to fit just the banner size. To do so, you can set the size from within the Silverlight application (setting the size of the control, like we did for the green rectangle).
If you want to make sure from the HTML side that your Silverlight application doesn’t take too much space, you can do so through controlling the size of the object tag:
<object data="data:application/x-silverlight-2,"
type="application/x-silverlight-2" width="200" height="200">
<param name="source"
value="ClientBin/ConfiguringThePlugin.xap"/>
...
Note that I set both width and height here to 200: even if my Silverlight application requires more space, it won’t get it. In the image (another piece of nice design…) below, it’s obvious that parts of the Silverlight content are being cut off, since Silverlight only gets 200 pixels in width and height.
If we change the style of the hosting DIV to 100 pixels in both Width and Height, leaving the Width and Height OBJECT tag on 200 by 200, we get the following result:
As you can see, the OBJECT tag extends out of the DIV, which is default HTML behavior.
To summarize, if we want to size of the Silverlight application, we should use either the size from within Silverlight or change the size of the OBJECT tag.
Controlling the frame rate of the plugin
The last configuration item we’ll look at in this article is controlling the frame rate at which an application is displaying. By default, Silverlight applications will run at their “optimal” frame rate, which is basically dependent on the system resources (available hardware, current load of the system…). If you want to make sure that your application only runs at a specific, maximum frame rate, we can control this using the maxframerate parameter, as shown below:
<object data="data:application/x-silverlight-2,"
type="application/x-silverlight-2" width="200" height="200">
<param name="source" value="ClientBin/ConfiguringThePlugin.xap"/>
...
<param name="maxframerate" value="30"/>
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0"
style="text-decoration:none">
...
Summary
In this tip, we looked at a few configuration options we have for the Silverlight plugin. We looked at how we can control the background colors, the size and the frame rate at which an application runs at maximum.
About Gill
Gill Cleeren is Microsoft Regional Director (www.theregion.com), Silverlight MVP (former ASP.NET MVP), INETA speaker bureau member and Silverlight Insider. He lives in Belgium where he works as .NET architect at Ordina. Passionate about .NET, he’s always playing with the newest bits. In his role as Regional Director, Gill has given many sessions, webcasts and trainings on new as well as existing technologies, such as Silverlight, ASP.NET and WPF at conferences including TechEd Berlin 2010, TechDays Belgium, DevDays NL, NDC Oslo Norway, SQL Server Saturday Switserland, Spring Conference UK, Silverlight Roadshow in Sweden… He’s also the author of many articles in various developer magazines and for SilverlightShow.net. He organizes the yearly Community Day event in Belgium.
He also leads Visug (www.visug.be), the largest .NET user group in Belgium. Gill recently published his first book: “Silverlight 4 Data and Services Cookbook” (Packt Publishing). You can find his blog at www.snowball.be.
Twitter: @gillcleeren