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>