在 StackPanel 中对齐元素

Question

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

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

目前都是从左手边依次排列

为什么 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>

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

我也不能选择使用网格

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

Answer 1

您可以将 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>

Answer 2

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

 --------------------------------------
| [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 for <TextBlock>.

Answer 3

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

在 StackPanel 中对齐元素

Aligning Elements within a StackPanel

c#

wpf

xaml

stackpanel