Изображение в кнопке заполняет все пространство, если Ориентация = "Вертикаль".

Question

Я хочу создать серию кнопок (например, панель кнопок), которая будет выглядеть так:

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

У меня есть это для 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>

Когда я меняю ориентация верхней панели StackPanel - по горизонтали, изображение в средней панели StackPanel занимает всю кнопку (его размер изменяется так, как будто он растянут). Я попытался принудительно установить HorizontalAlignment и VerticalAlignment в центр, но безуспешно.

Кто-нибудь знает, что здесь происходит?

Answer 1

Такое поведение происходит, когда мы устанавливаем одинаковый размер для ширины и высоты в родительском контейнере элемента управления «Изображение», элемент управления «Изображение» автоматически растягивает изображение до ширины родителя. Таким образом, изображение любого размера будет растягиваться до 60x60, которое полностью покроет родительский контейнер и текст. Установка «Растягивания» элемента управления изображением на равномерный или ничего не поможет.

Есть два решения, о которых я могу думать прямо сейчас:

Изменить высоту родительского контейнера

//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" > 

Контролируйте размер элемента управления изображением

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

Оба решения не так хороши, я вернусь, когда подумаю о лучшем решении сегодня ... (Если сегодня нет обновлений, это означает, что я потерпел неудачу ; г)