SizeToContent 不尊重 SharedSizeGroups

Question

使用窗口的SizeToContent="WidthAndHeight" 属性似乎破坏了网格的列和行定义的属性SharedSizeGroup。

<Window x:Class="SizeTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Title="MainWindow"
        SizeToContent="WidthAndHeight">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" SharedSizeGroup="MainColumnWidth" />
            <ColumnDefinition Width="*" SharedSizeGroup="MainColumnWidth" />
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition Height="*" SharedSizeGroup="MainRowHeight" />
            <RowDefinition Height="*" SharedSizeGroup="MainRowHeight" />
        </Grid.RowDefinitions>

        <Border BorderThickness="1" BorderBrush="Black" Grid.Column="0" Grid.Row="0" >
            <Button Width="100" Height="100" Margin="10" Content="A" />
        </Border>

        <Border BorderThickness="1" BorderBrush="Black" Grid.Column="1" Grid.Row="0" >
            <Button Width="100" Height="200" Margin="10" Content="B" />
        </Border>

        <Border BorderThickness="1" BorderBrush="Black" Grid.Column="0" Grid.Row="1" >
            <Button Width="200" Height="100" Margin="10" Content="C" />
        </Border>

        <Border BorderThickness="1" BorderBrush="Black" Grid.Column="1" Grid.Row="1" >
            <Button Width="100" Height="100" Margin="10" Content="D" />
        </Border>
    </Grid>
</Window>

例如，上面的代码产生以下内容：

但是，我希望它产生类似于

它根据组件的大小调整大小，但尊重共享组的大小。

调整大小会立即应用共享组大小，但您必须手动猜测正确大小在哪里。

有没有办法解决这个问题？

如果有什么不同，我使用的是 .NET 5。

---

编辑

将Grid.IsSharedSizeScope="True" 添加到窗口或网格最初似乎可以解决问题，但在调整窗口大小时，网格不再填满窗口。

我怀疑发生的事情是，如果没有IsSharedSizeScope，列/行的大小仅相同，因为列/行定义说宽度/高​​度是*，但是当IsSharedSizeScope 为真时，那么共享大小范围生效，但由于某种原因，当网格有增长空间时停止调整大小。

Answer 1

看来你需要使用 UniformGrid

    <UniformGrid Rows="2" Columns="2">
        <Border BorderThickness="1" BorderBrush="Black">
            <Button Width="100" Height="100" Margin="10" Content="A" />
        </Border>

        <Border BorderThickness="1" BorderBrush="Black">
            <Button Width="100" Height="200" Margin="10" Content="B" />
        </Border>

        <Border BorderThickness="1" BorderBrush="Black">
            <Button Width="200" Height="100" Margin="10" Content="C" />
        </Border>

        <Border BorderThickness="1" BorderBrush="Black">
            <Button Width="100" Height="100" Margin="10" Content="D" />
        </Border>
    </UniformGrid>

Answer 2

使用窗口的SizeToContent="WidthAndHeight" 属性似乎会破坏网格的列和行定义的属性SharedSizeGroup。

不，为了利用共享尺寸组，您必须设置共享尺寸组的应用范围。这就是您对IsSharedSizeScope 属性附加属性所做的事情，默认情况下为false，这意味着最初在任何元素上都没有定义范围，因此共享大小组将不适用。

<Grid IsSharedSizeScope="True">
   <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*" SharedSizeGroup="MainColumnWidth" />
      <ColumnDefinition Width="*" SharedSizeGroup="MainColumnWidth" />
   </Grid.ColumnDefinitions>

   <Grid.RowDefinitions>
      <RowDefinition Height="*" SharedSizeGroup="MainRowHeight" />
      <RowDefinition Height="*" SharedSizeGroup="MainRowHeight" />
   </Grid.RowDefinitions>
   <!-- ...other grid definitions. -->
</Grid>

例如，上面的代码会生成以下内容：[...] 调整大小会立即应用共享组大小，但随后您必须手动猜测正确的大小在哪里。

这与共享大小组无关，而是与Grid 本身有关。您可以删除所有共享大小定义，它会产生相同的结果。事实上，共享大小定义是多余的，因为给每个列和单元格一个* 大小，将按相同的比例缩放它们。请参阅documentation for reference。

星型大小用于按加权比例分配可用空间。

不幸的是，我不知道为什么初始尺寸完全适合Grid 内容，而不是尊重星号。但是，应用 MinWidth 和 MinHeight 可以解决问题（如果适用）。

<Grid IsSharedSizeScope="True">
   <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*" MinWidth="200" />
      <ColumnDefinition Width="*" MinWidth="200" />
   </Grid.ColumnDefinitions>
   <Grid.RowDefinitions>
      <RowDefinition Height="*" MinHeight="200" />
      <RowDefinition Height="*" MinHeight="200" />
   </Grid.RowDefinitions>
   <!-- ...other grid definitions. -->
</Grid>

这可能与 related question 中的星号大小相同或相似。

[...] 当 IsSharedSizeScope 为真时，共享大小范围生效，但由于某些原因，当网格有空间增长时停止调整大小。

这是意料之中的，因为setting a shared size group will treat sizes differently。

参与大小共享的列和行不遵守星号大小。在大小共享场景中，星号被视为Auto。

因此，如果您应用*，Grid 将被测量，并且即使在调整大小后大小仍将保持。

正如您提出的问题，您正在处理网格中的统一单元格。在这种情况下，您可以通过简单地使用专用于该场景的UniformGrid 控件来规避这些问题。

提供一种在网格中排列内容的方法，其中网格中的所有单元格都具有相同的大小。

<UniformGrid>
   <Border BorderBrush="Black" BorderThickness="1">
      <Button Width="100" Height="100" Margin="10" Content="A" />
   </Border>
   <Border BorderBrush="Black" BorderThickness="1">
      <Button Width="100" Height="200" Margin="10" Content="B" />
   </Border>
   <Border BorderBrush="Black" BorderThickness="1">
      <Button Width="200" Height="100" Margin="10" Content="C" />
   </Border>
   <Border BorderBrush="Black" BorderThickness="1">
      <Button Width="100" Height="100" Margin="10" Content="D" />
   </Border>
</UniformGrid>