GridLayout is a Layout Manager that allows us to arrange the Child controls as in a grid containing rows and columns. Deriving from the Layout Manager base, the GridLayout inherits all the functionality that the Layout Manager type exposes. In its simplest form, this Layout Manager can be used to automatically arrange the Child components in one or more rows, as illustrated below.
Rows and columns - Provides options to customize row and column span of the child controls
HGap and VGap - Provides option to set the gaps between child control such as horizontal and vertical direction
This section describes how to add
GridLayout control in a Windows Forms application and overview of its basic functionalities.
Refer control dependencies section to get the list of assemblies or NuGet package needs to be added as reference to use the control in any application.
Please find more details regarding how to install the nuget packages in windows form application in the below link:
Creating simple application with GridLayout
You can create the Windows Forms application with GridLayout control as follows:
Creating the project
Create a new Windows Forms project in the Visual Studio to display the GridLayout with basic functionalities.
Adding control via designer
The GridLayout control can be added to the application by dragging it from the toolbox and dropping it in a designer view. The following required assembly references will be added automatically:
To add the form as a Container control of the GridLayout, a popup will appear automatically before it gets added.
Adding Layout components through designer
The child controls can be added to the layout by dragging it from the toolbox and dropping it in a designer view.
Adding control manually using code
To add control manually in C#, follow the given steps:
Step 1 - Add the following required assembly references to the project:
Step 2 - Include the namespaces Syncfusion.Windows.Forms.Tools.
Step 3 - Create
GridLayout control instance and set
ContainerControl as form.
GridLayout gridLayout1 = new GridLayout(); this.gridLayout1.ContainerControl = this;
Dim gridLayout1 As GridLayout = New GridLayout() Me.gridLayout1.ContainerControl = Me
Adding layout components through code
The child controls can be added to the layout by adding it to the form and adding them as a layout member using
ButtonAdv buttonAdv1 = new ButtonAdv(); ButtonAdv buttonAdv2 = new ButtonAdv(); ButtonAdv buttonAdv3 = new ButtonAdv(); ButtonAdv buttonAdv4 = new ButtonAdv(); this.buttonAdv1.Text = "buttonAdv1"; this.buttonAdv2.Text = "buttonAdv2"; this.buttonAdv3.Text = "buttonAdv3"; this.buttonAdv4.Text = "buttonAdv3"; this.Controls.Add(this.buttonAdv1); this.Controls.Add(this.buttonAdv2); this.Controls.Add(this.buttonAdv3); this.Controls.Add(this.buttonAdv4); this.gridLayout1.SetParticipateInLayout(this.button1, true); this.gridLayout1.SetParticipateInLayout(this.button2, true); this.gridLayout1.SetParticipateInLayout(this.button3, true); this.gridLayout1.SetParticipateInLayout(this.button4, true);
Dim buttonAdv1 As ButtonAdv = New ButtonAdv() Dim buttonAdv3 As ButtonAdv = New ButtonAdv() Dim buttonAdv3 As ButtonAdv = New ButtonAdv() Dim buttonAdv4 As ButtonAdv = New ButtonAdv() Me.buttonAdv1.Text = "buttonAdv1" Me.buttonAdv2.Text = "buttonAdv2" Me.buttonAdv3.Text = "buttonAdv3" Me.buttonAdv4.Text = "buttonAdv4" Me.Controls.Add(this.buttonAdv1) Me.Controls.Add(this.buttonAdv2) Me.Controls.Add(this.buttonAdv3) Me.Controls.Add(this.buttonAdv4) Me.gridLayout1.SetParticipateInLayout(Me.button1, true); Me.gridLayout1.SetParticipateInLayout(Me.button2, true); Me.gridLayout1.SetParticipateInLayout(Me.button3, true); Me.gridLayout1.SetParticipateInLayout(Me.button4, true);
Rows and columns
The GridLayout simply divides the available space into a number of rows and columns based on the number of Child controls. The number of rows and columns can be specified using the properties given below.
|Rows||Specifies the number of rows in the grid.|
|Columns||Specifies the number of columns in the grid.|
The Rows property usually dictates the number of columns (overriding the Columns property setting) based on the number of Child controls, unless the Rows property is set to ‘Null’ or less, in which case the Columns property will dictate the number of rows.
The following code snippet arranges the Child controls in one column and two rows.
this.gridLayout1.Rows = 2; this.gridLayout1.Columns = 1;
Me.gridLayout1.Rows = 2 Me.gridLayout1.Columns = 1
HGap and VGap
The horizontal and the vertical gap between the Child controls can be set using the properties given below.
|HGap||Gets/sets the horizontal spacing between the components.|
|VGap||Gets/sets the vertical spacing between the components.|
To include some margin space along the borders, refer_ Margin Settings.
Configuring Child controls
The following settings can be used to configure the Child controls of the GridLayout Manager.
To prevent a Child control from being laid out using the GridLayout Manager, the below given property can be used.
|Child control property||Description|
|ParticipateInLayout||Specifies whether the Child control should participate in the GridLayout. The default value is set to `true`.|
The methods associated with the above property are given below.
|GetParticipateInLayout||Indicates whether the component is in the layout list.|
|SetParticipateInLayout||Adds or removes the specified control from the layout list.|
The following code can be used to add or remove the control from the GridLayout list programmatically.
Rearranging the controls laid out by GridLayout
The Child controls of the GridLayout can be rearranged by dragging-and-dropping them at design time.