如何使 space（宽度和高度）相等的内容在 XAML 中更改 window 大小时调整大小？

Question

我在 WPF 中有以下 XAML 代码。这将生成具有相同大小的列和行的网格（如图 1 所示。）

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

     <TextBlock Grid.Row="0" Grid.Column="0"  Text="A" Background="Green"/>
     <TextBlock Grid.Row="1" Grid.Column="1"  Text="AB" Background="Red"/>
     <TextBlock Grid.Row="2" Grid.Column="2"  Text="ABC" Background="Blue"/>
     <TextBlock Grid.Row="3" Grid.Column="3"  Text="ABCD" Background="Yellow"/>
</Grid>

图 1.

但是当我将此网格放入视图框中时（如下面的代码），行和列的大小不再相等（如图 2 所示）。

<Viewbox  Stretch="Uniform">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="1*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="1*"/>
        </Grid.ColumnDefinitions>

        <TextBlock Grid.Row="0" Grid.Column="0"  Text="A" Background="Green"/>
        <TextBlock Grid.Row="1" Grid.Column="1"  Text="AB" Background="Red"/>
        <TextBlock Grid.Row="2" Grid.Column="2"  Text="ABC" Background="Blue"/>
        <TextBlock Grid.Row="3" Grid.Column="3"  Text="ABCD" Background="Yellow"/>

    </Grid>
</Viewbox>

图 2.

如何在视图框内制作行数和列数相等的网格？

Answer 1

这就是 ViewBox

的行为

取自网络

The ViewBox is a very useful control in WPF. If does nothing more than scale to fit the content to the available size. It does not resize the content, but it transforms it.

当你不想要这个时为什么要使用视图框，试试另一个控件。

Answer 2

您可以像这样强制共享大小：

<Grid Grid.IsSharedSizeScope="True">
    <Grid.RowDefinitions>
        <RowDefinition SharedSizeGroup="A"/>
        <RowDefinition SharedSizeGroup="A"/>
        <RowDefinition SharedSizeGroup="A"/>
        <RowDefinition SharedSizeGroup="A"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition SharedSizeGroup="B"/>
        <ColumnDefinition SharedSizeGroup="B"/>
        <ColumnDefinition SharedSizeGroup="B"/>
        <ColumnDefinition SharedSizeGroup="B"/>
    </Grid.ColumnDefinitions>

Answer 3

尝试使用 UniformGrid 而不是使用 Grid：

<Viewbox  Stretch="Uniform">
    <UniformGrid Rows="4" Columns="4">
        <TextBlock Grid.Row="0" Grid.Column="0"  Text="A" Background="Green"/>
        <TextBlock />
        <TextBlock />
        <TextBlock />

        <TextBlock />
        <TextBlock Grid.Row="1" Grid.Column="1"  Text="AB" Background="Red"/>
        <TextBlock />
        <TextBlock />

        <TextBlock />
        <TextBlock />
        <TextBlock Grid.Row="2" Grid.Column="2"  Text="ABC" Background="Blue"/>
        <TextBlock />

        <TextBlock />
        <TextBlock />
        <TextBlock />
        <TextBlock Grid.Row="3" Grid.Column="3"  Text="ABCD" Background="Yellow"/>
        </UniformGrid>
</Viewbox>

只需确保设置行和列，而不是说 row/column 每个子元素是哪个，您只需按顺序输入它们。

如何使 space（宽度和高度）相等的内容在 XAML 中更改 window 大小时调整大小？

How to make contents having equal space (width & hight) to resize upon changing of window size in XAML?

wpf

grid

xaml

viewbox