• 下载示例，更新了自动调整大小面板 - 53.7 KB

引言

多年来，我看到许多开发人员通过简单地拖放控件来设计 Windows Forms，然后重新定位它们以满足他们的需求。当他们需要更改设计中的任何内容，或者添加新控件时，这会变得有点混乱。

这里我将演示一种设计 Windows Forms 的技术，即使用一个名为 TableLayoutPanel 的控件。我知道还有很多其他技术，其他人可能会使用停靠属性和锚点，例如，但我还希望这个技巧成为一个讨论论坛，我也可以从中学习其他技术。

背景

TableLayoutPanel 是一个控件，它“表示一个面板，该面板在由行和列组成的网格中动态布局其内容”（来自 MSDN：TableLayoutPanel 类）。

基本要求

在这个示例中，我们需要构建一个简单的手动输入表单，如下所示，并满足一些条件：

无论表单的大小如何（在一定程度上），即使表单被最大化，以下条件也应始终成立：

• 所有文本框的大小必须相等，并且它们必须填充可用的最大空间。
• 所有标签必须左对齐。
• 网格视图必须填充所有剩余空间。
• 网格下方必须有一个小的刷新按钮，它必须始终右对齐到表单的右侧。

实现

首先，让我们创建一个新的 Windows Forms 应用程序项目。展开主窗体，然后从“容器”部分下的“工具箱”菜单中拖动一个新的 TableLayoutPanel 控件。

将新控件展开以填充表单，并修改 Anchor 属性以将其固定到四个边：“上、右、下、左”。将控件命名为“tblPnlMain”。

通过单击面板右侧的小箭头，然后选择“添加行”来为表面板添加新行。

现在，通过单击“删除最后一列”按钮来删除最后一列。之后，在第一行中，添加另一个 TableLayoutPanel 并将其命名为“tblPnlDataEntry”。在此面板中，我们将放置标签、文本框、保存和取消按钮。

在此新面板中添加两个额外的列和两个额外的行。

将此面板的 Anchor 设置为占用所有四个边，然后将面板展开以填充其父容器。请注意，在表面板的一个单元格中，我们只能放置一个控件。这就是为什么我们放置一个表面板，以便能够添加任意数量的控件。

在数据输入手动表单的第一列和第三列中添加 6 个标签。将所有标签的 Anchor 设置为仅“左”。将其文本属性设置为：“First Name, Last Name”、“Mobile Phone”、“Home Phone”、“Billing Addresses”和“Country”。现在不要担心设计，我们很快就会修复它。

现在，在数据输入面板的第 2 列和第 4 列中，添加 6 个文本框。将所有文本框的 Anchor 设置为“左和右”。这将允许文本框填充其父容器的整个宽度。您最终会得到一个像下面一样丑陋的表单。

现在，单击数据输入表面板右侧的小箭头，然后选择“编辑行和列”。对于第 1 列和第 3 列，将大小类型设置为“Autosize”，这将迫使列采用最大子控件的宽度。对于第 2 列和第 4 列，将大小类型设置为“Percent”，并将每个列的值设置为 50%。这将告诉列各自占用剩余空间的 50%。

这将修复我们的表单。

现在，在第 4 行的最后一列中，添加另一个表面板，并将其命名为“tblPnlButtons”。对于此面板，删除最后一行的内容，使其只有两列。在第一列中，添加一个按钮并将其标题设置为“保存”。在第二列中，添加另一个按钮并将其标题设置为“取消”。将此面板的 Anchor 属性设置为仅“右”。还将两个按钮的 Anchor 设置为“右”。表单现在看起来像这样。

现在回到数据输入表面板，单击“编辑行和列”，然后在下拉列表中选择“行”项，将前 3 行设置为“AutoSize”，并将第 4 行设置为“Percent”，给予它 100%，这意味着最后一行将占用所有剩余的空间。

现在表单应该看起来像这样（如果按钮仍然很小并且没有完全显示，请尝试稍微扩展您的表单）。

仍然有些不对劲，保存和取消按钮离得太远了。打开按钮表面板的“Table Layout Panel Tasks”，并将第一列的大小类型设置为“Percent”，值为 100%；对于第二列，将大小类型设置为“AutoSize”。

现在表单看起来像这样。

在主表面板的第二行添加一个网格视图，并在最后一行添加一个按钮。将网格视图的 Anchor 设置为所有四个边（上、右、下、左），并将按钮的 Anchor 设置为“右”。将按钮的标题设置为“刷新”。

打开主表面板的“Table Layout Panel Tasks”，将第一行和最后一行的 Size Type 设置为“AutoSize”，将第二行的 Size Type 设置为“Percent”，值为 100%。将第二行的大小百分比设置为 100% 将确保网格视图占据所有剩余空间。

完成的表单将看起来像这样。

现在运行表单，调整它的大小，然后最大化它。您会看到控件始终保持有序。将表单的最小大小设置为您选择的值，以确保控件具有保持有序所需的最小空间。

现在，例如，如果您将表单的“从右到左”属性设置为 true，您会注意到所有控件仍然保持在原位，有序，并且比例相同。这是 TableLayoutPanel 的一个好处，它在开始时需要一点努力，但以后会为您节省大量工作。

附加提示

这是对原始帖子的更新。假设您的手动输入表单需要更多数据，您需要添加一个复选框，用于指示该人是否已婚。如果已婚，则控件中应出现 4 个输入字段：配偶姓名、配偶姓氏、配偶年龄和子女数量。如果未婚，这些输入字段应消失，并且控件应调整大小以填充空白。最终设计应如下所示。

如果用户取消选中复选框，表单将更改为如下所示，请注意“保存”和“取消”按钮将向上移动到“是否已婚”复选框下方，“网格视图”将扩展以填充空白空间。

首先，转到数据输入表面板并添加另外三行。

展开表面板以获得更多空间来添加新控件。

将按钮表面板移到最后一行的内容，表单现在将如下所示。

现在添加 5 个标签，将它们的锚点设置为仅左对齐，并按照下图所示设置它们的标题。

在“是否已婚”标签旁边的单元格中添加一个复选框控件。将其 Anchor 设置为“左”，并将其 Text 属性设置为空字符串。现在，在四个新标签旁边添加四个文本框。将其 Anchor 属性设置为“右”和“左”。

现在这很重要：将按钮表面板的 Anchor 设置为“上”和“右”，对于数据输入面板，有一个名为“AutoSize”的属性。这将指定面板是否会根据其内容自动调整大小，将其设置为“True”。

现在仍在数据输入面板中，从“TableLayoutPanel Tasks”打开“Edit Rows and Columns”框，将前 6 行的 Size Type 设置为“Auto Size”，并将最后一行的 Size Type 设置为“Percent”，值为 100%。

表单现在将看起来像这样。

稍微展开它，以便“保存”和“取消”按钮完全可见。

现在双击“是否已婚”标签旁边的复选框，并添加以下代码，它将根据该复选框是否被选中来隐藏或显示所有新标签和文本框。将复选框的 Checked 属性设置为 true，以便在表单运行时默认选中它。

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

现在运行表单，展开后，它将看起来像这样。

当您取消选中“是否已婚”复选框时，表单将自动重新定位并相应地调整控件的大小。

您可以从提示的顶部下载更新的示例代码，感谢您的关注 :)。