如何使用堆栈面板和网格布局一堆文本块？

Question

我有一个基本的 UI，其中有 6 个文本块，3 个用于值，3 个用于相关的 header。我最初设定的是使用网格和列位置定位文本块。这看起来不错，除了文本块的值太靠近它们的 header teckblocks。

因此，为了尝试另一种解决方案，在我下面的代码中，我将每组文本块包装在一个堆栈面板中，并为 header 文本块提供了边距。但是在测试时，所有六个控件都出现在屏幕右上角。

问题： 有谁知道如何放置一组文本块，堆叠起来并在每组中的第一个和第二个块之间使用 space？

在调试期间，我尝试调整每个堆栈面板上的边距大小，但没有对布局进行任何修复。

Xaml 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 的拟议布局：

Answer 1

如果是我，我会把所有的噪音变成更像这样的东西，以便 maintenance/readability 和 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/> 行，它们将是水平的。

如何使用堆栈面板和网格布局一堆文本块？

How to layout a stack of textblocks using stackpanels and grid?

xaml

layout

windows-phone-8.1

stackpanel