WPF Dockpanel won't align right

Question

I have this code on which I use a DockPanel on a Button.Content. However it doesn't let me right align the last image (small arrow).

<Button Height="70"
                    HorizontalContentAlignment="Left">
              <Button.Content>
                <DockPanel LastChildFill="False">
                  <Image DockPanel.Dock="Left"
                    Height="50"
                         Width="50"
                         Source="{StaticResource Placeholder}"
                         Stretch="UniformToFill"
                         Margin="5" />
                  <TextBlock DockPanel.Dock="Left"
                             Text="Dummy text"
                             VerticalAlignment="Center"
                             Margin="5" />
                  <Image DockPanel.Dock="Right"
                         Height="24"
                         Width="24"
                         Source="{StaticResource Right_Arrow_24}"
                         VerticalAlignment="Center"
                         HorizontalAlignment="Right"
                         Stretch="UniformToFill"
                         Margin="5" />
                </DockPanel>
              </Button.Content>
            </Button>

It now gives me this:

DockPanel

So the right small arrow should be placed on the right of the button and not just after the TextBlock. I've found some similar issues and it looks like I did it correct, but somehow it isn't..

What am I doing wrong here?

Make the HorizontalContentAlignment Stretch – dowhilefor Mar 19 '13 at 15:01 — dowhilefor, Mar 19 '13 at 15:01

score 6 · Accepted Answer · answered Mar 19 '13 at 15:01

6

Try to set the HorizontalContentAlignment of your button to "Stretch". Otherwise your DockPanel will use the size need by its content, then align left. You can confirm this behaviour by using different text lengths for your TextBlocks

answered Mar 19 '13 at 15:01

mathieu

30,974
4
64
90

score 6 · Answer 2 · answered Jul 16 '14 at 11:19

6

You simply have to append an extra child to the DockPanel (say an empty Canvas) without the DockPanel.Dock attribute, so that all the remaining space is assigned to it. In general, DockPanel only works fine only when its last child has no Dock constraint

answered Jul 16 '14 at 11:19

rpaulin56

436
8
14

Although this works, it seems more like a hack to me. Adding an extra UI element, only for the sake of getting the layout you want. This doesn't feel right to me. I up-voted though, because it solved the issue, and shows intrinsic XAML behavior. – Mike de Klerk Aug 07 '17 at 07:03
1

@MikedeKlerk: yes, I also felt it strange at first, but if you think to the extra Canvas as a placeholder for the unused (thus still available) room in the DockPanel it sounds a little better. – rpaulin56 Jun 12 '18 at 07:47
This is also the solution if your parent element doesn't have the `HorizontalContentAlignment`property – Morphed Oct 24 '19 at 08:39
There is a simple alternative to adding an extra UI element: setting the DockPanel LastChildFill property to False – rpaulin56 Dec 21 '20 at 14:05

score 1 · Answer 3 · answered Mar 19 '13 at 15:01

1

Try setting

HorizontalContentAlignment="Stretch"

On your button.

answered Mar 19 '13 at 15:01

Brandon Moretz

7,512
3
33
43

WPF Dockpanel won't align right

3 Answers3