WPF UniformGrid 行和列同宽同高

Question

我需要有关 UniformGrid 或 Grid 的帮助，table，随便什么。

简单版： 我有一个只有 6 个矩形的主窗口，它们应该填满我的整个主窗口。当我调整 window 的大小时，这 6 个矩形需要能够像所有其他矩形一样调整大小并保持相同的宽度和高度。

我最终需要用实际内容替换我的矩形，例如 6 个正在播放的视频，或 6 个网络浏览器，或 6 张图像等，所有这些都具有相同的 width/height，因为 window 调整大小由用户。

这是矩形。

这是我目前的 XAML 代码。它不太有效，因为即使我调整主窗口的大小，矩形都保持为 "squares"，它们始终具有长度 = 宽度。但我需要矩形，有时长度可能大于宽度，因为他 window 由用户根据需要调整大小。

        <UniformGrid Rows="2" Columns="3">
            <Rectangle Stretch="UniformToFill" Fill="Black" />
            <Rectangle Stretch="UniformToFill" Fill="Blue" />
            <Rectangle Stretch="UniformToFill" Fill="Red" />
            <Rectangle Stretch="UniformToFill" Fill="Green" />
            <Rectangle Stretch="UniformToFill" Fill="Yellow" />
            <Rectangle Stretch="UniformToFill" Fill="Orange" />
        </UniformGrid>

复杂版本： 我最终需要允许用户显示 1、2、4 或 6 个显示器，因此他们需要用 width/height.

占用整个 window

这是显示 2 个显示的样子。（当用户调整 window 的大小时使长度 > 宽度）

Answer 1

如果您使用星号（默认值）定义列和行，则网格已经为您提供了调整大小的行为。例如 <RowDefinition Height="*"/> 你可以只写 <RowDefinition/>.

而不是写

所以，这应该有效：

<Grid>
  <Grid.RowDefinitions>
    <RowDefinition/>
    <RowDefinition/>
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition/>
    <ColumnDefinition/>
    <ColumnDefinition/>
  </Grid.ColumnDefinitions>
  <Rectangle Grid.Row="0" Fill="Black" />
  <Rectangle Grid.Column="1" Fill="Blue" />
  <Rectangle Grid.Column="2" Fill="Red" />
  <Rectangle Grid.Row="1" Fill="Green" />
  <Rectangle Grid.Row="1" Grid.Column="1" Fill="Yellow" />
  <Rectangle Grid.Row="1" Grid.Column="2" Fill="Orange" />
</Grid>

对于复杂的情况，您需要根据您放入 Grid 的元素和 Window 大小调整网格的 RowDefinitions 和 ColumnDefinitions，如果你想创建列或行。您可以在网格上设置代码隐藏中的所有内容。

在 Xaml 中为其命名并在代码隐藏中使用，例如 grid.RowDefinitions.Add(...);

通过grid.Children.Add(...);

在代码隐藏中添加或删除元素

通过静态方法在 Codebehind 中设置 Grid.Row 和 Grid.Column Grid.SetRow 和 Grid.SetColumn

WPF UniformGrid 行和列同宽同高

WPF UniformGrid rows and column same width height

c#

wpf

xaml

grid

uniformgrid