Amr ElSehemy

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.

 

[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

Here's the code so have fun.

SampleControl.cs (3.32 kb)

Back to design time support, but this time with ASP.NET server controls, most complex & simple controls built in the .NET framework are associated with an Auto Format.. link in the smart tag as the one shown in the figure, I showed in a previous post how to add links and properties to the smart tag of a control.

  [more]

Ok, now when clicking that link a new window is popped out and you get a list of predefined formats on the left and a preview panel in the right like this.

Of course if you want to implement these features you will not have to design a new windows form and deal with all the head ache for previewing and those. You only will need some basic steps, I will show next, Assuming you already have your own custom control ( I will just use a simple LabelEx control for this sample);

1- Define your designer.

class LabelExDesigner : ControlDesigner
{

}

2- override the AutoFormats property and return some DesignerAutoFormats, to be used.

private DesignerAutoFormatCollection _autoformats = null;
public override DesignerAutoFormatCollection AutoFormats
{
    get
    {
        if (_autoformats == null)
        {
            _autoformats = new DesignerAutoFormatCollection();
            _autoformats.Add(new LabelExAutoFormat("Remove All"));
            _autoformats.Add(new LabelExAutoFormat("Reddish"));
            _autoformats.Add(new LabelExAutoFormat("Blueish"));
        }
        return _autoformats;
    }
}

3- Define a custom DesignerAutoFormat, which comes with an abstract Apply method, which is called when trying to apply a format on the preview control.

class LabelExAutoFormat : DesignerAutoFormat
{
    public LabelExAutoFormat(string name)
        : base(name)
    { }
    public override void Apply(Control control)
    {
        if (control is LabelEx)
        {
            LabelEx ctrl = control as LabelEx;
            switch (this.Name)
            {
                case "Remove All":
                    ctrl.ControlStyle.Reset();
                    break;
                case "Reddish":
                    ctrl.ControlStyle.ForeColor = ColorTranslator.FromHtml("#ff0000");
                    ctrl.ControlStyle.BackColor = ColorTranslator.FromHtml("#ffccff");
                    ctrl.ControlStyle.Font.Bold = true;
                    break;
                case "Blueish":
                    ctrl.ControlStyle.ForeColor = ColorTranslator.FromHtml("#0000ff");
                    ctrl.ControlStyle.BackColor = ColorTranslator.FromHtml("#99ccff");
                    ctrl.ControlStyle.Font.Italic = true;
                    break;
            }
        }
    }
}

4- And don’t forget to decorate the control with the designer attribute

[Designer(typeof(LabelExDesigner))]
public class LabelEx : Label
{ 
}

And now everything is set and you have your own auto formats.

Here is the code and Happy Coding…

This is final part of my series/tutorial on design time support, it was really fun writing it and hearing your comments and suggestions, I really learnt alot and hope you too had some experience in writing design time support for the custom controls.

In this part, I will show you how to debug the design time code we are writing (works with vs 2005 and 2008).

[more]

Prerequisites:

1. Have a solution containing the control.
2. Configuration set to Debug.

Steps:

1. Open that solution containing the control.
2. Right click the project and select Properties.
3. Select Debug Tab as in Figure.
4. From Select Action Group select Start external program then browse the devenv.exe usually found in this path C:Program FilesMicrosoft Visual Studio 9.0Common7IDEdevenv.exe
5. Save Settings.
6. Place breakpoints where ever design time code should be called.
7. Now Debug the project a new instance of Visual studio will open.
8. Start a new project to be a container of the project (new web application to test a web control or a windows application for a windows control).
9. Choose from the toolbox the control you already built ( Right click toolbox > Choose Items > browse for the dll of the control.)
10. Now drag your control to the testing container and make any design time action (as using smart tag methods), the first instance will stop in breakpoints. Congratulations you are debugging design time code now.

That's the end of the series, but not the end of design time tips and tricks any one comes in my mind, I will be sure to include it in this blog under the category of Design Time Support.

Hope someone out there will benefit from this tutorial, please let me know if you need any help concerning this issue.

The default PropetryWindow in the visual studio shows 2 Tabs one for properties and another for events. If one day you thought that you have set of members might be Properties that you need to put them in an extra property tab then in this post you will learn how to put extra tabs.

When this can be useful?

After the ajax era has arrived and component authors started to build some ajax controls we usually see Properties named " ClientXXX " where xxx is the event name and these properties just appear in the properties tab while it would be more appropriate to show them in an extra tab say a Client side events.  [more]

How Can you do it?

You need to follow some steps.

1. Create a Custom Tab that extends the System.Windows.Forms.Design.PropertyTab
2. override the GetProperties method to send back the selected properties
3. override the TabName property to set the name of the tab.
4. override the Bitmap property to set the image of the tab button.
5. Mark the control/component with PropertyTabAttribute and pass the type of the new Custom Tab.

In code:

[code:c#]

public class ExtraSuperTab : System.Windows.Forms.Design.PropertyTab
{
    public override PropertyDescriptorCollection GetProperties(object component, Attribute[] attributes)
    {
        PropertyDescriptor pd = TypeDescriptor.CreateProperty(component.GetType(), "XXX",typeof(int), new CategoryAttribute("Super Properties"));

        return (new PropertyDescriptorCollection(new PropertyDescriptor[]{pd}));
    }

    public override string TabName
    {
        get { return "Super Tab"; }
    }

    public override System.Drawing.Bitmap Bitmap
    {
        get
        {
            return (System.Drawing.Bitmap)System.Drawing.Image.FromFile(@"D:icon.bmp");
        }
    }
}

[/code]

And in the control don't forget the attribute

[code:c#]

[PropertyTab(typeof(ExtraSuperTab), PropertyTabScope.Component)]
public partial class TestUserControl : UserControl

[/code]

How it looks at the end in visual studio. 

 

TestUserControl.cs (1.37 kb)

Another new feature added in the Design Time Environment in visual studio 2005 and 2008 for windows forms and windows user controls designers is the Snaplines.

What is a snapline?

A snapline is a dynamically generated UI layout guide line. Snaplines are generated during control move operations in the designer. The location of other controls on the design surface provide the lines.

All controls by default inherit the default the Snaplines which appear while moving that interact with Tops, Lefts, Bottoms and Rights of other controls, with the form border, spacings from other controls and some other. One remarkable snapline is the one that appears while moving a Label control beside TextBox controls the purple snapline that aligns the text position instead of the control position. [more]

Now using thr sample control I used in the previous part , I added two labels and two texboxes to simulate a Login control, like the following:

By default when placing this control on a windows form and start moving it around there are no snaplines to interact with the inner labels and textboxes in this sample I will show how to implement custom Snaplines for this usercontrol.

Steps:

1- Add a designer.

2- override Snaplines property and add your own custom ones.

[code:c#]

public override System.Collections.IList SnapLines
{
    get
    {
        IList snaplines = base.SnapLines; //get old snaplines and then add new ones
        snaplines.Add(new SnapLine(SnapLineType.Baseline, _control.lblUserName.Bottom));
        snaplines.Add(new SnapLine(SnapLineType.Baseline, _control.lblPassword.Bottom));
        return snaplines;
    }
}

[/code]

3- Don't forget to add the Designer attribute to the Control definition

[code:c#]

[Designer(typeof(UserControlDesigner))]
public partial class TestUserControl : UserControl

[/code]

The final looks as this.

So good luck and happy coding with custom controls design time.

UserControlDesigner.cs (7.70 kb)