如何在WPF中创建TableLayoutPanel？

Question

我使用过WinForms，并且有一个选项可以创建TableLayoutPanel。

例如：我需要将我的窗口分为上下两部分，希望上半部分占窗口的70％，下半部分占窗口的30％...

现在，我正在使用WPF，根据这个...

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

在WPF中，有很多不同的布局方式，但我没有找到任何一个与TableLayoutPanel具有相同行为的布局方式 - 即我可以设置需要多少行以及每行应占窗口的空间大小。如何实现呢？

- Sirop4ik

---

你可以使用一个简单的网格布局。https://www.c-sharpcorner.com/UploadFile/1e050f/grid-layout-in-wpf/ - Nawed Nabi Zada

WPF的Grid是WinForms中TableLayoutPanel的非常接近的等效物。如果你正在开始WPF开发，我强烈建议你学习基于不同面板（Grid、StackPanel、WrapPanel、DockPanel、UniformGrid）的UI布局方法。在WPF中，WinForms的固定位置和锚定是行不通的。此外，以下是一些有用的文章，可以帮助你入门：http://reedcopsey.com/series/windows-forms-to-mvvm/ - ASh

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星，并且它将占用应有两个星号的空间。

在这种情况下，XAML代码如下：

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

你的设计师会看起来像这样：

宽度值有更多选项：

• 自动：此选项将根据其子组件的尺寸自适应调整大小。
• 像素：此选项将以指定数量的像素占用空间（实际尺寸可能略有变化，但超出本答案范围）。

现在，当您要将元素放入网格中时，可以在设计师中或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。

- Oscar Guillamon