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

Question

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

图片说明它要好得多，所需的图像第一：

然而，当我调整我的应用是广泛的，视框开始超越它下面的文本块：

这里有一个我的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”），它是用来当APPLICAT离子变成宽屏幕（或风景）。它具有相同的问题：

总之：我想将TextBlock服从它了minHeight =“100”，同时还可以提高视框中使用的空间。

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>