如何在垂直模式下在垂直模式下對齊控件WPF

Question

我已經使用了一個堆棧面板來在水平模式下對齊兩個單選按鈕，但是我想在垂直模式下在同一個堆棧面板中添加一個數據網格。

<GroupBox Grid.Column="2" Header="Approfondimento pronostici" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" > 
        <StackPanel Orientation="Horizontal"> 
         <RadioButton Content="Primo tempo" Margin="3,5,0,128" /> 
         <RadioButton Content="Parziale/Finale" Margin="8,5,8,128" /> 
         <DataGrid ColumnWidth="*" Grid.Row="2" Grid.Column="2" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" ScrollViewer.HorizontalScrollBarVisibility="Auto" AutoGenerateColumns="False" Width="auto"> 
          <DataGrid.Columns> 
           <DataGridTextColumn Binding="{x:Null}" ClipboardContentBinding="{x:Null}" Header="Squadra" MinWidth="100"/> 
           <DataGridTextColumn Binding="{x:Null}" ClipboardContentBinding="{x:Null}" Header="1" MinWidth="40" CanUserResize="False" /> 
           <DataGridTextColumn Binding="{x:Null}" ClipboardContentBinding="{x:Null}" Header="X" MinWidth="40" CanUserResize="False" /> 
           <DataGridTextColumn Binding="{x:Null}" ClipboardContentBinding="{x:Null}" Header="2" MinWidth="40" CanUserResize="False" /> 
           <DataGridTextColumn Binding="{x:Null}" ClipboardContentBinding="{x:Null}" Header="un 1.5" MinWidth="40" CanUserResize="False" /> 
           <DataGridTextColumn Binding="{x:Null}" ClipboardContentBinding="{x:Null}" Header="ov 1.5" MinWidth="40" CanUserResize="False" /> 
          </DataGrid.Columns> 
         </DataGrid> 
        </StackPanel> 

我設置了控件的邊距，讓你知道它應該如何。單選按鈕和數據網格位於groupbox中。我該如何解決？

Answer 1

<DockPanel LastChildFill="True"> 
    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" DockPanel.Dock="Top" Background="SkyBlue"> 
     <RadioButton Content="First Radio Button" HorizontalAlignment="Center" Margin="5,2"/> 
     <RadioButton Content="Second Radio Button" HorizontalAlignment="Center" Margin="5, 2"/> 
    </StackPanel> 
    <DataGrid DockPanel.Dock="Bottom" Background="SlateGray" > 

    </DataGrid> 
</DockPanel> 

這可以是一個解決方案。

根據顏色你有一個樣品圖片了。

Answer 2

爲什麼不使用兩個堆疊面板？

<GroupBox Grid.Column="2" Header="Approfondimento pronostici" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" > 
    <StackPanel Orientation="Vertical"> 
         <StackPanel Orientation="Horizontal"> 
          <RadioButton Content="Primo tempo" Margin="3,5,0,128" /> 
          <RadioButton Content="Parziale/Finale" Margin="8,5,8,128" /> 
    </StackPanel> 
          <DataGrid ColumnWidth="*" Grid.Row="2" Grid.Column="2" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" ScrollViewer.HorizontalScrollBarVisibility="Auto" AutoGenerateColumns="False" Width="auto"> 
           <DataGrid.Columns> 
            <DataGridTextColumn Binding="{x:Null}" ClipboardContentBinding="{x:Null}" Header="Squadra" MinWidth="100"/> 
            <DataGridTextColumn Binding="{x:Null}" ClipboardContentBinding="{x:Null}" Header="1" MinWidth="40" CanUserResize="False" /> 
            <DataGridTextColumn Binding="{x:Null}" ClipboardContentBinding="{x:Null}" Header="X" MinWidth="40" CanUserResize="False" /> 
            <DataGridTextColumn Binding="{x:Null}" ClipboardContentBinding="{x:Null}" Header="2" MinWidth="40" CanUserResize="False" /> 
            <DataGridTextColumn Binding="{x:Null}" ClipboardContentBinding="{x:Null}" Header="un 1.5" MinWidth="40" CanUserResize="False" /> 
            <DataGridTextColumn Binding="{x:Null}" ClipboardContentBinding="{x:Null}" Header="ov 1.5" MinWidth="40" CanUserResize="False" /> 
           </DataGrid.Columns> 
          </DataGrid> 
         </StackPanel> 
</GroupBox> 

Answer 3

的GroupBox只能有一個子元素作爲它的內容。因此，您需要重新排列布局來解決這個問題。我建議一個Grid。

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

      <StackPanel/> 

      <DataGrid Grid.Row="1"/> 
     </Grid> 
    </GroupBox> 

您可以輕鬆使用DockPanel。