TOC

This article is currently in the process of being translated into Russian (~60% done).

Основные элементы управления:

The Button control

Ни один графический интерфейс пользователя не обходится без кнопок. И такой элемент управления конечно же есть в 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)

In many UI frameworks, you will find a regular Button and then one or several other variants, which will offer extra features. One of the most commonly used variants is the ImageButton, which, as the name implies, is a Button which will usually allow you to include an image before the text. But in WPF, there's no need for a separate control to accomplish this - as you just saw, we can put several controls inside a Button, so you can just as easily add an Image control to it, like this:

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

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

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

You may have noticed that buttons in the WPF framework doesn't come with any padding by default. This means that the text is very close to the borders, which might look a little bit strange, because most buttons found elsewhere (web, other applications etc.) do have at least some padding in the sides. No worries, because the Button comes with a Padding property:

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

This will apply a padding of 5 pixels on the sides, and 2 pixels in the top and bottom. But having to apply padding to all of your buttons might get a bit tiresome at a certain point, so here's a small tip: You can apply the padding globally, either across the entire application or just this specific Window, using a Style (more on styles later). Here's an example where we apply it to the Window, using the Window.Resources property:

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

This padding will now be applied to all your buttons, but you can of course override it by specifically defining the Padding property on a Button. Here's how all the buttons of this example look with the common padding:

Итоги

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

This article has been fully translated into the following languages: Is your preferred language not on the list? Click here to help us translate this article into your language!