User Control Article

wpfeControl Rants

The Crapazoids
This article may be obsolete given the May 2007 Silverlight 1.0 beta release, I haven't explored it fully. After a change to the script created, it works like a charm.

I created a user control to counter one of my major handicaps, memory. Specifically I have a hard time keeping straight all the APIs that I encounter.

Like many .NET developers I would be lost without Intellisense. One of the nice things about the User Control is that you have Intellisense for all the public properties of that control, when in the asp source view of a parent page. Much like you would for any other control's attributes.

Taken directly from a new silvelight project , this is the javascript that you would need to add to every page to create the ActiveX control:

It really isn't too much script, however it does get in the way after a while. Especially with 2 or 3 controls on a page. That and I dont like cut and pasting the block from one place to another, looking at the comments to remember which param is what... The new Silverlight project does organize this alot better.

To start off I created an ascx control in the web project.
All Silverlight controls need a tag to live in, so I created a DIV in the Source of the .ascx. The source of the .ascx looks like so:

And initially the code behind is pretty simple:

We can't add the javascript to create the Silverlight control in the ascx source, because the ID of the DIV tag will be prefixed when the control is added to a parent page.

So instead we put the Javascript we need in the code behind and register it with the parent page.

Now we could just concat a large string and use Page.RegisterStartupScript in the page load and call it a day. But we will want to be able to configure the Silverlight control at design time without hacking away at the code that generates the script. So we create public properties on the User Control to expose the most commonly used params for the ActiveX control. Then use those to create the javascript.

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

namespace JrDevControls
{
    [ToolboxData("<{0}:wpfecontrol runat=server></{0}:wpfeControl>")]
    public partial class wpfeControl : System.Web.UI.UserControl
    {
        private const string AgControl = "agControl";
        private const string aghostIDSuffix = "wpfeftw";

private string _XAMLfile = "null";
        public string XAMLfile
        {
            get
            {
                
                return _XAMLfile;
            }
            set
            {
                _XAMLfile = value;
            }
        }
        private String _Height;
        public String Height
        {
            get
            {
                return _Height;
            }
            set
            {
                _Height = value;
            }
        }
        private string _Width;
        public string Width
        {
            get
            {
                return _Width;
            }
            set
            {
                _Width = value;
            }
        }

private string _BackGroundColor;
        public string BackGroundColor
        {
            get
            {
                return _BackGroundColor;
            }
            set
            {
                _BackGroundColor = value;
            }
        }
        private string _SourceElement = "null";
        public string SourceElement
        {
            get
            {
                return _SourceElement;
            }
            set
            {
                _SourceElement = value;
            }
        }
        private string _AgControlID;
        public string AgControlID
        {
            get
            {
                return _AgControlID;
            }
            set
            {
                _AgControlID = value;
            }
        }
   
    
        protected void Page_Load(object sender, EventArgs e)
        {
           
         
                String script = BuildAgScript(this.agControl1Host.ClientID);
                ClientScriptManager manager = Page.ClientScript;

//if (!manager.IsStartupScriptRegistered(this.agControl1Host.ClientID + "mojonixon"))
                manager.RegisterStartupScript(this.GetType(), this.agControl1Host.ClientID + "mojonixon", script,true);
              
            
        }
        protected override void Render(HtmlTextWriter writer)
        {
            Page.ClientScript.RegisterForEventValidation(this.agControl1Host.ClientID);
            Page.ClientScript.RegisterForEventValidation(this.agControl1Host.ClientID + "mojonixon");
            
            base.Render(writer);
        }

private string BuildAgScript(string divClientID)
        {
            String script = " Sys.Silverlight.createObjectEx({" +
           "source: \""+ this.XAMLfile +"\"," +
           "parentElement: document.getElementById(\""+ divClientID +"\")," +
           "id: \"" + divClientID + aghostIDSuffix + "\"," +
           "properties: {" +
               "width: \""+ this._Width +"\"," +
               "height: \"" + this.Height +"\"," +
               "version: \"0.95\"," +
               "enableHtmlAccess: true" +
           "}," +
           "events: {}" +
             "});";
            return script;
        }

}
}

Once the Control is built (rebuild the project) you can then use it on a parent page. You will need to register the control on the page. But after that its reuse all the way.

Example use:

One last thing. In order to create the host Silverlight control, you need to load the Silverlight.js file. I have it in the header of my master page. However you can put it almost anywhere, the ascx source, the parent page or the codebehind. I recomend the parent page or a Masterpage.