Question

我有一个基本用户界面，其中有6个文本块，3个用于值，3个用于相关标题。我最初提出的是使用网格和列位置定位文本块。这看起来很好，除了值textblocks位置太接近其标题teckblocks。

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

问题： 有没有人知道如何定位一组文本块，堆叠并在每组中的第一个和第二个块之间留有空格？

在调试期间，我尝试在每个堆栈面板上使用边距大小，这对于修复布局没有任何作用。

UI的Xaml标记：

<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

如果是我，我只是把所有的噪音变成更像这样的东西，以便于维护/阅读，减少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>

ADDENDUM：刚刚注意到你的StackPanel是水平的。对于相同的效果，只需删除<LineBreak/>行，它们将是水平的。

如何使用stackpanels和grid布局一堆文本块？

1 个答案: