Image in a button fills whole space when Orientation="Vertical"

Question

I want to make a series of buttons (like a button bar) that looks like this:

+----------+  +----------+
|  (image) |  |  (image) |
|          |  |          |
|   text   |  |   text   |
+----------+  +----------+

I have this for the XAML:

 <StackPanel Orientation="Horizontal">
    <Button Name="btnAddCompany" Width="60" Height="60" Background="Transparent"  ToolTip="test" >
        <StackPanel Orientation="Vertical">
            <Image Source="/Images/LeftArrow25px.png"></Image>
            <TextBlock Text="Left" Foreground="AntiqueWhite" HorizontalAlignment="Center" Width="50"/>
        </StackPanel>
    </Button>
 </StackPanel>

When I change the top StackPanel orientation to Horizontal, the image in the middle StackPanel takes over the whole button (it's resized like it's stretched). I've tried forcing the HorizontalAlignment and VerticalAlignment to Center to no avail.

Anyone know what's going on here?

pengMiao pengMiao · Accepted Answer · 2020-08-06T02:31:41

Such behavior happen when we set the same size for width and height in the parent container of "Image" control, "Image" control will automatically stretch the image to the parent's width. So any size of image will stretch to 60x60 which it will fully cover the parent container and the text. Setting the "Stretch" of the image control to uniform or none won't help anything either.

There's two solution i can think of right now:

Change the height of parent container

//change Height = "60" to Height = "80" and you can observed the text come out.
<Button Name="btnAddCompany" Width="60" Height="80" Background="Transparent"  ToolTip="test" >

Control the image control's size

<Image Source="/Images/LeftArrow25px.png" Height="32" Width="32" Stretch="Uniform"></Image>

Both solution not so good i will come back when i think of better solution today... (If no any update today that means i fail ;d)

Image in a button fills whole space when Orientation="Vertical"

1 Answers