BorderLayout

BorderLayout is a Layout Manager which allows the user to arrange and layout the Child controls along the borders and at the center, just like the .NET framework’s built-in docking support.

Layout manager to dock controls at different sides

NOTE

BorderLayout does not arrange the Child components automatically like the other Layout Managers.

Key features

Spacing - Provides option to customize horizontal and vertical gaps between child controls

Position - Provides options to set the direction of child controls such as north, south, east, west or center.

Size - Provides option to customize the size of the child controls in BorderLayout.

Getting started

This section describes how to add BorderLayout control in a Windows Forms application and overview of its basic functionalities.

Assembly deployment

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:

How to install nuget packages

Creating simple application with BorderLayout

You can create the Windows Forms application with BorderLayout control as follows:

  1. Creating project
  2. Adding control via designer
  3. Adding control manually using code

Creating the project

Create a new Windows Forms project in the Visual Studio to display the BorderLayout with basic functionalities.

Adding control via designer

The BorderLayout 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:

  • Syncfusion.Shared.Base.dll

Drag and drop BorderLayout from toolbox

To add the form as a Container control of the BorderLayout, click Yes in a popup form which appears automatically before BorderLayout gets added.

Alert to add BorderLayout to form

Adding layout components

The child controls can be added to the layout by dragging it from the toolbox and dropping it in a designer view.

Adding controls into BorderLayout

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:

* Syncfusion.Shared.Base.dll

Step 2 - Include the namespaces Syncfusion.Windows.Forms.Tools.

using Syncfusion.Windows.Forms.Tools;
Imports Syncfusion.Windows.Forms.Tools

Step 3 - Create BorderLayout control instance and set ContainerControl as form.

BorderLayout borderLayout1 = new BorderLayout();

this.borderLayout1.ContainerControl = this;
Dim borderLayout1 As BorderLayout = New BorderLayout()

Me.borderLayout1.ContainerControl = Me

Adding layout components

The child controls can be added to the layout by simply adding it to the form, since the form is its container control.

ButtonAdv buttonAdv1 = new ButtonAdv();
ButtonAdv buttonAdv2 = new ButtonAdv();
ButtonAdv buttonAdv3 = new ButtonAdv();

this.buttonAdv1.Text = "buttonAdv1";
this.buttonAdv2.Text = "buttonAdv2";
this.buttonAdv3.Text = "buttonAdv3";

this.Controls.Add(this.buttonAdv1);
this.Controls.Add(this.buttonAdv2);
this.Controls.Add(this.buttonAdv3);
Dim buttonAdv1 As ButtonAdv = New ButtonAdv()
Dim buttonAdv3 As ButtonAdv = New ButtonAdv()
Dim buttonAdv3 As ButtonAdv = New ButtonAdv()

Me.buttonAdv1.Text = "buttonAdv1"
Me.buttonAdv2.Text = "buttonAdv2"
Me.buttonAdv3.Text = "buttonAdv3"

Me.Controls.Add(this.buttonAdv1)
Me.Controls.Add(this.buttonAdv2)
Me.Controls.Add(this.buttonAdv3)

Configuring BorderLayout

The configuration settings for the BorderLayout have been discussed in this topic.

Spacing

The horizontal and the vertical gap between the Child controls can be set using the properties given below.

BorderLayout properties Description
HGap Gets/sets the horizontal spacing between the components.
VGap Gets/sets the vertical spacing between the components.
this.borderLayout1.HGap = 10;

this.borderLayout1.VGap = 10;
Me.borderLayout1.HGap = 10

Me.borderLayout1.VGap = 10

Aligning with space between child controls

Configuring Child controls

The Child controls can be aligned to various positions (North, South, East, West and Center) using the property given below.

Child control property Description
Position on borderLayout Gets/sets the border position for a Child component.

Child control property description

Position on borderLayout - Gets/sets the border position for a Child component.

NOTE

This property is added as an extended property in the properties window of the Child control added to the BorderLayout.

this.borderLayout1.SetPosition(this.btnNorth, Syncfusion.Windows.Forms.Tools.BorderPosition.North);
Me.borderLayout1.SetPosition(Me.btnNorth, Syncfusion.Windows.Forms.Tools.BorderPosition.North)

Aligning child control at different position

Setting the position of button1 on BorderLayout to “North”

Aligning button at north relative to container

Layout of all Button Controls using BorderLayout

NOTE

BorderLayout allows only one control to be aligned along a particular layout position, unlike the .NET Framework support.

See Also

Creating a Simple Layout, Margin Settings, Border Layout - Configuring Child Controls, and Configuring BorderLayout.