82

I have the following code:

<DockPanel>
    <StackPanel DockPanel.Dock="Top" Orientation="Horizontal">
        <RadioButton Content="_Programs" 
                    IsChecked="{Binding Path=ProgramBanksSelected}" IsEnabled="{Binding Path=ProgramsEnabled}" Margin="8" />
        <StackPanel>
            <Label Content="Master" Height="28" Name="MasterFileStatus" VerticalContentAlignment="Center"/>
        </StackPanel>
    </StackPanel>
    ...

The radio button should be placed on the left side in the stack panel (I removed some buttons for not cluttering the example) and the label (which I put temporarily in a nested StackPanel) should be on the right side.

I tried already lots of combinations of alignments but I cannot get the label on the right side. What should I add to accomplish this?

Improve this question
3
  • 2
    You really can't ask too much of stack panels, as soon as you want any kind of semi-advanced structure just go for a grid
    – Kevin DiTraglia
    Commented Aug 27, 2012 at 23:36
  • 9
    The right answer is to use a DockPanel as in this post: stackoverflow.com/questions/2023201/…
    – pasx
    Commented Apr 2, 2013 at 9:07
  • 1
    And to add horizontal alignment right to the last element.
    – jwize
    Commented Jul 17, 2021 at 7:58

5 Answers 5

Reset to default
115

Just do not use a StackPanel, StackPanels stack. They do, for obvious reasons, not allow alignment in the direction in which they stack. Use a Grid, with column definitions like so:

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
Improve this answer
5
  • I guess that would work, however I will wait for more answers, because with StackPanels I have the benefit that when the screen is made less wide, the items will wrap up, which I loose when I use a grid.
    – Michel Keijzers
    Commented Aug 27, 2012 at 23:45
  • 2
    @MichelKeijzers: If you want something fancy like that you may need to implement your own panel.
    – brunnerh
    Commented Aug 27, 2012 at 23:47
  • Thanks for the answer ... I don't know if I prefer your solution about not right aligning in that case, but that is outside of the question I asked.
    – Michel Keijzers
    Commented Aug 28, 2012 at 0:23
  • Thanks for tip. I took all ColumnDefinition Width="*" to equally distribute
    – Mrinmoy
    Commented May 8, 2019 at 4:51
  • Additionally A little binding trick worked when grid is inside stackpanel . this makes grid width expand so that button appears on left and right corners of the screen. <StackPanel x:Name="sp1" Margin="10" Orientation="Horizontal"> <Grid Width="{Binding ElementName=sp1, Path=ActualWidth}" >
    – Neha
    Commented Apr 5, 2022 at 16:13
64

Even though this is old, should someone come across this like I did, here's a simple solution.

Make a new grid and inside that grid put two stack panels with different Horizontal Alignment.

<Grid>
    <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
        <!--Code here-->
    </StackPanel>
    <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
        <!--Code here-->
    </StackPanel>
</Grid>

The possible issue is that now without extra handling the two could overlap with each other.

Improve this answer
3
  • 2
    This is a super great solution. You don't actually need the StackPanels though, if each panel only has one child.
    – Jonathan Tuzman
    Commented Jun 4, 2020 at 18:31
  • Elegant... Does the job without much of grid definitions.
    – Rajshekar Reddy
    Commented Sep 2, 2021 at 12:24
  • Cleanest and simplest answer, no need to create grid column definitions.
    – Shukri Adams
    Commented Dec 1, 2023 at 11:47
6

As you have set the StackPanel's orientation to Horizontal, the HorizontalAlignment property won't work on child-elements. You can keep the StackPanel if you need additional controls, though I would recommend switching to a Grid (among other things) to build the layout you want.

Also, the Grid will allow you to control the actual width of each column:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="50" />
        <ColumnDefinition Width="150" />
    </Grid.ColumnDefinitions>

    <RadioButton
        Grid.Column="0"
        ...
    />

    <Label
        Grid.Column="1"
        ...
    />
</Grid>

Improve this answer
2
  • 1
    Your first example will not work, they will still stack horizontally as space allows and the alignment won't do anything.
    – Kevin DiTraglia
    Commented Aug 27, 2012 at 23:40
  • @KDiTraglia Yeah, just tested - you're right; When Orientation="Horizontal", it ignores the HorizontalAlignment; removing now, thanks =]
    – newfurniturey
    Commented Aug 27, 2012 at 23:41
5

User @pasx is right. You should use DockPanel and dock the RadioButton to the left side, and your StackPanel with the label to the right side.

<DockPanel>

    <DockPanel 
        DockPanel.Dock="Top" 
        LastChildFill="False" >

        <RadioButton 
            DockPanel.Dock="Left" 
            Content="_Programs" 
            IsChecked="{Binding Path=ProgramBanksSelected}"
            IsEnabled="{Binding Path=ProgramsEnabled}" 
            Margin="8" />

        <StackPanel
            DockPanel.Dock="Right">

            <Label 
                Content="Master" 
                Height="28" 
                Name="MasterFileStatus" 
                VerticalContentAlignment="Center"/>

        </StackPanel>

    </DockPanel>
    ...
Improve this answer
1

Use the Stackpanel orientation type in a nested fashion as shown in the sample. The Grid Width is set to a parent width in order to achieve full width.

<StackPanel x:Name="stackBlah" Orientation="Vertical">
    <StackPanel Orientation="Horizontal">
        <Grid Width="{Binding ActualWidth, ElementName=stackBlah}" >
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition />
            </Grid.RowDefinitions>

            <StackPanel Grid.Column="0" HorizontalAlignment="Left" >
                <Button Content="Some button" />
            </StackPanel>
            <StackPanel Grid.Column="1" HorizontalAlignment="Right">
                <ToggleSwitch Header="Some toggle" AutomationProperties.Name="ToggleNotifications"/>
            </StackPanel>
        </Grid>
    </StackPanel>
</StackPanel>
Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.