Arranging Input Components Using Padding

You can easily arrange components on a C1InputPanel control by setting the Padding property of each component. In this topic, you will create a form with six components and manipulate them to create an aesthetically pleasing layout.

Arranging Components Using the Designer

To arrange C1InputPanel components using the designer, follow these steps:

Click C1InputPanel's smart tag () to open the C1Input Tasks menu and then select Edit Items.
The C1InputPanel Item Collection Editor opens.
To add components to the panel, select them from the list box and then click Add. For this topic, we will add the following components to the panel:
- Group Header
- InputLabels (2)
- InputTextBox
- InputComboBox
- InputButton
Observe that the components appear in the Members pane and on the C1InputPanel control as they are added.
Use the arrow buttons ( ) to rearrange the components so that they are in the same order as the components in the following image:

After reorganizing the components, your C1InputPanel will resemble the following image:

By default, the padding settings for each component are set to '0', meaning that there is little space between the components. To increase the padding of the components, complete the following steps:

In the Members pane, select inputLabel1 to reveal its list of properties in the Property grid. Expand the node next to the Padding property and set it as follows:

Padding Area	Setting
Left	5
Top	20
Right	20
Bottom	10

Select inputTextBox1 from the Members pane, click the node next to the Padding property, and set the padding of the component as follows:

Padding Area	Setting
Left	0
Top	10
Right	0
Bottom	0

Select inputLabel2 from the Members pane, click the node next to the Padding property, and set the padding of the component as follows:

Padding Area	Setting
Left	5
Top	0
Right	20
Bottom	0

Select inputButton1 from the Members pane, click the node next to the Padding property, and set the padding of the component as follows:

Padding Area	Setting
Left	120
Top	22
Right	0
Bottom	0

Click OK to exit the C1InputPanel Collection Editor.

Arranging Components Programmatically

To arrange C1InputPanel components programmatically, complete the following steps:

Click C1InputPanel's smart tag () to open the C1Input Tasks menu. Select Edit Items.
The C1InputPanel Item Collection Editor opens.
To add components to the panel, select them from the list box and then click Add. For this topic, we will add the following components to the panel:
- Group Header
- InputLabels (2)
- InputTextBox
- InputComboBox
- InputButton
Use the arrow buttons ( ) to rearrange the components so that they are in the same order as the components in the following image:
Click OK to close the C1InputPanel Item Collection Editor. Observe that your C1InputPanel resembles the following image:
Double-click the form. This will open the code editor and add a Form_Load event to the project.

Make sure that the following namespaces are imported into your project:

To write code in Visual Basic

Visual Basic	Copy Code
Imports System.Windows.Forms Imports C1.Win.C1InputPanel

To write code in C#

C#	Copy Code
using System.Windows.Forms; using C1.Win.C1InputPanel;

Set the Padding properties for inputLabel1, inputLabel2, inputTextBox1, and inputButton1 by adding the following code to the Form_Load event:

To write code in Visual Basic

Visual Basic	Copy Code
inputLabel1.Padding = New Padding(5,20,20,10) inputLabel2.Padding = New Padding(5, 0, 20, 0) inputTextBox1.Padding = New Padding(0, 10, 0, 0) inputButton1.Padding = New Padding(120, 22, 0, 0)

To write code in C#

Run the program.

C#	Copy Code
inputLabel1.Padding = new Padding(5,20,20,10); inputLabel2.Padding = new Padding(5, 0, 20, 0); inputTextBox1.Padding = new Padding(0, 10, 0, 0); inputButton1.Padding = new Padding(120, 22, 0, 0);

This Topic Illustrates the Following:

The result of this topic will resemble the following image: