コントロールのスタックを均等にレイアウトする方法は？

Question

私は、降順でレイアウトされたtextbox,listpicker flyout,timepickerおよびbuttonコントロールを追加しました。

コントロールのそれぞれは、がコントロールの目的を詳述するには小さすぎるヘッダーを持っています。

私が試したのは、グリッドの行と列の配置を使用してコントロールをレイアウトすることですが、コントロールはレイアウト内に均等に配置されていません。また、私はヘッダーテキストサイズのフォントサイズを指定することはできません。

質問：

誰もが与えられたコントロールのためのより多くのユーザーフレンドリーなレイアウトを提案することはできますか？すなわち、より大きいヘッダーフォントサイズおよび均一な間隔。

<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

あなたは垂直に設定さ方向にスタックパネルを使用し、等間隔の要素を取得するために、一貫性のマージンのその内部のすべての要素のを設定することができます。ヘッダーのフォントサイズについては、TextBoxとTimePickerの希望のフォントサイズでカスタムのHeaderTemplateを作成することができます。