Елемент керування Button

Ніякий графічний інтерфейс не буде повним без управління кнопками, тому, звичайно, WPF має хороший склад, і так само, як і всі інші елементи керування, він дуже гнучкий і дозволить вам досягти майже все. Але давайте почнемо з деяких базових прикладів.

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

Подібно до багатьох інших елементів керування WPF, кнопка може відображатися просто шляхом додавання тега Button до вашого вікна. Якщо ви вставите текст між тегами (або іншим елементом керування), він буде діяти як вміст кнопки:

<Button>Hello, world!</Button>

Досить просто, правда? Звичайно, кнопка насправді нічого ще не робить, але якщо ви вкажете на неї, ви виявите, що вона проявляється з гарним ефектом наведення прямо з коробки. Але давайте змусимо кнопку робити щось, підписавшись на її подію Натисніть (більше інформації про цей процес можна знайти у статті про підписку на події в XAML):

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

У коді позаду, вам знадобиться відповідний метод для обробки кліку:

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

Тепер у вас є дуже проста кнопка, і коли ви натискаєте на неї, з'явиться повідомлення!

Форматований вміст

Внутрішньо простий текст всередині вмісту кнопки перетворюється на елемент керування TextBlock, що також означає, що ви можете керувати тими ж самими аспектами форматування тексту. Ви можете знайти декілька властивостей на елементі "Кнопка" для цього, включаючи (але не обмежуючись) Foreground , Background, FontWeight тощо. Іншими словами, дуже просто змінити форматування тексту всередині кнопки управління:

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

Встановивши ці властивості безпосередньо на кнопку, ви, звичайно, обмежуєтеся застосуванням одного і того ж форматування для всього вмісту, але якщо це недостатньо, просто читайте далі для ще більш розширеного форматування вмісту.

Кнопки з розширеним вмістом

Ми вже говорили про це кілька разів, але однією з дуже крутих речей у WPF є можливість замінювати простий текст всередині елемента керування іншими елементами керування WPF. Це також означає, що вам не потрібно обмежувати свої кнопки простим текстом, відформатованим таким же чином – ви можете просто додати кілька текстових елементів керування з різним форматуванням. Кнопка WPF підтримує лише один прямий дочірній елемент керування, але ви можете просто зробити його панеллю, яка потім розміщуватиме стільки елементів керування, скільки вам потрібно. Ви можете використовувати це для створення кнопок із різними типами форматування:

<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 пікселів у верхній і нижній частині. Але застосування периферійних додатків до всіх ваших кнопок може стати трохи надокучливим у певному місці, тому наведемо невелику підказку: Ви можете застосувати оббивку глобально, або в усьому додатку, або просто у цьому спеціальному вікні, використовуючи стиль (більше на стилі пізніше). Ось приклад, де ми застосовуємо його до вікна, використовуючи властивість Window.Resources :

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

Тепер ця оббивка буде застосована до всіх ваших кнопок, але ви, звичайно, можете перекрити її, конкретно визначивши властивість "Накладання" на кнопці. Ось як виглядають всі кнопки цього прикладу із загальною оббивкою:

Підсумок

Як ви можете бачити з цієї статті, використання кнопок в рамках WPF дуже просте, і ви можете налаштувати цей важливий елемент управління майже нескінченно.