c# - 如何在 WPF 中创建 TableLayoutPanel？

Question

我使用 WinForms，有一个创建 TableLayoutPanel 的选项。

例如:我需要将窗口分为顶部和底部两部分，我希望顶部占窗口的 70%，底部占窗口的 30%...

现在，我正在使用 WPF 并根据此

https://www.codeproject.com/Articles/30904/WPF-Layouts-A-Visual-Quick-Start

WPF 中有许多不同的布局，但我没有发现任何布局与 TableLayoutPanel 具有相同的双向布局 - 我可以设置我需要的行数以及每一行应该占用多少窗口。

怎么做？

Answer 1

要实现与 TableLayoutPanel 相同的行为，您可以使用 WPF 中的 Grid 控件，它允许您根据需要定义尽可能多的列和行，XAML 非常有效设计时与 WinForms 不同。

您可以通过布局部分下的网格属性窗口添加它们，特别是 ColumnDefinitions 和 RowDefinitions。

当您开始添加行时，您会看到元素的宽度或高度为 1 个星号单位(这是其默认值)，这是一个有助于在所有成员之间平均分配宽度和高度的特殊值控件的可用空间中的 RowDefinition 或 ColumnDefinition 集合。您可以通过增加预期行预计占用的星号值，使列或行占用更多可用空间。

举个例子，如果您有一个包含 3 列和 2 行的网格，所有这些都具有默认值，您将拥有以下 XAML:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
</Grid>

并且在设计器中，您将看到以下网格:

如您所见，所有可用空间在所有水平列和所有垂直行之间平均分配，如果您想让一列占用更多空间，您可以给它一个 2 星的值，它将占用 2 星应占用的空间。

在这种情况下，XAML 将如下所示:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="2*"/>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
</Grid>

你的设计师看起来像这样

宽度值有更多选项:

• Auto:此选项将自行调整大小以适合其子尺寸。
• 像素:此选项将使尺寸占用指定的像素(实际尺寸可能略有不同，但这超出了本答案的范围)

现在，当你想把元素放在网格中时，你可以在设计器中这样做，或者在 xaml 中，放置在第一行和第一列的元素将没有标签，但如果你想要将元素放在第二行的第二列中，您的 XAML 将如下所示；

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="2*"/>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <TextBlock Grid.Row="1" Grid.Column="1">

    </TextBlock>
</Grid>

值 Grid.Row 和 Grid.Column 指定要放置元素的列和行，并且是从零开始的索引。

我相信这几乎总结了您入门所需的所有知识，WPF 有一个学习曲线(有人说它是一堵墙)，一旦您学会了它，开发 UI 就变得微不足道了，这与 winforms 不同。