Резиновый интерфейс на windows forms c

Последнее обновление: 31.10.2015

Элемент TableLayoutPanel также переопределяет панель и располагает дочерние элементы управления в виде таблицы, где для каждого
элемента имеется своя ячейка. Если нам хочется поместить в ячейку более одного элемента, то в эту ячейку добавляется другой компонент
TableLayoutPanel, в который затем вкладываются другие элементы.

Чтобы установить нужное число строки столбцов таблицы, мы можем использовать свойства Rows и Columns соответственно. Выбрав один из этих пунктов в
окне Properties (Свойства), нам отобразится следующее окно для настройки столбцов и строк:

В поле Size Type мы можем указать размер столбцов / строк. Нам доступны три возможные варианта:

• Absolute: задается абсолютный размер для строк или столбцов в пикселях

• Percent: задается относительный размер в процентах. Если нам надо создать резиновый дизайн формы, чтобы ее строки и столбцы, а также
  элементы управления в ячейках таблицы автоматически масштабировались при изменении размеров формы, то нам нужно использовать именно эту опцию

• AutoSize: высота строк и ширина столбцов задается автоматически в зависимости от размера самой большой в строке
  или столбце ячейки

Также мы можем комбинировать эти значения, например, один столбец может быть фиксированным с абсолютной шириной, а остальные столбцы могут иметь
ширину в процентах.

В этом диалоговом окне мы также можем добавить или удалить строки и столбцы. В тоже время графический дизайнер в Visual Studio не всегда сразу отображает
изменения в таблице — добавление или удаление строк и столбцов, изменение их размеров, поэтому, если изменений на форме никаких не происходит, надо ее закрыть и потом
открыть заново в графическом дизайнере.

Итак, например, у меня имеется три столбца и три строки размер у которых одинаков — 33.33%. В каждую ячейку таблицы добавлена кнопка, у которой установлено свойство
Dock=Fill.

Если я изменю размеры формы, то автоматически масштабируются и строки и столбцы вместе с заключенными в них кнопками:

Что довольно удобно для создания масштабируемых интерфейсов.

В коде динамически мы можем изменять значения столбцов и строк. Причем все столбцы представлены типом ColumnStyle,
а строки — типом RowStyle:

tableLayoutPanel1.RowStyles[0].SizeType = SizeType.Percent;
tableLayoutPanel1.RowStyles[0].Height = 40;

tableLayoutPanel1.ColumnStyles[0].SizeType = SizeType.Absolute;
tableLayoutPanel1.ColumnStyles[0].Width = 50;

Для установки размера в ColumnStyle и RowStyle определено свойство SizeType, которое принимает одно из значений одноименного перечисления
SizeType

Добавление элемента в контейнер TableLayoutPanel имеет свои особенности. Мы можем добавить его как в следующую свободную ячейку или можем явным
образом указать ячейку таблицы:

Button saveButton = new Button();
// добавляем кнопку в следующую свободную ячейку
tableLayoutPanel1.Controls.Add(saveButton);
// добавляем кнопку в ячейку (2,2)
tableLayoutPanel1.Controls.Add(saveButton, 2, 2);

В данном случае добавляем кнопку в ячейку, образуемую на пересечении третьего столбца и третьей строки. Правда, если у нас нет столько строк и столбцов, то
система автоматически выберет нужную ячейку для добавления.

Растянуть элементы на форме Windows Forms

Яндекс.Директ

В статье рассмотрим способ создания “резинового” интерфейса в формах Windows Forms и разберёмся, как растянуть элементы на форме при изменении размера окна программы.

Создадим в Visual Studio проект Windows Forms и разместим на форме следующие элементы управления:

• Label
• TextBox
• RichTextBox
• Button

Запустим программу и с помощью мыши попробуем увеличить размеры окна, потянув правый нижний угол формы. В результате получим следующее:

Видим, что окно формы увеличилось в размере, но элементы управления никак не реагируют на данные изменения.

Теперь покажем, как создать адаптивный к изменениям размера окна интерфейс на форме Windows Forms.

Как растянуть элементы на форме Windows Forms

Для создания “резинового” интерфейса нужно воспользоваться свойствами элементов управления из категории Макет (Layout). А конкретно свойством Anchor.

В Windows Forms свойство Anchor определяет стороны контейнера (Top, Bottom, Left, Right) к которым привязывается элемент управления. При изменении размера контейнера расстояние между указанной стороной контейнера и ближайшей к ней стороне элемента управления остаётся неизменным.

Таким образом можно добиться растягивания и перемещения элементов в форме при изменении её размера.

В нашем случае контейнером для элементов управления является всё окно.

Зададим для TextBox значение атрибута Anchor = Top, Left, Right. Теперь расстояние между соответствующими сторонами ТекстБокса и окна будет неизменным. Так мы добьёмся изменения ширины контрола при изменении ширины окна.

Для RichTextBox значение свойства Anchor сделаем равным Top, Bottom, Left, Right.

Я ндекс.Директ

У кнопки Button установим Anchor, как Top, Right.

Теперь запустим программу и изменим размер окна: увидим, что элементы управления на форме растягиваются и меняют своё местоположение. Теперь интерфейс стал адаптированным к изменению размера окна.

Есть ещё один момент. Когда мы будем уменьшать мышью размер формы – контролы будут скрываться из поля зрения.

Чтобы решить данную проблему, необходимо указать минимальный размер формы Windows Form в пикселях. Тем самым форму будет невозможно сделать меньше установленного размера.

Щёлкнем по форме и в окне свойств изменим параметр MinimunSize. Установим его равным текущему размеру формы в визуальном редакторе (Size).

Минимальный размер можно указать и меньшим – таким, при котором интерфейс хорошо выглядит и сохраняет свою функциональность. Нужные значения определяются экспериментально – для этого самостоятельно изменяйте размер формы.

• Download project — 98.1 KB
• Download executable — 23.8 KB

Introduction

It is not so straightforward to create a responsive WinForms application. By responsiveness, we do hereby mean usability in different screen resolutions. For WinForms, we need to explicitly take care of resizing and repositioning controls based on resolution. While there are suggestions on using WPF, or using docking and anchoring of controls, using panels, etc., this article provides a different way for applying responsiveness to a WinForm application.

Background

I designed a game which is available here. I designed it in a machine that had resolution of 1920×1080. But when I tried to play it in a laptop, I found that the board fell outside the screen. I felt the need to make it responsive to reach out to people who might have different resolutions. Hence, I made changes in the code to make it responsive. So, I thought it might benefit others just to have an alternate way of applying responsiveness to WinForm applications.

The technique is simple. It has two hard-coded constants that preserve the design-time screen resolution. Now whenever the application is run, it obtains a multiplication factor which is actually a scaling factor. It obtains this factor by dividing the current resolution by the design-time resolution. Then all the controls of the form are passed to this class object for scaling and resizing.

Using the Code

The Responsive Class — Responsive.cs

There is a class Responsive.cs which has 5 member variables as below. The purposes of the members are self-explanatory by the names.

float WIDTH_AT_DESIGN_TIME = (float)Convert.ToDouble
                             (ConfigurationManager.AppSettings["DESIGN_TIME_SCREEN_WIDTH"]);
float HEIGHT_AT_DESIGN_TIME = (float)Convert.ToDouble
                              (ConfigurationManager.AppSettings["DESIGN_TIME_SCREEN_HEIGHT"]);
Rectangle Resolution;
float WidthMultiplicationFactor;
float HeightMultiplicationFactor;

The design-time screen resolutions are kept in the App.config file.

<add key ="DESIGN_TIME_SCREEN_WIDTH" value="1920"/>
<add key ="DESIGN_TIME_SCREEN_HEIGHT" value="1080"/>

When an instance of the class is created, the current resolution is supplied to the constructor. After that, a call is made to the SetMultiplicationFactor() method of the class. This method obtains the scaling factor by dividing the current resolution with the design-time resolution.

public Responsive(Rectangle ResolutionParam)
{
    Resolution = ResolutionParam;
}

public void SetMultiplicationFactor()
{
    WidthMultiplicationFactor = Resolution.Width / WIDTH_AT_DESIGN_TIME;
    HeightMultiplicationFactor = Resolution.Height / HEIGHT_AT_DESIGN_TIME;
}

For example, the application was designed in 1920×1080 resolution. If this application is run on a machine with resolution of 1024×768, then the WidthMultiplicationFactor, and HeightMultiplicationFactor change as follows:

WidthMultiplicationFactor = 1024/1920 = 0.533
HeightMultiplicationFactor = 768/1080 = 0.711

Finally, there are two overloaded methods which are the ultimate ones that provide responsive solution (optimal size, location and font-size) for the controls of the calling form.

public int GetMetrics(int ComponentValue)
{
    return (int)(Math.Floor(ComponentValue * WidthMultiplicationFactor));
}

public int GetMetrics(int ComponentValue, string Direction)
{
    if (Direction.Equals("Width") || Direction.Equals("Left"))
        return (int)(Math.Floor(ComponentValue * WidthMultiplicationFactor));
    else if (Direction.Equals("Height") || Direction.Equals("Top"))
        return (int)(Math.Floor(ComponentValue * HeightMultiplicationFactor));
    return 1;
}

For example, if there is a control with width = 465, height = 72, Left = 366, Top = 41, and font-size = 40, the method returns the suggested size, position, and font-size for this control as:

Width = 465 * 0.533 = 248
Height = 72 * 0.711= 51
Left = 366 * 0.533= 195
Top = 41 * 0.711= 29
Font-size = 40 * 0.533 = 21

In essence, the methods return the scaled solution for a control with optimum values for size, position and font-size.

Using the Responsive Class in a Form that Requires Responsiveness

What is needed is to simply create an object of this class in any form where responsiveness is intended. The current resolution is provided in the constructor. After that, the required multiplication factors are set up.

Responsive ResponsiveObj;
ResponsiveObj = new Responsive(Screen.PrimaryScreen.Bounds);
            ResponsiveObj.SetMultiplicationFactor();

After that, all the controls of the form are passed one by one for resizing/repositioning in the form’s load event. The call is done in the following code. Basically, what it is doing is first position the form to the centre of the screen. Please see there is a calibration constant (30) that is added for optimum vertical position (this would vary from developer to developer — it is a choice). After that, each and every control of the form is repositioned, resized, and re-calibrated for font-sizes.

private void ResponsiveForm_Load(object sender, EventArgs e)
{
    Width = ResponsiveObj.GetMetrics(Width, "Width");           
    Height = ResponsiveObj.GetMetrics(Height, "Height");
    Left = Screen.GetBounds(this).Width / 2 - Width / 2;        
    Top = Screen.GetBounds(this).Height / 2 - Height / 2 - 30;  

    foreach (Control Ctl in this.Controls)
    {
        Ctl.Font = new Font(FontFamily.GenericSansSerif, 
                   ResponsiveObj.GetMetrics((int)Ctl.Font.Size), FontStyle.Regular);
        Ctl.Width = ResponsiveObj.GetMetrics(Ctl.Width, "Width");
        Ctl.Height = ResponsiveObj.GetMetrics(Ctl.Height, "Height");
        Ctl.Top = ResponsiveObj.GetMetrics(Ctl.Top, "Top");
        Ctl.Left = ResponsiveObj.GetMetrics(Ctl.Left, "Left");
    }
}

Example

For demonstration purposes, following is a very simple form that contains a data grid, a label, a text box and a button. The snaps below are taken at three different resolutions. The following snap is taken at 1920×1080 resolution:

The following is a snap taken at 1360×768:

The following snap is taken at 1024×768:

In effect, the form would look the same at different resolutions by contracting/expanding and re-positioning controls to an optimum level.

Modification of Code

Some claibration factors might be required to adjust a little of what we obtain from the technique (like we did for vertical-centre positioning).

Also, it is suggested that the developer should see the outlook of the form at different resolutions to confirm that all the controls are visible and positioned correctly on the screen as intended. If not, some calibration or a little design-time change should be fine.

Also, this is a generic approach for a simple form which assumes that all the controls of the form have these properties — width, height, left, top and font-size. However that is not the case for real scenario. A practical form would contain other controls which might not have all these properties. E.g., a picturebox doesn’t have the font-size property. Hence running the code as is would cause in runtime exceptions if such cases are not handled explicitly. This article is meant to introduce a technique, not to be the ultimate tool for everything; developer needs to calibrate according to the need. A suggested approach is as follows:

private void ResponsiveForm_Load(object sender, EventArgs e)
{
    Width = ResponsiveObj.GetMetrics(Width, "Width");           
    Height = ResponsiveObj.GetMetrics(Height, "Height");
    Left = Screen.GetBounds(this).Width / 2 - Width / 2;        
    Top = Screen.GetBounds(this).Height / 2 - Height / 2 - 30;  

    foreach (Control Ctl in this.Controls)
    {
        if (Ctl is PictureBox)
        {
            Ctl.Width = ResponsiveObj.GetMetrics(Ctl.Width, "Width");
            Ctl.Height = ResponsiveObj.GetMetrics(Ctl.Height, "Height");
            Ctl.Top = ResponsiveObj.GetMetrics(Ctl.Top, "Top");
            Ctl.Left = ResponsiveObj.GetMetrics(Ctl.Left, "Left");
        }
        else
        {
            Ctl.Font = new Font(FontFamily.GenericSansSerif, 
                                ResponsiveObj.GetMetrics((int)Ctl.Font.Size), FontStyle.Regular);
            Ctl.Width = ResponsiveObj.GetMetrics(Ctl.Width, "Width");
            Ctl.Height = ResponsiveObj.GetMetrics(Ctl.Height, "Height");
            Ctl.Top = ResponsiveObj.GetMetrics(Ctl.Top, "Top");
            Ctl.Left = ResponsiveObj.GetMetrics(Ctl.Left, "Left");
        }
    }
}

Similar code changes might apply according to need and the nature of controls. Also, there might be need to introduce more overloaded methods for different control types.

Points of Interest

As mentioned earlier, there are other approaches like resorting to WPF, using anchoring/docking, etc. This is one more clever alternative. Loading delay might be experienced if the form has thousands of controls on it. However, with today’s faster processors that would still be aired in the blink of an eye. Also to remember, this is one time operation only — at the loading of the form. Hence major performance degradation is not expected.

Conclusion

This is a developer-oriented approach for creating responsive WinForms application that automatically resizes, repositions, and re-calibrate font-sizes according to the runtime resolution of the machine. Just add the class to your project, set the design-time resolution at the App.config file, and add the code for responsiveness in the form’s loading event. That would be all — the responsive class will take care of responsiveness.

History

• 18^th October, 2016: First release

• Download project — 98.1 KB
• Download executable — 23.8 KB

Introduction

It is not so straightforward to create a responsive WinForms application. By responsiveness, we do hereby mean usability in different screen resolutions. For WinForms, we need to explicitly take care of resizing and repositioning controls based on resolution. While there are suggestions on using WPF, or using docking and anchoring of controls, using panels, etc., this article provides a different way for applying responsiveness to a WinForm application.

Background

I designed a game which is available here. I designed it in a machine that had resolution of 1920×1080. But when I tried to play it in a laptop, I found that the board fell outside the screen. I felt the need to make it responsive to reach out to people who might have different resolutions. Hence, I made changes in the code to make it responsive. So, I thought it might benefit others just to have an alternate way of applying responsiveness to WinForm applications.

The technique is simple. It has two hard-coded constants that preserve the design-time screen resolution. Now whenever the application is run, it obtains a multiplication factor which is actually a scaling factor. It obtains this factor by dividing the current resolution by the design-time resolution. Then all the controls of the form are passed to this class object for scaling and resizing.

Using the Code

The Responsive Class — Responsive.cs

There is a class Responsive.cs which has 5 member variables as below. The purposes of the members are self-explanatory by the names.

float WIDTH_AT_DESIGN_TIME = (float)Convert.ToDouble
                             (ConfigurationManager.AppSettings["DESIGN_TIME_SCREEN_WIDTH"]);
float HEIGHT_AT_DESIGN_TIME = (float)Convert.ToDouble
                              (ConfigurationManager.AppSettings["DESIGN_TIME_SCREEN_HEIGHT"]);
Rectangle Resolution;
float WidthMultiplicationFactor;
float HeightMultiplicationFactor;

The design-time screen resolutions are kept in the App.config file.

<add key ="DESIGN_TIME_SCREEN_WIDTH" value="1920"/>
<add key ="DESIGN_TIME_SCREEN_HEIGHT" value="1080"/>

When an instance of the class is created, the current resolution is supplied to the constructor. After that, a call is made to the SetMultiplicationFactor() method of the class. This method obtains the scaling factor by dividing the current resolution with the design-time resolution.

public Responsive(Rectangle ResolutionParam)
{
    Resolution = ResolutionParam;
}

public void SetMultiplicationFactor()
{
    WidthMultiplicationFactor = Resolution.Width / WIDTH_AT_DESIGN_TIME;
    HeightMultiplicationFactor = Resolution.Height / HEIGHT_AT_DESIGN_TIME;
}

For example, the application was designed in 1920×1080 resolution. If this application is run on a machine with resolution of 1024×768, then the WidthMultiplicationFactor, and HeightMultiplicationFactor change as follows:

WidthMultiplicationFactor = 1024/1920 = 0.533
HeightMultiplicationFactor = 768/1080 = 0.711

Finally, there are two overloaded methods which are the ultimate ones that provide responsive solution (optimal size, location and font-size) for the controls of the calling form.

public int GetMetrics(int ComponentValue)
{
    return (int)(Math.Floor(ComponentValue * WidthMultiplicationFactor));
}

public int GetMetrics(int ComponentValue, string Direction)
{
    if (Direction.Equals("Width") || Direction.Equals("Left"))
        return (int)(Math.Floor(ComponentValue * WidthMultiplicationFactor));
    else if (Direction.Equals("Height") || Direction.Equals("Top"))
        return (int)(Math.Floor(ComponentValue * HeightMultiplicationFactor));
    return 1;
}

For example, if there is a control with width = 465, height = 72, Left = 366, Top = 41, and font-size = 40, the method returns the suggested size, position, and font-size for this control as:

Width = 465 * 0.533 = 248
Height = 72 * 0.711= 51
Left = 366 * 0.533= 195
Top = 41 * 0.711= 29
Font-size = 40 * 0.533 = 21

In essence, the methods return the scaled solution for a control with optimum values for size, position and font-size.

Using the Responsive Class in a Form that Requires Responsiveness

What is needed is to simply create an object of this class in any form where responsiveness is intended. The current resolution is provided in the constructor. After that, the required multiplication factors are set up.

Responsive ResponsiveObj;
ResponsiveObj = new Responsive(Screen.PrimaryScreen.Bounds);
            ResponsiveObj.SetMultiplicationFactor();

After that, all the controls of the form are passed one by one for resizing/repositioning in the form’s load event. The call is done in the following code. Basically, what it is doing is first position the form to the centre of the screen. Please see there is a calibration constant (30) that is added for optimum vertical position (this would vary from developer to developer — it is a choice). After that, each and every control of the form is repositioned, resized, and re-calibrated for font-sizes.

private void ResponsiveForm_Load(object sender, EventArgs e)
{
    Width = ResponsiveObj.GetMetrics(Width, "Width");           
    Height = ResponsiveObj.GetMetrics(Height, "Height");
    Left = Screen.GetBounds(this).Width / 2 - Width / 2;        
    Top = Screen.GetBounds(this).Height / 2 - Height / 2 - 30;  

    foreach (Control Ctl in this.Controls)
    {
        Ctl.Font = new Font(FontFamily.GenericSansSerif, 
                   ResponsiveObj.GetMetrics((int)Ctl.Font.Size), FontStyle.Regular);
        Ctl.Width = ResponsiveObj.GetMetrics(Ctl.Width, "Width");
        Ctl.Height = ResponsiveObj.GetMetrics(Ctl.Height, "Height");
        Ctl.Top = ResponsiveObj.GetMetrics(Ctl.Top, "Top");
        Ctl.Left = ResponsiveObj.GetMetrics(Ctl.Left, "Left");
    }
}

Example

For demonstration purposes, following is a very simple form that contains a data grid, a label, a text box and a button. The snaps below are taken at three different resolutions. The following snap is taken at 1920×1080 resolution:

The following is a snap taken at 1360×768:

The following snap is taken at 1024×768:

In effect, the form would look the same at different resolutions by contracting/expanding and re-positioning controls to an optimum level.

Modification of Code

Some claibration factors might be required to adjust a little of what we obtain from the technique (like we did for vertical-centre positioning).

Also, it is suggested that the developer should see the outlook of the form at different resolutions to confirm that all the controls are visible and positioned correctly on the screen as intended. If not, some calibration or a little design-time change should be fine.

Also, this is a generic approach for a simple form which assumes that all the controls of the form have these properties — width, height, left, top and font-size. However that is not the case for real scenario. A practical form would contain other controls which might not have all these properties. E.g., a picturebox doesn’t have the font-size property. Hence running the code as is would cause in runtime exceptions if such cases are not handled explicitly. This article is meant to introduce a technique, not to be the ultimate tool for everything; developer needs to calibrate according to the need. A suggested approach is as follows:

private void ResponsiveForm_Load(object sender, EventArgs e)
{
    Width = ResponsiveObj.GetMetrics(Width, "Width");           
    Height = ResponsiveObj.GetMetrics(Height, "Height");
    Left = Screen.GetBounds(this).Width / 2 - Width / 2;        
    Top = Screen.GetBounds(this).Height / 2 - Height / 2 - 30;  

    foreach (Control Ctl in this.Controls)
    {
        if (Ctl is PictureBox)
        {
            Ctl.Width = ResponsiveObj.GetMetrics(Ctl.Width, "Width");
            Ctl.Height = ResponsiveObj.GetMetrics(Ctl.Height, "Height");
            Ctl.Top = ResponsiveObj.GetMetrics(Ctl.Top, "Top");
            Ctl.Left = ResponsiveObj.GetMetrics(Ctl.Left, "Left");
        }
        else
        {
            Ctl.Font = new Font(FontFamily.GenericSansSerif, 
                                ResponsiveObj.GetMetrics((int)Ctl.Font.Size), FontStyle.Regular);
            Ctl.Width = ResponsiveObj.GetMetrics(Ctl.Width, "Width");
            Ctl.Height = ResponsiveObj.GetMetrics(Ctl.Height, "Height");
            Ctl.Top = ResponsiveObj.GetMetrics(Ctl.Top, "Top");
            Ctl.Left = ResponsiveObj.GetMetrics(Ctl.Left, "Left");
        }
    }
}

Similar code changes might apply according to need and the nature of controls. Also, there might be need to introduce more overloaded methods for different control types.

Points of Interest

As mentioned earlier, there are other approaches like resorting to WPF, using anchoring/docking, etc. This is one more clever alternative. Loading delay might be experienced if the form has thousands of controls on it. However, with today’s faster processors that would still be aired in the blink of an eye. Also to remember, this is one time operation only — at the loading of the form. Hence major performance degradation is not expected.

Conclusion

This is a developer-oriented approach for creating responsive WinForms application that automatically resizes, repositions, and re-calibrate font-sizes according to the runtime resolution of the machine. Just add the class to your project, set the design-time resolution at the App.config file, and add the code for responsiveness in the form’s loading event. That would be all — the responsive class will take care of responsiveness.

History

• 18^th October, 2016: First release

• Download sample, updated with auto resize panel — 53.7 KB

Introduction

Over the years, I have seen many developers designing Windows Forms by just dragging and dropping controls, and then repositioning them to match their requirements. When they need to change anything in the design, or when they add a new control, it becomes a little bit messy.

Here is a small demonstration of the technique I use to design Windows Forms, by using a control called TableLayoutPanel. I know that there are so many other techniques, others might use docking properties and anchors for example, but I also intended for this tip to be a discussion forum, where I can also learn about other techniques.

Background

TableLayoutPanel is a control that «Represents a panel that dynamically lays out its contents in a grid composed of rows and columns» (From MSDN: TableLayoutPanel Class).

Basic Requirement

In this sample, we are required to build a simple manual entry form like the below, with some conditions:

Whatever the size of the form (down to a certain extent), even when the form is maximized, the following should always remain true:

• The size of the text boxes must remain equal for all text boxes, and they must fill the largest space available
• The labels must all be left aligned
• The Grid View must fill all of the remaining space
• A small refresh button must exist below the Grid, it must always be aligned to the right of the form.

Implementation

First let us create a new Windows Forms Applications Project. Expand the main form, and add a new TableLayoutPanel control by dragging it from the Toolbox menu under the «Containers» section.

Expand the new control till it fills the form, and Modify the Anchor property to attach to the 4 sides: «Top, Right, Bottom, Left». name the control «tblPnlMain«.

Add a new Row to the table panel by clicking the small arrow at the right side of the panel, and then choosing «Add Row».

Now remove the last column by clicking the button «Remove Last Column». After that, in the first row, add another TableLayoutPanel and name it «tblPnlDataEntry«. In this panel, we will be placing our labels, text boxes, save and cancel buttons.

Add two additional columns and two additional rows to this new panel.

Set the Anchor of this panel to take all of the four sides, then expand the panel to fill all of its parent container. Please note that in one cell of the table panel, we can only put one control. That’s why we are putting a table panel to be able to add controls as much as we want.

Add 6 labels to the first and third column of the data entry manual form. Set the Anchor of all of them to be just «Left». Set their text properties as: «First Name, Last Name«, «Mobile Phone«, «Home Phone«, «Billing Addresses» and «Country«. Don’t worry about the design now, we will fix that shortly.

Now, in the 2^nd and 4^th column of the data entry panel, add 6 text boxes. Set the Anchor to all of them to be «Left and Right». This will allow the text boxes to fill the whole width of their parent containers. You will end up with an ugly form like the below:

Now, click on the small arrow on the right side of the Data Entry table panel, and choose «Edit Rows and Columns». For Column 1 and Column 3, set the size type to «Autosize«, this will force the columns to take the width of the largest child control. For Column 2 and Column 4, set the size type to «Percent«, and set the value to 50% for each column. This will tell the columns to take 50 % of the remaining space each.

This will fix our form:

Now, in the 4^th row, last column, add another table panel, name it «tblPnlButtons«. For this panel, remove the last row, so that it has only two columns. In the first column, add a button and caption it as «Save». In the second column, add another button and caption it as «Cancel». Set the Anchor property for this panel to Right only. Also set the Anchor for both Buttons to «Right». The form will now look like this:

Now back to the Data Entry Table Panel, Click Edit Rows and Columns, choose the «Rows» item in the drop down list, set the first 3 rows to «AutoSize«, and set the 4^th row to «Percent«, giving it 100%, this means that the last row will take all of the remaining space.

Now the form should look like this (if the buttons are still small and not appearing in full, try to expand your form a little bit).

Still something is not right, the Save and Cancel Button are too far from each other. Open the «Table Layout Panel Tasks» for the Buttons table panel, and set the size type of the first column to «Percent«, and the value to 100%, for the second column, set the size type to «AutoSize«.

Now the form will look like this:

Add a Grid View to the second row of the main table panel, and add a button to the last row. Set the Anchor of the grid view to all four sides (Top, Right, Bottom, Left), and set the Anchor of the button to Right. Caption the Button as «Refresh».

Open the Table Layout Panel Tasks for the Main table panel, and set the size type of the first row and last row to «AutoSize«, and the size type of the second row to»Percent«, and the value to 100%. Setting the Size percent of the second row to 100% will ensure that the Grid View will take all of the remaining space.

The completed form will look like this:

Now run the form, resize it, and then maximize it. You will see that the controls are always in order. Set the minimum size of the form to a value of your choice, to ensure that the controls have the minimum space they require to remain in order.

Now for example if you set the Form’s «Right to left» property to true, you will notice that all the controls will still be in place, in order, and with the same proportions. This is one example of the benefits of a TableLayoutPanel, it takes a little bit of effort at the beginning, but it will save you a lot of work later on.

Bonus Tip

This is an update to the original post. Suppose your manual entry form needs more data, you need to add a checkbox which will indicate if the person is married or not. If the person is married, 4 entry fields should appear in the control: Spouse name, spouse last name, spouse age and number of children. If the person is not married, these entry fields should disappear, and the controls should resize to fill the empty space. The final design should look like this:

If the user unchecks the checkbox, the form will change to this, notice how the «Save» and «Cancel» buttons will move up to below the «Is Married» checkbox, and the Grid View will expand to fill up the empty space.

To begin, go the data entry table panel and add three more rows:

Expand the table panel to have more space to add the new controls.

Move the buttons table panel to the last row, the form will now look like below:

Now add 5 labels, set their anchors to left only, and caption them as shown below:

Add a checkbox control to the cell adjacent to the «Is Married» label. Set its Anchor to «Left» and set its Text property to empty string. Now add four text boxes next to the four new labels. Set their Anchor property to «Right» and «Left». 

Now this is important: Set the buttons table panel Anchor to «Top» and «Right», and for the Data Entry Panel, there is a property named «AutoSize«. This will specify if the panel will automatically resize to fits its content, set this property to «True». 

Now still in the Data Entry Panel, Open the «Edit Rows and Columns» box from the «TableLayoutPanel Tasks», and set the Size type for the first 6 rows to «Auto Size», and set the Size type for the last row to «Percent», set its value to 100%.

The form will now look like this:

Expand it a little bit, so that the «Save» and «Cancel» buttons are completely visible:

Now double click on the checkbox next to the «Is Married» label and add the below code, this will hide or show all the new labels and text boxes based on whether this checkbox is checked or not. Set the Checked property of the checkbox to true so that it is checked by default when the form runs:

label8.Visible=label9.Visible=label10.Visible=label11.Visible=checkBox1.Checked;
          textBox7.Visible = textBox8.Visible = textBox9.Visible =
          textBox10.Visible = checkBox1.Checked;

Now run the form, When expanded, it will look like this:

When you uncheck the «Is Married» checkbox, the form will automatically reposition and resize its controls accordingly:

You can download the updated sample code from the top of the tip, thanks for following up :).