Aligning Elements within a StackPanel

Question

I have a stack panel which has a Geometry button , text block and two Flat Buttons .. Even though I have given each of these elements individual horizontal alignments they seem to be all stacked from my Left hand side ...

I want my Geometry button and Text block to be aligned towards the Left hand side and the Flat Button Aligned towards the Right hand Side of the stack panel .

As of now they are all lined up from the left hand side in their respective order

Why hasn't XAML picked up my alignements? Anything I can do about it?

Appreciate your help

Here is my code

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

EDIT :- My Expected output is something like the Below ...

Also using Grid is not an Option for me

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

Is your expected output is FlatButton aligned with Geometry Button and TextBlock on each end side? — CodeRed, Sep 30 '19 at 05:33
StackPanel with Horizontal Alignment - will be setting all the items in a Row (if window width allows). The per element HoriZontalAlignment will align that Item (within its Drawing bounds towards left or right). I guess you are confused between StackPanel and DockPanel. — Prateek Shrivastava, Sep 30 '19 at 05:37
My Expected Outcome is Geometry Button and Text Block alligned together on the left hand side and the two flat buttons alligned together on the right hand side @CodeRed — , Sep 30 '19 at 05:38

CodeRed · Answer 1 · 2019-09-30T09:49:46.420

If your expected output is like this:

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

Then you need to change your Orientation to Vertical instead of Horizontal.

However, if you want this:

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

It is either:

Change the Margin of the Flat Button's while still using the code above (I personally don't recommend this); or
Use Grid or DockPanel, try looking here for the codes and more explanations

I partially made your expected output with this:

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

Partially, because I don't have the resources for FlatButton and Geo Button, I only used regular Button's. Take note that you need to set VerticalAlignment property to Center for <TextBlock>.

Kindly Look at the Edited Question @CodeRed – Sep 30 '19 at 09:33 — , Sep 30 '19 at 09:33

AmRo · Accepted Answer · 2019-09-30T10:28:03.290

Instead of StackPanel you can use Grid with column definitions. Example:

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

Output:

EDITED

Another solution:

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

Using Grid Is not an Option for me as I have alread Used some Grid. This Required stack panel is actually inside a Grid (Grid.Row ="2") — , Sep 30 '19 at 09:29
Why you can't use `Grid` control? I think the `Grid` is best and easy solution for your question. — AmRo, Sep 30 '19 at 10:22
your Second solution with the docpanel was perfect , Hence I will mark it right.. — , Sep 30 '19 at 11:07
Just out of curiousity how can I work this around using Grid control ? — , Sep 30 '19 at 11:07
Also I cant Undersand why the Dock panel is a good approach for this and the stack panel doesn't work ..... Really appreciate if you can explain that to me as well — , Sep 30 '19 at 11:18

score 0 · Answer 3 · answered Sep 30 '19 at 10:54

A DockPanel should work for that. Try this:

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

Aligning Elements within a StackPanel

3 Answers3