スタックパネルとグリッドを使用してテキストブロックのスタックをレイアウトする方法は？

Question

基本的なUIがあります。ここには6つのテキストブロック、3つは値、3つは関連するヘッダーです。私が最初に述べたのは、グリッドとカラムの位置を使ってテキストブロックを配置することでした。これは、textblockがヘッダのteckblockにあまりにも近くに配置された値を除いて、きれいに見えました。

私の下のコードでは、別の解決策を試すために、スタックパネルの各textblocksをラップし、ヘッダーのテキストブロックに余白を指定しました。しかし、6つのコントロールをすべてテストすると、画面の右上隅にまとめて表示されます。

質問： 誰もが積層され、各セットの第一および第二のブロックとの間のスペースで、テキストブロックのセットを配置する方法を知っていますか？

デバッグ中にレイアウトを修正するために何もしなかった各スタックパネルの余白サイズで試してみました。 UIの

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

案レイアウト：UIの

XAMLマークアップ

Answer 1

それは私だった、私はすべての電源を入れたい場合そのノイズをより簡単なメンテナンスのためのこのようなものに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> 

補遺：ちょうどあなたがあなたのStackPanelの水平た気づきました。同じエフェクトの場合は、<LineBreak/>行を削除するだけで水平になります。