Wie stapelt man einen Stapel Textblöcke mit Stackpanels und Grid?

Question

Ich habe eine grundlegende Benutzeroberfläche, wo es 6 Textblöcke, 3 für die Werte und 3 für die zugehörigen Header. Was ich ursprünglich dargelegt hatte, war das Positionieren der Textblöcke unter Verwendung der Gitter- und Spaltenpositionen. Dies sah gut aus, außer für den Wert Textblöcke wurden zu nah an ihren Header-Teckblocks positioniert.

Also, um eine alternative Lösung zu versuchen, habe ich in meinem unteren Code jeden Satz von Textblöcken in einem Stackpanel verpackt und einen Rand für den Header-Textblock geliefert. Beim Testen erscheinen jedoch alle sechs Steuerelemente zusammengebündelt in der oberen rechten Ecke des Bildschirms.

Frage: Wer weiß, wie eine Reihe von Textblöcken zu positionieren, gestapelt und mit einem Zwischenraum zwischen dem ersten und zweiten Block in jedem Satz?

Während des Debugging habe ich versucht, mit der Randgröße auf jedem Stackpanel herumzuspielen, was nichts zum Reparieren des Layouts getan hat.

XAML-Markup der Benutzeroberfläche:

<Grid x:Name="LayoutRoot" Background="#FF236A93"> 

    <Grid.ChildrenTransitions> 
     <TransitionCollection> 
      <EntranceThemeTransition /> 
     </TransitionCollection> 
    </Grid.ChildrenTransitions> 

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



    <!-- ContentPanel contains details text. Place additional content here --> 
    <Grid x:Name="ContentPanel" 
      Grid.Row="1" 
      Height="600" 
      Margin="5,0,5,0" 
      Visibility="Visible"> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="1.6*" /> 
      <RowDefinition Height="1.6*" /> 
      <RowDefinition Height="1.6*" /> 
      <RowDefinition Height="2*" /> 
      <RowDefinition Height="2*" /> 
      <RowDefinition Height="1.3*" /> 
     </Grid.RowDefinitions> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width=".5*" /> 
      <ColumnDefinition Width="5*" /> 
      <ColumnDefinition Width="1*" /> 
     </Grid.ColumnDefinitions> 


     <StackPanel Orientation="Horizontal"> 
      <TextBlock Grid.Row="0" 
        Grid.Column="1" 
        Margin="0,0,5,0" 
        Width="270" 
        Height="72" 
        HorizontalAlignment="Right" 
        VerticalAlignment="Top" 
        FontSize="24" 
        Foreground="Gray" 
        Text="Hourly Tariff:" /> 


      <TextBlock Grid.Row="0" 
        Grid.Column="1" 
        Width="270" 
        Height="72" 
        HorizontalAlignment="Right" 
        VerticalAlignment="Bottom" 
        FontSize="24" 
        Foreground="White" 
        Text="{Binding SelectedZone.TariffPH}" /> 
     </StackPanel> 


     <StackPanel Orientation="Horizontal"> 
      <TextBlock Grid.Row="1" 
        Grid.Column="1" 
        Width="270" 
        Height="72" 
        Margin="0,0,5,0" 
        HorizontalAlignment="Right" 
        VerticalAlignment="Top" 
        FontSize="24" 
        Foreground="Gray" 
        Text="Hours Open:" /> 

      <TextBlock Grid.Row="1" 
        Grid.Column="1" 
        Width="270" 
        Height="72" 
        HorizontalAlignment="Right" 
        VerticalAlignment="Bottom" 
        FontSize="24" 
        Foreground="White" 
        Text="{Binding SelectedZone.HoursOpen}" /> 
     </StackPanel> 



     <StackPanel Orientation="Horizontal"> 
      <TextBlock Grid.Row="2" 
        Grid.Column="1" 
        Width="270" 
        Height="72" 
        Margin="0,0,5,0" 
        HorizontalAlignment="Right" 
        VerticalAlignment="Top" 
        FontSize="24" 
        Foreground="Gray" 
        Text="Days Open:" /> 

      <TextBlock Grid.Row="2" 
        Grid.Column="1" 
        Width="270" 
        Height="72" 
        HorizontalAlignment="Right" 
        VerticalAlignment="Bottom" 
        FontSize="24" 
        Foreground="White" 
        Text="{Binding SelectedZone.DaysOpen}" /> 
     </StackPanel> 



     <StackPanel Orientation="Horizontal"> 
      <TextBlock Grid.Row="3" 
        Grid.Column="1" 
        Width="270" 
        Height="72" 
        Margin="0,0,5,0" 
        HorizontalAlignment="Right" 
        VerticalAlignment="Top" 
        FontSize="24" 
        Foreground="Gray" 
        Text="Parking Restrictions:" /> 


      <TextBlock Grid.Row="3" 
        Grid.Column="1" 
        Width="270" 
        Height="72" 
        HorizontalAlignment="Right" 
        VerticalAlignment="Bottom" 
        FontSize="24" 
        Foreground="White" 
        Text="{Binding SelectedZone.Restrictions}" /> 
     </StackPanel> 








    </Grid> 
</Grid> 

Vorgeschlagen Layout UI:

Answer 1

Wenn es nach mir ginge, würde ich einfach alles drehen das Geräusch in etwas mehr so ​​für leichtere Wartung/readabili ty und weniger Objekte im DOM;

<!-- ContentPanel contains details text. Place additional content here --> 
    <StackPanel x:Name="ContentPanel" 
      Grid.Row="1" Margin="5,0"> 
      <StackPanel.Resources> 
      <Style TargetType="TextBlock"> 
       <Setter Property="FontSize" Value="24"/> 
       <Setter Property="Width" Value="270"/> 
       <Setter Property="Foreground" Value="Gray"/> 
       <Setter Property="Margin" Value="0,5"/> 
      </Style> 
      </StackPanel.Resources> 

     <TextBlock> 
     <Run Text="Hourly Tariff:"/> 
     <LineBreak/> 
     <Run Text="{Binding SelectedZone.TariffPH}" Foreground="White"/> 
     </TextBlock> 

     <TextBlock> 
     <Run Text="Hours Open:"/> 
     <LineBreak/> 
     <Run Text="{Binding SelectedZone.HoursOpen}" Foreground="White"/> 
     </TextBlock> 

     <TextBlock> 
     <Run Text="Days Open:"/> 
     <LineBreak/> 
     <Run Text="{Binding SelectedZone.DaysOpen}" Foreground="White"/> 
     </TextBlock> 

     <TextBlock> 
     <Run Text="Parking Restrictions:"/> 
     <LineBreak/> 
     <Run Text="{Binding SelectedZone.Restrictions}" Foreground="White"/> 
     </TextBlock> 

    </StackPanel> 

NACHTRAG: gerade bemerkt, dass Sie Ihre StackPanel ‚s Horizontal hatte. Für den gleichen Effekt entfernen Sie einfach die <LineBreak/> Zeilen und sie werden horizontal sein.