Выравнивание элементов в StackPanel

Question

У меня есть панель стека, в которой есть кнопка Geometry, текстовый блок и две плоские кнопки. Несмотря на то, что я дал каждому из этих элементов индивидуальное горизонтальное выравнивание, кажется, что все они сложены с левой стороны ... Я хочуМоя кнопка Geometry и текстовый блок должны быть выровнены по левой стороне, а плоская кнопка выровнена по правой стороне панели стека.

На данный момент все они выстроены в линию с левой стороны в своихсоответствующий заказ

Почему 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]|
|                                                                   |
|                                                                   |
|                                                                   |
 -------------------------------------------------------------------

Answer 1

Если ваш ожидаемый результат выглядит следующим образом:

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

Тогда вам нужно изменить Orientation на Vertical вместо Horizontal.

Однако, если вы хотитеэто:

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

Это либо:

1. Измените Margin из Flat Button, все еще используя код выше (я лично не рекомендую это);или
2. Используйте Grid или DockPanel, попробуйте поискать здесь кодов и другие объяснения

Я частично сделал ваш ожидаемый вывод с этим:

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

Answer 2

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>

Answer 3

Вместо StackPanel вы можете использовать Grid с определениями столбцов. Пример:

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