Enabling Design Time Template Editing

Few days ago, I blogged about how to enable auto formats in the design time smart tag by overriding simple property, this post will describe how to enable design time template editing in a similar simple way.

The following steps will show how to do this in your template controls, assuming you already have a template control ( template controls are web server controls that have one or many properties of type ITemplate ).

So, this is how it works :

1. Implement a custom designer that inherits from System.Web.UI.Design.ControlDesigner
2. Override the TemplateGroups Collection.
3. In the get define your template group collection and return it.
4. Don't forget to enable TemplateEditing flag.

The Sample I introduce here contains a template control having 4 templates which I divide them into 2 template groups.

The SampleControl

[ToolboxData("<{0}:SampleControl runat=server></{0}:SampleControl>")]
[Designer(typeof(SampleControlDesigner))]
public class SampleControl : TemplateControl
{
private ITemplate _firstTemplateX;
 private ITemplate _firstTemplateY;
 private ITemplate _secondTemplateX;
 private ITemplate _secondTemplateY;
}
[PersistenceMode(PersistenceMode.InnerProperty)]
public ITemplate FirstTemplateX
{
 get { return _firstTemplateX; }
 set { _firstTemplateX = value;
}
}
[PersistenceMode(PersistenceMode.InnerProperty)]
public ITemplate FirstTemplateY
{
 get { return _firstTemplateY; }
 set { _firstTemplateY = value; }
}
[PersistenceMode(PersistenceMode.InnerProperty)]
public ITemplate SecondTemplateX
{
 get { return _secondTemplateX; }
 set { _secondTemplateX = value; }
}
[PersistenceMode(PersistenceMode.InnerProperty)]
public ITemplate SecondTemplateY
{
 get { return _secondTemplateY; }
 set { _secondTemplateY = value; }
}
}

The Control Desginer

class SampleControlDesigner : ControlDesigner
{
 public override void Initialize(IComponent component)
 {
base.Initialize(component);
  SetViewFlags(ViewFlags.TemplateEditing, true);
 }
 private TemplateGroupCollection _templateGroups;
 public override TemplateGroupCollection TemplateGroups
 {
  get{
  if (_templateGroups == null)
  {
   _templateGroups = new TemplateGroupCollection();
   TemplateGroup tempGroup1, tempGroup2;
   TemplateDefinition tempDef1, tempDef2, tempDef3, tempDef4;
   SampleControl ctl;
   ctl = (SampleControl)this.Component;
   tempGroup1 = new TemplateGroup("FirstTemplateGroup");
   tempGroup2 = new TemplateGroup("SecondTemplateGroup");
   tempDef1 = new TemplateDefinition(this, "TemplateX", ctl, "FirstTemplateX", true);
   tempDef2 = new TemplateDefinition(this, "TemplateY", ctl, "FirstTemplateY", true);
   tempDef3 = new TemplateDefinition(this, "TemplateX", ctl, "SecondTemplateX", true);
   tempDef4 = new TemplateDefinition(this, "TemplateY", ctl, "SecondTemplateY", true);
   tempGroup1.AddTemplateDefinition(tempDef1);
   tempGroup1.AddTemplateDefinition(tempDef2);
   tempGroup2.AddTemplateDefinition(tempDef3);
   tempGroup2.AddTemplateDefinition(tempDef4);
   _templateGroups.Add(tempGroup1);
   _templateGroups.Add(tempGroup2);
  }
  return _templateGroups;
 }
}
}

The final output of the sample looks like this

Here's the code so have fun.

SampleControl.cs (3.32 kb)