如何均匀布局一堆控件？

Question

我添加了 textbox、listpicker flyout、timepicker 和 button 控件，它们按降序排列。

每个控件都有一个 header，设置太小 无法详细说明控件的用途。

我尝试过使用网格行和列定位来布置控件，但控件在布局中的间距不均匀。此外，我无法为 header 文本大小指定字体大小。

问题：

任何人都可以为给定的控件建议一个对用户更友好的布局吗？即更大的 header 字体大小和均匀的间距。

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

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

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



    <StackPanel x:Name="TitlePanel"
                Grid.Row="0"
                Margin="12,17,0,28">
        <TextBlock Style="{StaticResource SubheaderTextBlockStyle}" Text="Parking Tag Picker" />
        <TextBlock Margin="9,-7,0,0"
                   Style="{StaticResource HeaderTextBlockStyle}"
                   Text="{Binding CouncilHeaderDisplayName}" />
    </StackPanel>

    <!--  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="1*" />
            <ColumnDefinition Width="5*" />
            <ColumnDefinition Width="1*" />
        </Grid.ColumnDefinitions>
        <Grid.Resources>
            <Style TargetType="TextBlock">
                <Setter Property="FontSize" Value="17"/>
                <Setter Property="Width" Value="270"/>
                <Setter Property="Foreground" Value="DarkGray"/>
            </Style>
        </Grid.Resources>



        <TextBox Grid.Row="0"
                 Grid.RowSpan="1"
                 Grid.Column="1"
                 Grid.ColumnSpan="1"
                 Width="270"
                 Height="72"
                 HorizontalAlignment="Center"
                 VerticalAlignment="Top"
                 Background="Azure"
                 x:Name="regNumberTextBox"
                 Header="Registration Number:"
                 Text="{Binding SelectedRegNumber,
                                Mode=TwoWay}"
                 TextWrapping="Wrap" />

        <TextBlock Grid.Row="1"
                   Grid.Column="1"
                   Width="270"
                   Height="72"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Top"
                   Foreground="LightBlue"
                   Text="Parking Zone:" />

        <Button Grid.Row="1"
                Grid.Column="1"
                Width="270"
                Height="72"
                HorizontalAlignment="Center"
                VerticalAlignment="Bottom"
                HorizontalContentAlignment="Left">
            <TextBlock DataContext="{Binding SelectedZone, Mode=TwoWay}">
                <Run Text="{Binding ZoneName}" />
            </TextBlock>
            <Button.Flyout>
                <ListPickerFlyout x:Name="ZonePicker"
                                  Title="Parking Zone"
                                  ItemsSource="{Binding ZoneInfoCollection}"
                                  SelectedItem="{Binding SelectedZone,
                                                         Mode=TwoWay}">
                    <ListPickerFlyout.ItemTemplate>
                        <DataTemplate>
                            <StackPanel>
                                <TextBlock FontSize="{StaticResource TextStyleExtraLargeFontSize}" Text="{Binding ZoneName}" />
                            </StackPanel>
                        </DataTemplate>
                    </ListPickerFlyout.ItemTemplate>
                </ListPickerFlyout>
            </Button.Flyout>
        </Button>


        <TimePicker Grid.Row="2"
                    Grid.Column="1"
                    Width="270"
                    Height="100"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Bottom"
                    Header="Parking Duration:"
                    Time="{Binding SelectedParkDuration,
                                   Mode=TwoWay}" />


        <Button Grid.Row="3"
                Grid.Column="1"
                Width="200"
                Height="100"
                HorizontalAlignment="Center"
                VerticalAlignment="Bottom"
                Command="{Binding TagRequestCommand}"
                Content="Send"
                IsEnabled="{Binding IsValidTagRequest,
                                    Mode=TwoWay}"
                Style="{StaticResource CustomButtonStyle}" />

    </Grid>


</Grid>

Answer 1

您可以使用方向设置为垂直的堆栈面板，并为其中的所有元素设置一致的边距，以获得均匀间隔的元素。至于 header 字体大小，您可以为 TextBox 和 TimePicker 创建一个具有所需字体大小的自定义 HeaderTemplate。

如何均匀布局一堆控件？

How to layout a stack of controls evenly?

xaml

layout

windows-phone-8.1

stackpanel