Search code examples
c#wpfxamlstackpanel

Aligning Elements within a StackPanel


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

Solution

  • 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: enter image description here

    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>