UWP XAML：2つの要素、1つのビューボックスで画面を塗りつぶし

Question

私はスケーリングViewboxとTextblockという2つの要素を持つグリッドを持っています。私は、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のはまだビューボックスが使用するスペースを最大化しながら、それは、=「100」minHeightのだ従いたいです。

PS：一部の設定では、実際に画面に収まるサイズよりも大きなサイズにViewboxが調整されますが、これは望ましくありません。

編集：驚くべき、2行目のminHeightの=「100」は効果がありません設定...

Answer 1

あなたのコード内ThemeResourceを使用しているので、私はあなたにそこUWPアプリを開発していると思いますWPFではThemeResourceではありません。もしそうなら、あなたのタイトルとタグのWPFを2つの異なるフレームワークとして削除してください。 UWPとWPFを混在させると、混乱の原因となることがあります。

GridのUWPアプリケーションの場合、行の高さをに設定すると、の行はその内容に合わせてサイズが変更されます。 Auto行が計算された後、高さが*に設定された行は残りの高さの一部になります。

あなたの説明によると、TextBlockはMinHeightに従い、残りの高さはViewboxになります。ですから、次のようRowDefinitionsを変更することができます。

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

そしてViewboxは残りの領域を埋めるようにするが、我々はStretchへVerticalAlignmentとHorizontalAlignmentを設定することができます。この他にも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>