如何在水平堆栈面板WPF中以垂直模式对齐控件答案

【问题标题】：How to align control in vertical mode in a horizontal stack panel WPF如何在水平堆栈面板WPF中以垂直模式对齐控件
【发布时间】：2015-08-17 14:50:47
【问题描述】：

我使用堆栈面板在水平模式下对齐两个单选按钮，但我想在垂直模式下在同一个堆栈面板中添加一个数据网格。

<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>

我设置了控制边距，让您知道它应该是怎样的......单选按钮和数据网格位于一个组框中。我该如何解决？

【问题讨论】：

标签： c# wpf xaml

【解决方案1】：

为什么不使用两个堆栈面板？

 <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>

【讨论】：

【解决方案2】：

GroupBox 的内容只能有一个子元素。因此，您需要重新排列布局以解决此问题。我建议Grid。

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

            <StackPanel/>

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

您可以轻松地使用DockPanel。

【讨论】：

【解决方案3】：

<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>

这可能是一个解决方案。

根据颜色你也有一个示例图片。

【讨论】：

很好的解决方案！非常感谢！