Panels in UserControl - enable design support - winforms

Question

I've build very simple user control that has TableLayoutPanel in it.
I've created layout as so
My idea is to have control that will become layout (template) for all other controls and forms.
Middle column is fixed, but first and third column can be fixed or autosized.
What I need now is to add Design Time Support to allow user to add controls only to those 4 panels.
I've tried adding:
[Designer("System.Windows.Forms.Design.ParentControlDesigner, System.Design", typeof(IDesigner))]
but this way I can only move controls around, they aren't added to my panels.
My code so far:
[Designer("System.Windows.Forms.Design.ParentControlDesigner, System.Design", typeof(IDesigner))]
public partial class CustomGrid : UserControl
{
public CustomGrid()
{
InitializeComponent();
}
private bool _firstFixed = true;
[Browsable(true)]
[Category("Grid")]
public bool FirstFixed
{
get { return _firstFixed; }
set { _firstFixed = value; ReLayout();}
}
private float _firstSize = 200F;
[Browsable(true)]
[Category("Grid")]
public float FirstSize
{
get { return _firstSize; }
set { _firstSize = value; ReLayout(); }
}
private float _secondSize = 200F;
[Browsable(true)]
[Category("Grid")]
public float SecondSize
{
get { return _secondSize; }
set { _secondSize = value; ReLayout(); }
}
private bool _thirdFixed = true;
[Browsable(true)]
[Category("Grid")]
public bool ThirdFixed
{
get { return _thirdFixed; }
set { _thirdFixed = value; ReLayout(); }
}
private float _thirdSize = 200F;
[Browsable(true)]
[Category("Grid")]
public float ThirdSize
{
get { return _thirdSize; }
set { _thirdSize = value; ReLayout(); }
}
private void ReLayout()
{
grid.ColumnStyles.Clear();
grid.ColumnStyles.Add(_firstFixed ? new ColumnStyle(SizeType.Absolute, _firstSize) : new ColumnStyle(SizeType.Percent, 33.33F));
grid.ColumnStyles.Add(new ColumnStyle(SizeType.Absolute, _secondSize));
grid.ColumnStyles.Add(_thirdFixed ? new ColumnStyle(SizeType.Absolute, _thirdSize) : new ColumnStyle(SizeType.Percent, 33.33F));
}
}
Designer code:
partial class CustomGrid
{
/// <summary>
/// Required designer variable.
/// </summary>
private System.ComponentModel.IContainer components = null;
/// <summary>
/// Clean up any resources being used.
/// </summary>
/// <param name="disposing">true if managed resources should be disposed; otherwise, false.</param>
protected override void Dispose(bool disposing)
{
if (disposing && (components != null))
{
components.Dispose();
}
base.Dispose(disposing);
}
#region Component Designer generated code
/// <summary>
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
/// </summary>
private void InitializeComponent()
{
this.grid = new System.Windows.Forms.TableLayoutPanel();
this.panel1 = new System.Windows.Forms.Panel();
this.panel2 = new System.Windows.Forms.Panel();
this.panel3 = new System.Windows.Forms.Panel();
this.panel4 = new System.Windows.Forms.Panel();
this.grid.SuspendLayout();
this.SuspendLayout();
//
// grid
//
this.grid.BackColor = System.Drawing.Color.White;
this.grid.ColumnCount = 3;
this.grid.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Absolute, 200F));
this.grid.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Absolute, 200F));
this.grid.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 100F));
this.grid.Controls.Add(this.panel1, 0, 0);
this.grid.Controls.Add(this.panel2, 1, 0);
this.grid.Controls.Add(this.panel3, 2, 0);
this.grid.Controls.Add(this.panel4, 1, 1);
this.grid.Dock = System.Windows.Forms.DockStyle.Fill;
this.grid.Location = new System.Drawing.Point(0, 0);
this.grid.Margin = new System.Windows.Forms.Padding(0);
this.grid.Name = "grid";
this.grid.RowCount = 2;
this.grid.RowStyles.Add(new System.Windows.Forms.RowStyle(System.Windows.Forms.SizeType.Absolute, 100F));
this.grid.RowStyles.Add(new System.Windows.Forms.RowStyle(System.Windows.Forms.SizeType.Percent, 100F));
this.grid.Size = new System.Drawing.Size(774, 430);
this.grid.TabIndex = 0;
//
// panel1
//
this.panel1.BackColor = System.Drawing.Color.White;
this.panel1.BorderStyle = System.Windows.Forms.BorderStyle.FixedSingle;
this.panel1.Dock = System.Windows.Forms.DockStyle.Fill;
this.panel1.Location = new System.Drawing.Point(5, 5);
this.panel1.Margin = new System.Windows.Forms.Padding(5);
this.panel1.Name = "panel1";
this.grid.SetRowSpan(this.panel1, 2);
this.panel1.Size = new System.Drawing.Size(190, 420);
this.panel1.TabIndex = 0;
//
// panel2
//
this.panel2.BackColor = System.Drawing.Color.White;
this.panel2.BorderStyle = System.Windows.Forms.BorderStyle.FixedSingle;
this.panel2.Dock = System.Windows.Forms.DockStyle.Fill;
this.panel2.Location = new System.Drawing.Point(205, 5);
this.panel2.Margin = new System.Windows.Forms.Padding(5);
this.panel2.Name = "panel2";
this.panel2.Size = new System.Drawing.Size(190, 90);
this.panel2.TabIndex = 1;
//
// panel3
//
this.panel3.BackColor = System.Drawing.Color.White;
this.panel3.BorderStyle = System.Windows.Forms.BorderStyle.FixedSingle;
this.panel3.Dock = System.Windows.Forms.DockStyle.Fill;
this.panel3.Location = new System.Drawing.Point(405, 5);
this.panel3.Margin = new System.Windows.Forms.Padding(5);
this.panel3.Name = "panel3";
this.grid.SetRowSpan(this.panel3, 2);
this.panel3.Size = new System.Drawing.Size(364, 420);
this.panel3.TabIndex = 2;
//
// panel4
//
this.panel4.BorderStyle = System.Windows.Forms.BorderStyle.FixedSingle;
this.panel4.Dock = System.Windows.Forms.DockStyle.Fill;
this.panel4.Location = new System.Drawing.Point(205, 105);
this.panel4.Margin = new System.Windows.Forms.Padding(5);
this.panel4.Name = "panel4";
this.panel4.Size = new System.Drawing.Size(190, 320);
this.panel4.TabIndex = 3;
//
// CustomGrid
//
this.AutoScaleDimensions = new System.Drawing.SizeF(6F, 13F);
this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
this.Controls.Add(this.grid);
this.Margin = new System.Windows.Forms.Padding(0);
this.Name = "CustomGrid";
this.Size = new System.Drawing.Size(774, 430);
this.grid.ResumeLayout(false);
this.ResumeLayout(false);
}
#endregion
private System.Windows.Forms.TableLayoutPanel grid;
private System.Windows.Forms.Panel panel1;
private System.Windows.Forms.Panel panel2;
private System.Windows.Forms.Panel panel3;
private System.Windows.Forms.Panel panel4;
}
I've tried adding custom ControlDesigner (How do I provide designer support to a TabControl residing in a UserControl, so that I can drag/drop controls onto tab pages?) but without any luck.
My designer:
internal class CustomGridControlDesigner : ParentControlDesigner
{
public override void Initialize(IComponent component)
{
base.Initialize(component);
var ctl = Control as CustomGrid;
foreach (object ctrl in ctl.Controls)
{
if (ctrl.GetType() != typeof (Panel)) continue;
var ctrl1 = ctrl as Panel;
EnableDesignMode(ctrl1, ctrl1.Name);
}
}
}
My question is how can I add support for dragging and dropping controls to panels that are inside my control?
EDIT:
I've changed my code:
[Designer(typeof(CustomGridControlDesigner))]
public partial class CustomGrid : UserControl
{
public CustomGrid()
{
InitializeComponent();
}
private bool _firstFixed = true;
[Browsable(true)]
[Category("Grid")]
public bool FirstFixed
{
get { return _firstFixed; }
set { _firstFixed = value; ReLayout();}
}
private float _firstSize = 200F;
[Browsable(true)]
[Category("Grid")]
public float FirstSize
{
get { return _firstSize; }
set { _firstSize = value; ReLayout(); }
}
private float _secondSize = 200F;
[Browsable(true)]
[Category("Grid")]
public float SecondSize
{
get { return _secondSize; }
set { _secondSize = value; ReLayout(); }
}
private bool _thirdFixed = true;
[Browsable(true)]
[Category("Grid")]
public bool ThirdFixed
{
get { return _thirdFixed; }
set { _thirdFixed = value; ReLayout(); }
}
private float _thirdSize = 200F;
[Browsable(true)]
[Category("Grid")]
public float ThirdSize
{
get { return _thirdSize; }
set { _thirdSize = value; ReLayout(); }
}
[DesignerSerializationVisibility(DesignerSerializationVisibility.Content)]
[DesignerSerializationVisibility(DesignerSerializationVisibility.Content)]
[Browsable(false), EditorBrowsable(EditorBrowsableState.Never)]
public Panel Panel1
{
get { return this.panel1; }
}
[DesignerSerializationVisibility(DesignerSerializationVisibility.Content)]
[DesignerSerializationVisibility(DesignerSerializationVisibility.Content)]
[Browsable(false), EditorBrowsable(EditorBrowsableState.Never)]
public Panel Panel2
{
get { return this.panel2; }
}
[DesignerSerializationVisibility(DesignerSerializationVisibility.Content)]
[DesignerSerializationVisibility(DesignerSerializationVisibility.Content)]
[Browsable(false), EditorBrowsable(EditorBrowsableState.Never)]
public Panel Panel3
{
get { return this.panel3; }
}
[DesignerSerializationVisibility(DesignerSerializationVisibility.Content)]
[DesignerSerializationVisibility(DesignerSerializationVisibility.Content)]
[Browsable(false), EditorBrowsable(EditorBrowsableState.Never)]
public Panel Panel4
{
get { return this.panel4; }
}
private void ReLayout()
{
grid.ColumnStyles.Clear();
grid.ColumnStyles.Add(_firstFixed ? new ColumnStyle(SizeType.Absolute, _firstSize) : new ColumnStyle(SizeType.Percent, 33.33F));
grid.ColumnStyles.Add(new ColumnStyle(SizeType.Absolute, _secondSize));
grid.ColumnStyles.Add(_thirdFixed ? new ColumnStyle(SizeType.Absolute, _thirdSize) : new ColumnStyle(SizeType.Percent, 33.33F));
}
}
And my custom designer:
internal class CustomGridControlDesigner : ParentControlDesigner
{
public override void Initialize(IComponent component)
{
base.Initialize(component);
EnableDesignMode((Control as CustomGrid).Panel1, "Panel1");
base.Initialize(component);
EnableDesignMode((Control as CustomGrid).Panel2, "Panel2");
base.Initialize(component);
EnableDesignMode((Control as CustomGrid).Panel3, "Panel3");
base.Initialize(component);
EnableDesignMode((Control as CustomGrid).Panel4, "Panel4");
}
}
Now I can add controls to those panels, but I must add nested panel to all of my panels to be able to use align tool (blue lines):
Also how can I hide all properties of those 4 panels? Right now I can click on every one of them and change every property.

Answer 1

Idea is to have control that will become layout (template)
You are running into well-known limitations in design-time support, it just doesn't work very well anymore when it needs to deal with inherited or encapsulated controls. You are also well on your way creating a UI that's top-heavy with windows and will perform poorly at runtime. You created at least one rock in the road by declaring the control members private, as it behooves, the designer cannot deal with that since it needs to observe accessibility so cannot generate code that changes any of their properties.
I strongly recommend you instead set out to do what you in fact intended to accomplish, actually create an item template. Fairly well supported in Visual Studio with the File + Export Template command. Which give the user a cookie-cutter UserControl or Form to start out with that does not need a custom designer. And all the flexibility he might want to tweak your base design when needed, greatly encouraging re-usability of your design. Maybe you don't like to give the user this flexibility, creating a designer that removes capabilities is a lot easier than one that adds them. I don't recommend you actually do this, good odds you'll get a bunch of support requests that ask for adding them back :)