UWP XAML: Befülle den Bildschirm mit 2 Elementen, einer Viewbox

Question

Ich habe ein Raster mit zwei Elementen, einer skalierenden Viewbox und einem Textblock. Ich möchte, dass die Viewbox nur den Platz benötigt, den sie benötigt, aber auch nur den Platz, den sie bekommen kann.

Bilder erklären es viel besser, das gewünschte Bild zuerst:

Allerdings, wenn ich meine Anwendung der Größe breiter sein, beginnt die Viewbox Textblock darunter zu überholen:

Hier ist ein verdummt Version meiner 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> 

Sie mehr oder weniger die zweite Spalte ignorieren (mit Width = „0“), ist es für, wenn die applicat verwendet Ion wird zum Breitbild (oder Landscape). Es hat das gleiche Problem:

Kurz gesagt: ich die TextBlock- wollen gehorchen es MinHeight = „100“, während immer noch den Raum maximiert die Viewbox verwendet.

PS: Bitte beachten Sie, dass einige Einstellungen die Viewbox auf eine größere Größe skalieren lassen, als tatsächlich auf den Bildschirm passt, dies ist nicht wünschenswert!

Edit: Bemerkenswert ist, Setzen eines MinHeight = „100“ auf die zweite Reihe hat keine Wirkung ...

Answer 1

Da Sie ThemeResource in Ihrem Code verwenden, ich glaube, Sie, da es eine UWP App entwickeln ist keine ThemeResource in WPF. Wenn ja, bitte entfernen Sie WPF in Ihrem Titel und Tags, da es sich um zwei verschiedene Frameworks handelt. Gemischte Verwendung von UWP und WPF kann zu Verwirrung führen.

Für UWP-Anwendungen, in Grid, wird beim Einstellen der Zeilenhöhe auf Auto die Zeile an den Inhalt angepasst. Nachdem die automatischen Zeilen berechnet wurden, erhält die Zeile, deren Höhe auf * gesetzt ist, einen Teil der verbleibenden Höhe.

Nach Ihrer Beschreibung, Sie wollen die TextBlock gehorchen es ist MinHeight und die Viewbox bekommt einen Teil der verbleibenden Höhe. So können Sie die RowDefinitions wie folgt ändern:

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

Und damit die Viewbox die verbleibende Fläche füllen, wir VerticalAlignment und HorizontalAlignment zu Stretch einstellen. Außerdem müssen Sie möglicherweise die Eigenschaft Stretch auf setzen, damit der Inhalt in Viewbox die Größe ändert, um die Zieldimensionen zu füllen.

Der komplette XAML-Code kann folgende mag:

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