Question

我有一个包含两个元素的网格，一个缩放视图框和一个Textblock。我希望Viewbox只占用它所需的空间，但也只占用它可以获得的空间。

图像解释得更好，首先是想要的图像：
here
但是，当我将应用程序的大小调整为更宽时，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中，在将行的高度设置为自动时，该行的大小将适合其内容。计算自动行后，高度设置为 * 的行将获得剩余高度的一部分。

根据您的说明，您希望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）填充屏幕

1 个答案: