UWP XAML：使用2个元素（一个Viewbox）填充屏幕

Question

我有一个包含两个元素的网格，一个缩放的Viewbox和一个Textblock。 我希望Viewbox仅占用其所需的空间，而且仅占用其可以获得的空间。

图片会更好地解释它，首先需要所需的图片：

但是，当我将应用程序调整为更宽时，Viewbox开始超过其下面的Textblock：

这是我的XAML的简化版本：

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" x:Name="MainGrid" Margin="0" UseLayoutRounding="False">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="0" />
    </Grid.ColumnDefinitions>

    <Viewbox Stretch="Uniform" VerticalAlignment="Top" HorizontalAlignment="Left" Grid.Row="0" x:Name="Zulrah">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>

            <Rectangle Grid.Column="0" Fill="Blue" Width="150" Height="250" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
            <Rectangle Grid.Column="1" Fill="Red" Width="150" Height="250" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
        </Grid>
    </Viewbox>
    <TextBlock Grid.Row="1" x:Name="TextOutput" MinHeight="100" MinWidth="100">
        Hello world!
        <LineBreak />
        Life's good
    </TextBlock>
</Grid>

您可以或多或少地忽略第二列（宽度=“ 0”），该列用于应用程序变为宽屏（或横向）时。 它具有相同的问题：

简而言之：我希望TextBlock服从它的MinHeight =“ 100”，同时仍然最大化Viewbox使用的空间。

PS：请注意，有些设置会使Viewbox缩放到比屏幕上实际显示的尺寸更大的尺寸，这是不希望的！

编辑：值得注意的是，在第二行上设置MinHeight =“ 100”无效...

Answer 1

由于您在代码中使用ThemeResource ，因此我认为您正在开发UWP应用，因为WPF中没有ThemeResource 。 如果是这样，请删除标题和标签中的WPF，因为它们是两个不同的框架。 UWP和WPF的混合使用可能会引起混淆。

对于UWP应用，在Grid ，将行的高度设置为Auto时 ，行的大小将适合其内容。 计算自动行后，将高度设置为*的行将获得剩余高度的一部分。

根据您的描述，您希望TextBlock服从它的MinHeight ，并且Viewbox会获得剩余高度的一部分。 因此，您可以像下面那样更改RowDefinitions ：

<Grid.RowDefinitions>
    <RowDefinition Height="*" />
    <RowDefinition Height="Auto" />
</Grid.RowDefinitions>

为了使Viewbox填充剩余的区域，我们可以将VerticalAlignment和HorizontalAlignment设置为Stretch 。 除此之外，您可能还需要将Stretch属性设置为Fill以使Viewbox的内容调整大小以填充目标尺寸。

完整的XAML代码可能如下所示：

<Grid x:Name="MainGrid"
      Margin="0"
      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
      UseLayoutRounding="False">
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="0" />
    </Grid.ColumnDefinitions>

    <Viewbox x:Name="Zulrah"
             Grid.Row="0"
             AllowDrop="True"
             Stretch="Fill">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>

            <Rectangle Grid.Column="0"
                       Width="150"
                       Height="250"
                       HorizontalAlignment="Stretch"
                       VerticalAlignment="Stretch"
                       Fill="Blue" />
            <Rectangle Grid.Column="1"
                       Width="150"
                       Height="250"
                       HorizontalAlignment="Stretch"
                       VerticalAlignment="Stretch"
                       Fill="Red" />
        </Grid>
    </Viewbox>
    <TextBlock x:Name="TextOutput"
               Grid.Row="1"
               MinWidth="100"
               MinHeight="100">
        Hello world!
        <LineBreak />
        Life's good
    </TextBlock>
</Grid>