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:

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?

Answer 1

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

Answer 2

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

Answer 3

Try setting

HorizontalContentAlignment="Stretch"

On your button.