WPF Image Button with text anchored at the bottom of the Button

wpf

Solution

The Button element does not automatically allow its content to fill the entire Button area. To do that, you'll have to set both the HorizontalContentAlignment and VerticalContentAlignment properties to "Stretch."

<Button Height="150" Width="150"
        HorizontalContentAlignment="Stretch"
        VerticalContentAlignment="Stretch">
    <DockPanel LastChildFill="True">
        <Label HorizontalContentAlignment="Center" DockPanel.Dock="Bottom">foo</Label>
        <Image Source="bar.png" />
    </DockPanel>
</Button>

Problem

- I would like the text to be anchored to the very bottom of the button, regardless of the Image aspect ratio. - I would like the Image to stretch to fit the remaining space in the button. This xaml does have the Image fill the remaining space, but the text is placed right under the Image rather that at the very bottom of the button. Maybe I need to use something other than a DockPanel, but I am not sure what to use. The text does not need to be in a Label if there is a different way to do it that works. Thanks ``` <Button Height="150" Width="150"> <DockPanel LastChildFill="True"> <Label HorizontalContentAlignment="Center" DockPanel.Dock="Bottom">foo</Label> <Image Source="bar.png" /> </DockPanel> </Button> ```

Original source