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 

[more]

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

Final output of sample

Here's the code so have fun.

SampleControl.cs (3.32 kb)

One Comment

  1. krilbert

    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 :$

    Greetings

Leave a Reply

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