在 StackPanel 中对齐元素答案

【问题标题】：Aligning Elements within a StackPanel在 StackPanel 中对齐元素
【发布时间】：2019-09-30 05:18:59
【问题描述】：

我有一个堆栈面板，其中有一个几何按钮、文本块和两个平面按钮 ..即使我给这些元素中的每一个提供了单独的水平对齐方式，它们似乎都是从我的左侧堆叠起来的......

我希望我的几何按钮和文本块向左侧对齐，而平面按钮向堆栈面板的右侧对齐。

到目前为止，它们都按各自的顺序从左侧排列

为什么 XAML 没有获取我的对齐方式？我能做些什么吗？

感谢您的帮助

这是我的代码

<StackPanel Grid.Row="2" Orientation="Horizontal" Margin="0,10,0,0">
                <GeometryButton    Command="{}" 
                                   Geometry="{StaticResource {}"
                                   ToolTip="{}"
                                   HorizontalAlignment="Left"/>

                <TextBlock 
                              Text="{}" 
                              Style="{}"
                              Margin="0,10,10,10"
                              Foreground="Black"
                              HorizontalAlignment="Left"/>


                <FlatButton Command="{}"
                               Content="{}" 
                               Style="{}"
                               VerticalAlignment="Center" 
                               HorizontalContentAlignment="Center"
                               IsDefault="True"
                               Margin="0"
                               MinWidth="80"
                               HorizontalAlignment="Right"
                               />

                <FlatButton Command="{}"
                               Content="{}" 
                               Style="{}"
                               VerticalAlignment="Center"
                               HorizontalContentAlignment="Center"
                               MinWidth="80"
                               Margin="10,0,0,0"
                               HorizontalAlignment="Right"
                               />
            </StackPanel>

编辑：- 我的预期输出类似于下面...

另外使用 Grid 对我来说不是一个选项

 -------------------------------------------------------------------
| [Geo Button] [Text Block]               [Flat Button][Flat Button]|
|                                                                   |
|                                                                   |
|                                                                   |
 -------------------------------------------------------------------

【问题讨论】：

您的预期输出是否是 FlatButton 与两端的 Geometry Button 和 TextBlock 对齐？
具有水平对齐的StackPanel - 将设置一行中的所有项目（如果窗口宽度允许）。每个元素的 HoriZontalAlignment 将对齐该项目（在其绘图边界内向左或向右）。我猜你对 StackPanel 和 DockPanel 感到困惑。
我的预期结果是几何按钮和文本块在左侧对齐，两个平面按钮在右侧对齐@CodeRed

标签： c# wpf xaml stackpanel

【解决方案1】：

如果你的预期输出是这样的：

 --------------------------------------
| [Geo Button]                         |
| [Text Block]                         |
|                         [Flat Button]|
|                         [Flat Button]|
 --------------------------------------

那么您需要将您的Orientation 更改为Vertical 而不是Horizontal。

但是，如果你想要这个：

 --------------------------------------
| [Geo Button]            [Flat Button]|
| [Text Block]            [Flat Button]|
 --------------------------------------

是：

更改Flat Button的Margin，同时仍然使用上面的代码（我个人不推荐这样做）；或
使用Grid 或DockPanel，尝试在here 中查找代码和更多说明

我用这个部分实现了你的预期输出：

<Grid Height="100" Background="Red">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <StackPanel Orientation="Horizontal" Grid.Column="0">
        //...
    </StackPanel>
    <StackPanel Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Right">
        //...
    </StackPanel>
</Grid>

部分，因为我没有FlatButton和Geo Button的资源，我只用了普通的Button。请注意注意，您需要将VerticalAlignment 属性设置为Center 以获得<TextBlock>。

【讨论】：

请查看已编辑的问题@CodeRed

【解决方案2】：

您可以将Grid 与列定义一起使用，而不是StackPanel。示例：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>

    <Button   
        Grid.Column="0"
        Margin="8"
        VerticalAlignment="Center"
        Content="Button1"/>

    <TextBlock 
        Grid.Column="1"
        Margin="8"
        Text="TextBlock" 
        Style="{Binding}"
        Foreground="Black"
        VerticalAlignment="Center"/>


    <Button 
        Grid.Column="3"
        Margin="8"
        Content="Button2" 
        VerticalAlignment="Center"/>

    <Button 
        Grid.Column="4"
        Margin="8"
        Content="Button3" 
        VerticalAlignment="Center"/>
</Grid>

输出：

已编辑

另一种解决方案：

<DockPanel>
    <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
        <Button Content="Geo Button" VerticalAlignment="Center" Margin="6"/>
        <Button Content="Text Block" VerticalAlignment="Center" Margin="6"/>
    </StackPanel>

    <StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
        <Button Content="Flat Button" VerticalAlignment="Center" Margin="6"/>
        <Button Content="Flat Button" VerticalAlignment="Center" Margin="6"/>
    </StackPanel>
</DockPanel>

【讨论】：

使用网格对我来说不是一个选项，因为我已经使用了一些网格。这个必需的堆栈面板实际上是在一个网格内（Grid.Row =“2”）
为什么不能使用Grid控制？我认为Grid 是您问题的最佳和简单的解决方案。
您使用 docpanel 的第二个解决方案非常完美，因此我会将其标记为正确的..
只是出于好奇，我该如何使用网格控件来解决这个问题？
我也无法理解为什么 Dock 面板是解决此问题的好方法而堆栈面板不起作用.....如果您也能向我解释一下，我真的很感激

【解决方案3】：

DockPanel 应该可以解决这个问题。试试这个：

<DockPanel Margin="0,10,0,0">
    <Button  HorizontalAlignment="Left" Content="GeoButton" Height="20" DockPanel.Dock="Left"/>
    <TextBlock Foreground="Black" VerticalAlignment="Center" Text="TextBlock" DockPanel.Dock="Left"/>
    <Button  HorizontalAlignment="Right" Content="Flat Button1" Height="20" DockPanel.Dock="Right"/>
    <Button  HorizontalAlignment="Right" Content="Flat Button2" Height="20" DockPanel.Dock="Right"/>
</DockPanel>

【讨论】：