How to layout non-control based Child components

The Layout Manager architecture seamlessly lets you use non-control derived Child-instances as the layout’s Child controls. You can easily accomplish this by deriving your Child-types from the LayoutItemBase type and implementing methods. These instances can be used in any of the Layout Manager methods in the place of a Child control (for ex: SetConstraints, SetPreferredSize). This is feasible because the LayoutItemBase class has an implicit type-conversion operator that can convert itself to a control (use LayoutItemBase.ToControl method in VB.NET).

The following step by step procedure helps you to layout non-control based Child components.

Drag and drop the Panel (Container control) and GridBagLayout control to the form.

Use Step 1 to Step 5 in Form_Load event,

  1. Declare variables representing the Child control (non-control based components).
private MyRectangle myRect1;

		private MyRectangle myRect2;

		private MyRectangle myRect3;

		private Syncfusion.Windows.Forms.Tools.GridBagLayout gridBagLayout1;

		private MyPanel panel1;
Private WithEvents myRect1 As MyRectangle

		Private WithEvents myRect2 As MyRectangle

		Private WithEvents myRect3 As MyRectangle

		Private gridBagLayout1 As Syncfusion.Windows.Forms.Tools.GridBagLayout ;

		Private panel1 As MyPanel ;
  1. Set the Container control, color, and text for the above variables (non-control based components).
// Layout Component 1

			this.myRect1 = new MyRectangle(this.gridBagLayout1.ContainerControl, Color.FromArgb(133, 191, 117), "Paint Area 1");

			this.myRect1.Bounds = new Rectangle(10, 10, 80, 20);

			this.myRect1.Visible = true;



			// Layout Component 2

			this.myRect2 = new MyRectangle(this.gridBagLayout1.ContainerControl, Color.FromArgb(222, 100, 19), "Paint Area 2");

			this.myRect2.Bounds = new Rectangle(10, 40, 80, 20);

			this.myRect2.Visible = true;



			// Layout Component 3

			this.myRect3 = new MyRectangle(this.gridBagLayout1.ContainerControl, Color.FromArgb(196, 214, 233), "Paint Area 3");

			this.myRect3.Bounds = new Rectangle(10, 70, 80, 20);

			this.myRect3.Visible = true;
' Layout Component 1

			Me.myRect1 = New MyRectangle(Me.gridBagLayout1.ContainerControl,Color.FromArgb(133, 191, 117), "Paint Area 1")

			Me.myRect1.Bounds = New Rectangle(10, 10, 80, 20)

			Me.myRect1.Visible = True



			' Layout Component 2

			Me.myRect2 = New MyRectangle(Me.gridBagLayout1.ContainerControl,Color.FromArgb(222, 100, 19), "Paint Area 2")

			Me.myRect2.Bounds = New Rectangle(10, 40, 80, 20)

			Me.myRect2.Visible = True



			' Layout Component 3

			Me.myRect3 = New MyRectangle(Me.gridBagLayout1.ContainerControl,Color.FromArgb(196, 214, 233), "Paint Area 3")

			Me.myRect3.Bounds = New Rectangle(10, 70, 80, 20)

			Me.myRect3.Visible = True
  1. Declare instances for the GridBagConstraints which specifies how the components will be positioned inside a Container managed by the GridBagLayout control.
GridBagConstraints gbc1 = new GridBagConstraints();

		GridBagConstraints gbc2 = new GridBagConstraints();

		GridBagConstraints gbc3 = new GridBagConstraints();
Dim gbc1 As GridBagConstraints

		gbc1 = New GridBagConstraints()

		Dim gbc2 As GridBagConstraints

		gbc2 = New GridBagConstraints()

		Dim gbc3 As GridBagConstraints

		gbc3 = New GridBagConstraints()
  1. Set the FillType, WeightX, WeightY, GridPostX and GridPostY properties for the components.
gbc1.Fill = FillType.Both;

			gbc1.WeightX = 0.2;

			gbc1.WeightY = 0.5;

			gbc1.GridPosX = 0;

			gbc1.GridPosY = 0;



			gbc2.Fill = FillType.Both;

			gbc2.WeightX = 0.2;

			gbc2.WeightY = 0.5;

			gbc2.GridPosX = 1;

			gbc2.GridPosY = 0;



			gbc3.Fill = FillType.Both;

			gbc3.WeightX = 0.4;

			gbc3.WeightY = 0.5;

			gbc3.GridPosX = 0;

			gbc3.GridPosY = 1;

			gbc3.CellSpanX = 2;
gbc1.Fill = FillType.Both

			gbc1.WeightX = 0.2

			gbc1.WeightY = 0.5

			gbc1.GridPosX = 0

			gbc1.GridPosY = 0



			gbc2.Fill = FillType.Both

			gbc2.WeightX = 0.2

			gbc2.WeightY = 0.5

			gbc2.GridPosX = 1

			gbc2.GridPosY = 0



			gbc3.Fill = FillType.Both

			gbc3.WeightX = 0.4

			gbc3.WeightY = 0.5

			gbc3.GridPosX = 0

			gbc3.GridPosY = 1

			gbc3.CellSpanX = 2
  1. Associate non-control based components with the constraints.
this.gridBagLayout1.SetConstraints(this.myRect1.ToControl(), gbc1);

		this.gridBagLayout1.SetConstraints(this.myRect2.ToControl(), gbc2);

		this.gridBagLayout1.SetConstraints(this.myRect3.ToControl(), gbc3);
Me.gridBagLayout1.SetConstraints(Me.myRect1.ToControl, gbc1)

		Me.gridBagLayout1.SetConstraints(Me.myRect2.ToControl, gbc2)

		Me.gridBagLayout1.SetConstraints(Me.myRect3.ToControl, gbc3)
  1. Define the class for ‘MyRectangle’ that implements the LayoutItemBase.
  2. Use Step 6 to Step 9 inside the MyRectangle class that implements the LayoutItemBase.
  3. Declare variables for the size, color and base class of the control.
public class MyRectangle : LayoutItemBase

			{

				public static Size PrefSize = new Size(0, 0);

				protected Control parent;

				protected Color color;

				protected string text;

			}
Public Class MyRectangle Inherits LayoutItemBase

			Protected WithEvents parent As Control

			Protected color As color

			Protected [text] As String

			Public Shared PrefSize As System.Drawing.Size
  1. Set the variables declared in step 6 in the constructor.
public MyRectangle(Control parent, Color color, string text)

				{

					this.parent = parent;

					this.color = color;

					this.text = text;

				}
Public Sub New(ByVal parent As Control, ByVal color As color, ByVal [text] As String)

				MyBase.New()

				Me.parent = parent

				Me.color = color

				Me.text = [text]

				End Sub
  1. Fill the interior of the rectangle specified by a pair of coordinates, width and a height using OnPaint event of LayoutItemBase.
e.Graphics.FillRectangle(new SolidBrush(color), this.Bounds);
e.Graphics.FillRectangle(new SolidBrush(color), this.Bounds)
  1. Invalidate the Child controls assigned to the control in the OnBoundsChanged event of the LayoutItemBase.
protected override void OnBoundsChanged()

				{

				parent.Invalidate(new Rectangle(0, 0, this.parent.Width, this.parent.Height));

				}
Protected Overloads Overrides Sub OnBoundsChanged()

				parent.Invalidate(New Rectangle(0, 0, Me.parent.Width, Me.parent.Height))

				End Sub