В отличие от Windows Forms в WPF кнопка не имеет специального свойства, ответственного за изображение. Но, тем не менее кнопку в WPF также можно украсить изображением.
Как известно, в WPF внешний вид элементов управления описывается при помощи XAML. Ниже приведён пример стандартного описания для кнопки и её внешний вид.
|
1 |
<button x:name="button" content="Button" horizontalalignment="Left" margin="36,32,0,0" verticalalignment="Top" width="75"></button> |
Для того чтобы добавить изображение для кнопки воспользуемся той особенностью WPF, что различные элементы можно размещать внутри друг друга.
Помести внутрь кнопки элемент StackPanel. В него в свою очередь также поместим элементы Image и TextBlock.
|
1 2 3 4 5 6 |
<button x:name="button" horizontalalignment="Left" margin="36,32,0,0" verticalalignment="Top" width="75"> </button> |
Значение «Horizontal» у атрибута Orientation означает, что содержимое StackPanel будет располагаться по горизонтали слева направо в порядке описания элементов.
Атрибуты Source и Margin задают путь к изображению и внешние отступы соответственно. Атрибут Margin Добавлен для того, чтобы надпись на кнопке, которая была перенесена в TextBlock не «прилипала» к изображению.
На скриншоте показана вышеприведённая разметка в работе.
Нетрудно догадаться, что, если поменять местами объявление элементов Image и TextBlock, изображение будет расположено справа от надписи.
|
1 2 3 4 5 6 |
<button x:name="button" horizontalalignment="Left" margin="36,32,0,0" verticalalignment="Top" width="75"> </button> |
Значение атрибута Margin у Image скорректировано в соответствии с новым расположением элементов.
Ниже показан результат:
Если требуется, чтобы изображение и надпись располагались по вертикали, нужно изменить значение атрибута Orientation у StackPanel на «Vertical». Тогда вложенные элементы будут располагаться в порядке описания сверху вниз.
Пример с расположением значка сверху:
|
1 2 3 4 5 6 |
<button x:name="button" horizontalalignment="Left" margin="36,32,0,0" verticalalignment="Top" width="75"> </button> |
И снизу:
|
1 2 3 4 5 6 |
<button x:name="button" horizontalalignment="Left" margin="36,32,0,0" verticalalignment="Top" width="75"> </button> |
Атрибут Margin у Image в обоих примерах удалён, так как препятствует выравниванию изображения точно по центру кнопки.
Если же нужно, чтобы на кнопке был только значок без надписи StackPanel можно не использовать. Достаточно просто поместить элемент Image непосредственно внутрь кнопки.
|
1 2 3 |
<button x:name="button" horizontalalignment="Left" margin="36,32,0,0" verticalalignment="Top" width="75"> </button> |
Мы рассмотрели лишь основные способы добавления изображения (значка) для кнопки. WPF имеет богатые возможности, которые не ограничиваются приведёнными примерами. Однако опираясь на основы, можно с лёгкостью создавать и гораздо более сложные решения.
Добавить комментарий