Элемент Button

Ни один графический интерфейс пользователя не обходится без кнопок. И такой элемент управления конечно же есть в WPF . Он называется Button и как большинство элементов управления фреймворка обладает гибкостью в настройке и позволяет покрыть практически полностью все ваши задачи. Давайте рассмотрим несколько простых примеров.

Простая кнопка

Как и большинство других элементов управления WPF, кнопка создается с помощью специального тега Button. Если вы поместите текст или вставите другой элемент внутрь тега , то он станет содержимым элемента Button.

<Button>Hello, world!</Button>

Довольно просто, да? Конечно, кнопка пока ничего не делает, но если вы наведете на неё мышью, вы увидите, что у неё уже есть хороший встроенный эффект. Но давайте, всё-таки, заставим кнопку что-нибудь сделать, "подписавшись" на событие Click (подробнее про события в статье "события в XAML"):

<Button Click="HelloWorldButton_Click">Hello, World!</Button>

В коде на C# вам нужен метод с таким именем, чтобы обработать событие по нажатии на кнопку:

private void HelloWorldButton_Click(object sender, RoutedEventArgs e)
{
    MessageBox.Show("Hello, world!");
}

Теперь у вас есть очень простая кнопка, и, когда вы нажмете на неё, вы увидите сообщение!

Форматирование и настройка контента Button

Если немного углубиться то простой текст свойства Content класса Button превращается в элемент управления TextBlock, что позволяет настраивать его визуальное отображение. В классе Button можно найти свойства , которые позволят сделать это. Например задать цвет текста с помощью Foreground, задать фон Background, насыщенность шрифта FontWeight и т.д. Другими словами очень легко сделать форматирование и настройки отображения текста внутри элемента управления Button.

<Button Background="Beige" Foreground="Blue" FontWeight="Bold">Formatted Button</Button>

При установке этих свойств напрямую на элементе Button всё форматирование будет применено на всё содержимое элемента, что несколько ограничивает возможности. Если этого недостаточно, читайте дальше о более сложном форматировании содержимого.

Кнопки с дополнительным содержимым

Мы уже упоминали об этом несколько раз, но одна из замечательных особенностей WPF - это возможность заменить простой текст внутри элемента управления другими элементами управления WPF. Это также подразумевает, что вам не придется ограничивать свои кнопки обычным текстом, который выглядит одинаково - вы можете запросто добавить несколько текстовых элементов управления с различными параметрами форматирования. Кнопка WPF поддерживает только один дочерний элемент управления, но вы можете просто использовать в качестве такого дочернего элемента Panel, на котором затем разместится столько элементов управления, сколько будет необходимо. Вы можете использовать такой подход для создания кнопок с различными параметрами форматирования:

<Button>
    <StackPanel Orientation="Horizontal">
    <TextBlock>Formatted </TextBlock>
    <TextBlock Foreground="Blue" FontWeight="Bold" Margin="2,0">Button</TextBlock>
    <TextBlock Foreground="Gray" FontStyle="Italic">[Various]</TextBlock>
    </StackPanel>
</Button>

Но, разумеется, вы не ограничены только текстом - внутрь кнопок можно помещать что угодно, что приводит нас к теме, которая, я знаю, будет интересна многим. Кнопки с картинками!

Кнопка с изображением (ImageButton)

Во многих фреймворках, предназначенных для создания пользовательского интерфейса, можно обнаружить стандартную кнопку и затем один или несколько ее вариантов с дополнительными возможностями. Один из наиболее часто используемых - ImageButton (кнопка с изображением), название которой говорит само за себя. Она позволяет расположить картинку перед надписью на кнопке. Однако в WPF нет никакой необходимости в наличие отдельного элемента управления для решения этой задачи - как только что было показано, внутри кнопки можно поместить несколько других элементов. Так же легко можно добавить туда картинку:

<Button Padding="5">  
    <StackPanel Orientation="Horizontal">  
    <Image Source="/WpfTutorialSamples;component/Images/help.png" />  
    <TextBlock Margin="5,0">Help</TextBlock>  
    </StackPanel>  
</Button>

Создание ImageButton в WPF - это действительно так просто, и вы, конечно же, вольны перемещать содержимое кнопки, например, если пожелаете разместить изображение после текста, а не перед ним и т.д.

Отступы внутри кнопки

Вы уже могли заметить, что в WPF кнопки по умолчанию не имеют внутреннего отступа. Как следствие, текст располагается очень близко к краям, что может иметь несколько странный вид, так как большинство кнопок в других приложениях или на веб-страницах имеют хотя небольшой отступ. Не беспокойтесь, ведь у кнопки есть свойство Padding (внутренний отступ):

<Button Padding="5,2">Hello, World!</Button>

Это создаст отступ размером в 5 пикселей слева и справа и в 2 пикселя - сверху и снизу. Но постоянно добавлять отступы к кнопкам может стать несколько утомительно, так что вот небольшая подсказка: вы можете настроить отступы глобально, во всем приложении либо только на определенном окне, используя стиль (Style), более подробно будет расказано о стилях далее. Примерно так мы можем применить их на целом окне, воспользовавшись свойством Window.Resources:

<Window.Resources>
    <Style TargetType="{x:Type Button}">
    <Setter Property="Padding" Value="5,2"/>
    </Style>
</Window.Resources>

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

Итоги

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