Silverlight Tip of the Day #38 – How to Customize the Silverlight Install Experience
If a user visits your Silverlight site without Silverlight installed they will automatically see the following image:
While this is a clear message you may want to consider a better, more customizable experience for your web site that includes your web site branding, name, etc. For this purpose Silverlight provides an attribute off the Silverlight control in your ASPX site called PluginNotInstalledTemplate. Anything contained within this template will be displayed to the user instead of the standard “Install Microsoft Silverlight” image above.
For our demo, we will simply display an image and a FWLink which points to the most recent version of Silverlight.
When this demo page is accessed without Silverlight installed, you will see the following in your browser:
Now, let’s take a quick look to see how this is done.
<asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/SilverlightApplication29.xap"
MinimumVersion="2.0.30523" Width="100%" Height="100%">
<PluginNotInstalledTemplate>
<div class="installSL">
<div class="centerHV">
<img src="stop.png" />
<br />
<br />
<a href="http://go.microsoft.com/fwlink/?LinkID=115261"><font size="5" face="Verdana"
color="silver">http://go.microsoft.com/fwlink/?LinkID=115261</font></a>
</div>
</div>
</PluginNotInstalledTemplate>
</asp:Silverlight>
As you can see from the code above, we simply place the content we want to show between the PluginNotInstalledTemplate tags of our Silverlight control.
We use a custom style in a <div> called installSL that is defined to keep the image centered, background black with the width and height of the div set to 100%:
<style>
.installSL
{
background-color: Black;
text-align: center;
padding-top:50px;
width: 100%;
height: 100%;
}
</style>
Thank you,
--Mike Snow
Subscribe in a reader