WPF dashboard will not align

Question

I have this code on which I use a DockPanel on Button.Content. However, this does not allow me to 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> 

Now this gives me the following:

So, the right small arrow should be located to the right of the button, and not just after the TextBlock. I found some similar problems, and it looks like I did it right, but somehow it is not.

What am I doing wrong here?

Answer 1

Try setting the HorizontalContentAlignment your button to " Stretch ". Otherwise, your DockPanel will use the size in its content, and then left-aligned. You can confirm this behavior using different text lengths for TextBlock s

Answer 2

You just need to add an additional child to the DockPanel (say, an empty canvas) without the DockPanel.Dock attribute, so that it will be assigned all the remaining space. In general, a DockPanel only works when its last child has no Dock restrictions.

Answer 3

Try to install

HorizontalContentAlignment = "Stretches"

On your button.