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

Question

I have a grid with two elements, a scaling Viewbox and a Textblock. I want to have the Viewbox take only the space it needs, but also only the space it can get.

Images explain it much better, the desired image first:

However, when I resize my application to be wider, the Viewbox starts to overtake the Textblock below it:

Here's a dumbed down version of my 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>

You can more or less ignore the second column (with Width="0"), it's used for when the application becomes wide-screen (or landscape). It has the same issue:

In short: I want the TextBlock to obey it's MinHeight="100", while still maximizing the space the Viewbox uses.

PS: Please note that some settings make the Viewbox scale to a larger size than actually fits on the screen, this is not desireable!

Edit: Remarkably, setting a MinHeight="100" on the second row has no effect...

Answer 1

Since you are using ThemeResource in your code, I think you are developing an UWP app as there is no ThemeResource in WPF. If so, please remove WPF in your title and tags as they are two different frameworks. Mixed use of UWP and WPF may cause confusion.

For UWP apps, in Grid , while setting row's height to Auto , the row will size to fit its content. After the Auto rows are calculated, the row which height is set to * will get part of the remaining height.

According to your description, you want the TextBlock to obey it's MinHeight and the Viewbox gets part of the remaining height. So you can change the RowDefinitions like following:

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

And to make the Viewbox fill the remaining area, we can set VerticalAlignment and HorizontalAlignment to Stretch . Besides this, you may also need to set Stretch property to Fill to make the content in Viewbox resize to fill the destination dimensions.

The complete XAML code may like following:

<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>