Введение в WPF стили

Если Вы пришли из мира веб-разработки с использованием HTML и CSS, то с легкостью сможете понять, что XAML очень похож на HTML: используя теги вы определяете структуру интерфейса Вашего приложения. Вы можете добиться требуемого вида элементов управления с помощью встроенных стилей (например: Foreground, FontSize и др.) так же как при использовании локальных стилей в HTML.

Но что произойдет, когда Вы захотите использовать аналогичные размер текста и цвет для трех разных элементов TextBlock? Да, Вы можете скопировать данные свойства внутрь каждого элемента, но что, если этих элементов позже будет 50, разбросанных по нескольким Окнам? И вдруг понадобится изменить размер текста с 14 на 12?

В WPF введено стилизирование XAML, такое же как в CSS для HTML. Используя стили, становится возможным сгруппировать свойства и, назначить их для выбранных элементов или для всех элементов выбранного типа. В дополнение к этому, стили, как и в CSS могут наследоваться от других.

Базовый пример стиля

Мы будем детально разбираться с этой темой, но для начала я хотел бы Вам показать очень простой, базовый пример использования стилей:

<Window x:Class="WpfTutorialSamples.Styles.SimpleStyleSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="SimpleStyleSample" Height="200" Width="250">
    <StackPanel Margin="10">
        <StackPanel.Resources>
            <Style TargetType="TextBlock">
                <Setter Property="Foreground" Value="Gray" />
                <Setter Property="FontSize" Value="24" />
            </Style>
        </StackPanel.Resources>
        <TextBlock>Header 1</TextBlock>
        <TextBlock>Header 2</TextBlock>
        <TextBlock Foreground="Blue">Header 3</TextBlock>
    </StackPanel>
</Window>

В качестве ресурсов моего StackPanel я определил Style. Я использовал свойство TargetType, тем самым, говоря WPF, что этот стиль будет применен для всех элементов TextBlock в пределах StackPanel. Добавил в стиль два элемента Setter, которые используются для изменения свойств целевого элемента управления, в нашем случае: Foreground и FontSizeсвойства. Property - описывает, какое свойство будет изменяться, а Value - как именно изменится.

Обратите внимание на то, что последнее текстовое поле - синее, вместо установленного в стиле серого. Я сделал это специально, чтобы показать - пока элемент управления использует назначенный стиль, Вы спокойно можете переназначить его стиль локально - значения, объявленные напрямую в элементе будут доминировать над назначенным стилем.

Резюмируя

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