Custom Client Installation Experience for Silverlight 2 SharePoint Web Part

I was recently tasked with creating a demonstration for a company that involved creating a video player to place into a SharePoint Web Part.  The end result turned out to be very nice and was based upon the Silverlight SharePoint Blueprint project on CodePlex.  I did modify the player to add functionality for play, pause, stop and volume controls, as well as a video slider I found that works very well.  I’d like to compliment the folks on the Blueprint team for their results – it’s really a great starting point for a customized Silverlight and SharePoint solution.  Just a note – I believe the Blueprint still uses the Beta 2 version of Silverlight, so be aware of the break-changes relating to that if you decide to implement any of the controls.

After the player was created, I started thinking about the situation that would arise when the user didn’t have Silverlight installed on their machine.  We all know the standard image and link that is displayed when this is the case.  Tim Heuer has a great video on how to customize the installation experience for pure Silverlight applications, but I wondered how that would apply to a SharePoint Web Part.  After scouring the internet and a couple of emails to Tim regarding this caveat, I figured it out.  Of course, like most things that take me a while to figure out, it’s actually quite simple. ":)

What the web part was doing was declaring an ASP.NET Silverlight control and setting the properties to it in the Web Part’s CreateChildControls overridden method.  The basic, necessary attributes of the control were then set (ID, Version and Source in this case) , excluding the PluginNotInstalledTemplate property.  Without setting the content of this property, the default image/link appears for the client by default.  Example is below:

   1: // instantiation of the silverlight control

   2: System.Web.UI.SilverlightControls.Silverlight silverlightControl = new System.Web.UI.SilverlightControls.Silverlight();

   3: silverlightControl.ID = "MediaViewerBeta2";

   4: silverlightControl.MinimumVersion = "2.0.30523";

   5: silverlightControl.Source = "/ClientBin/XAP/SLSP_MediaViewer.xap";

   6:  

   7: // Define the width and height based on the webpart height

   8: Unit height = new Unit(425);

   9: Unit width = new Unit(600);

  10: if (!this.Height.IsEmpty)

  11:     height = this.Height;

  12: silverlightControl.Width = width;

  13: silverlightControl.Height = height;

To set this property, I overrode the Silverlight control class and declared a new class called PluginTemplate that inherits from the iTemplate interface.  The PluginNotInstalledTemplate property type is of iTemplate.  Within the new PluginTemplate class, I created the InstantiateIn method to set the custom installation verbiage within an asp.net label control via a StringBuilder.  Obviously, this can be done in different ways depending on the experience you want the user to have.  I just chose this for simplicity sake – it may require some jazzing up later.  The two new classes are below:

   1: /// <summary>

   2: /// Custom control class representing the SilverlightControl - will be used to provide a custom installation experience for the client if

   3: /// Silverlight is not installed.

   4: /// </summary>

   5:     public class SilverlightBase : System.Web.UI.SilverlightControls.Silverlight

   6:     {

   7:         public SilverlightBase() 

   8:         {

   9:             base.PluginNotInstalledTemplate = new PlugInTemplate(); 

  10:         }

  11:     }

  12:  

  13:     /// <summary>

  14:     /// ITemplate class to add to the custom Silverlight control

  15:     /// </summary>

  16:     public class PlugInTemplate: ITemplate

  17:     {

  18:         #region ITemplate Members

  19:  

  20:         public void InstantiateIn(Control container) 

  21:         {

  22:             StringBuilder str = new StringBuilder();

  23:             str.Append("<h2>Get Microsoft Silverlight 2</h2>");

  24:             str.Append("<p>This application requires Microsoft Silverlight 2 to " + 

  25:             "provide a rich integrated media experience. Silverlight is a small, " + 

  26:             "safe, cross-platform browser plugin created and supported by Microsoft.</p>");

  27:  

  28:             str.Append("<p><div style='position:absolute;'>" + 

  29:             "<a href='http://go.microsoft.com/fwlink/?LinkID=124807' " + 

  30:             "style='text-decoration: none;'><img src='http://go.microsoft.com/fwlink/?LinkId=108181' " + 

  31:             "alt='Get Microsoft Silverlight' style='border-style: none'/></div></p>");

  32:  

  33:             System.Web.UI.WebControls.Label txt = new System.Web.UI.WebControls.Label();

  34:             txt.ID = "lblMess";

  35:             txt.Text = str.ToString();

  36:             

  37:             container.Controls.Add(txt);

  38:         }

  39:  

  40:         #endregion

  41:     }

  42: }

With the new Silverlight control class built with the new instance of the PluginNotinstalledTemplate, I changed the declared instance of the Silverlight control in the Web Part from the System control to the custom control.  Now the installation experience for the client is customized according to the content of the PluginTemplate class.  The resulting display is below:

 

Not a totally exciting result, but it is better than just the image, no?  Hope this helps someone!

-G