Easy Custom Installation Experience for Silverlight 2

<< Excellent Silverlight Video from Mike Taulty | Home | Google Chrome JavaScript Performance >>

Easy Custom Installation Experience for Silverlight 2

The default installation experience for Silverlight 2 can be a bit confusing for your average web user: they may not have heard of Silverlight and will not understand why they should install it when faced with the following:

There is nothing intrinsically wrong with the button, it just that you really need to supplement this with an explanation of how their experience will improve for your site if they do install Silverlight.

With the Asp.Net Silverlight control you can easily provide a custom installation experience using the PluginNotInstalledTemplate:

<asp:Silverlight ID="Xaml1" Windowless="true" PluginBackground="Transparent" runat="server"
    Source="~/ClientBin/SilverlightInstallExperience.xap" MinimumVersion="2.0.30523"
    Width="100%" Height="100%">
    <PluginNotInstalledTemplate>
        <div class="installBackground">
            <div class="centredHV">
                <div style="background-color: Yellow; padding: 20px;">
                    <h1>
                        You need Microsoft Silverlight to get the most from this site</h1>
                    Explain why your user should install Silverlight.
                    <br />
                    Include images of the experience they will get.
                    <br />
                    Test this by disabling the Silverlight Add-on in your browser.
                    <br />
                    <br />
                    <a href=http://go.microsoft.com/fwlink/?LinkID=115261
                            style="text-decoration: none;">
                        <img src=http://go.microsoft.com/fwlink/?LinkId=108181 
                             alt="Get Microsoft Silverlight"
                            style="border-style: none;" /></a>
                </div>
            </div>
        </div>
    </PluginNotInstalledTemplate>
</asp:Silverlight>

In the example above I am using a couple of styles in the template - installBackground which fades out the background of the page with a opacity, and centredHV to centred the instructions and explanation horizontally and vertically on the page. The styles are shown below:

.installBackground {
    background-color:Gray;
    filter:alpha(opacity=70);
    opacity:0.7;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
.centredHV {
    position:absolute;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
}

Of course you can put whatever you want into the template, and I suggest that you include content specific to your site, with images showing the Silverlight experience they will get once it is installed. To link to the Silverlight installer you can use the code shown in the template above which displays they standard "Install Silverlight" button, or you can create your own links. the current documentation lists the following as valid links. Note that I expect that there will be a new url for the final release, so be ready to update your links. Also installing the latest release will support earlier releases, so there is no real need to using the Silverlight B1 installer.

An easy way to test this is to disable the Silverlight Add-on in your browser (e.g. in IE7 select Tools > Manage Add-ons > Select Microsoft Silverlight and click disable).