UWP XAML：用 2 个元素填充屏幕，一个 Viewbox

Question

我有一个包含两个元素的网格，一个缩放视图框和一个文本块。我想让 Viewbox 只获取它需要的 space，但也只获取它可以获取的 space。

图片解释得更好，首先是想要的图片：

然而，当我将我的应用程序调整得更宽时，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>

您可以或多或少地忽略第二列（Width="0"），它用于当应用程序变为宽屏（或横向）时。它有同样的问题：

简而言之：我希望 TextBlock 遵守它的 MinHeight="100"，同时仍然最大化 Viewbox 使用的 space。

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>

UWP XAML：用 2 个元素填充屏幕，一个 Viewbox

UWP XAML: Filling the screen with 2 elements, one Viewbox

c#

xaml

uwp

uwp-xaml