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.

Template Editing 


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>")]
public class SampleControl : TemplateControl
private ITemplate _firstTemplateX;
 private ITemplate _firstTemplateY;
 private ITemplate _secondTemplateX;
 private ITemplate _secondTemplateY;
public ITemplate FirstTemplateX
 get { return _firstTemplateX; }
 set { _firstTemplateX = value;
public ITemplate FirstTemplateY
 get { return _firstTemplateY; }
 set { _firstTemplateY = value; }
public ITemplate SecondTemplateX
 get { return _secondTemplateX; }
 set { _secondTemplateX = value; }
public ITemplate SecondTemplateY
 get { return _secondTemplateY; }
 set { _secondTemplateY = value; }

The Control Desginer

class SampleControlDesigner : ControlDesigner
 public override void Initialize(IComponent component)
  SetViewFlags(ViewFlags.TemplateEditing, true);
 private TemplateGroupCollection _templateGroups;
 public override TemplateGroupCollection TemplateGroups
  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);
  return _templateGroups;

The final output of the sample looks like this

Final output of sample

Here's the code so have fun.

SampleControl.cs (3.32 kb)







One response to “Enabling Design Time Template Editing”

  1. krilbert Avatar

    This example is awesome, thanks for sharing, but why i cannot write in the template? I tried the tempDef1.AllowEditing but its read only 🙁

    btw, im very excited to learn how to do professional webcontrols, can you recommend me a good book or page or something :$


Leave a Reply

Your email address will not be published. Required fields are marked *