Делаем кнопку с картинкой на WPF

В отличие от Windows Forms в WPF кнопка не имеет специального свойства, ответственного за изображение. Но, тем не менее кнопку в WPF также можно украсить изображением.

Как известно, в WPF внешний вид элементов управления описывается при помощи XAML. Ниже приведён пример стандартного описания для кнопки и её внешний вид.

Стандартная кнопка

Для того чтобы добавить изображение для кнопки воспользуемся той особенностью WPF, что различные элементы можно размещать внутри друг друга.

Помести внутрь кнопки элемент StackPanel. В него в свою очередь также поместим элементы Image и TextBlock.

Значение «Horizontal» у атрибута Orientation означает, что содержимое StackPanel будет располагаться по горизонтали слева направо в порядке описания элементов.

Атрибуты Source и Margin задают путь к изображению и внешние отступы соответственно. Атрибут Margin Добавлен для того, чтобы надпись на кнопке, которая была перенесена в TextBlock не «прилипала» к изображению.

На скриншоте показана вышеприведённая разметка в работе.

Кнопка со значком

Нетрудно догадаться, что, если поменять местами объявление элементов Image и TextBlock, изображение будет расположено справа от надписи.

Значение атрибута Margin у Image скорректировано в соответствии с новым расположением элементов.

Ниже показан результат:

Кнопка со значком справа

Если требуется, чтобы изображение и надпись располагались по вертикали, нужно изменить значение атрибута Orientation у StackPanel на «Vertical». Тогда вложенные элементы будут располагаться в порядке описания сверху вниз.

Пример с расположением значка сверху:

Кнопка со значком сверху

И снизу:

Кнопка со значком снизу

Атрибут Margin у Image в обоих примерах удалён, так как препятствует выравниванию изображения точно по центру кнопки.

Если же нужно, чтобы на кнопке был только значок без надписи StackPanel можно не использовать. Достаточно просто поместить элемент Image непосредственно внутрь кнопки.

Кнопка со значком без надписи

Мы рассмотрели лишь основные способы добавления изображения (значка) для кнопки. WPF имеет богатые возможности, которые не ограничиваются приведёнными примерами. Однако опираясь на основы, можно с лёгкостью создавать и гораздо более сложные решения.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *