Главная » C#, Windows Runtime, XAML, Разработка для Windows 8 » Стили и ресурсы Metro

0

Стили

Понятие стиля

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

Рассмотрим небольшой пример, демонстрирующий создание четырех кнопок.

<StackPanel>

<Button Width="100" Height="50" Background="Green"

Content="Button 1" Margin="5" FontFamily="Arial" FontSize="12" FontWeight="Bold"

Foreground="Blue" BorderThickness="3">

</Button>

<Button Width="100" Height="50" Background="Green"

Content="Button 2" Margin="5" FontFamily="Arial" FontSize="12" FontWeight="Bold"

Foreground="Blue" BorderThickness="3">

</Button>

<Button Width="100" Height="50" Background="Green"

Content="Button 3" Margin="5" FontFamily="Arial" FontSize="12" FontWeight="Bold"

Foreground="Blue" BorderThickness="3">

</Button>

<Button Width="100" Height="50" Background="Green"

Content="Button 4" Margin="5" FontFamily="Arial" FontSize="12" FontWeight="Bold"

Foreground="Blue" BorderThickness="3">

</Button>

</StackPanel>

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

Для  выделения общих  свойств в    отдельный  стиль  в    XAML   используется специальный  элемент  Style.  Поскольку  он  не   должен   входить   в    дерево элементов,  а  лишь  задает набор свойств  группы элементов,  то  располагать его следует внутри ресурсов  приложения, страницы или отдельного элемента (в зависимости от области применения). О ресурсах мы поговорим в следующем разделе, а сейчас продемонстрируем работу элемента Style на нашем примере. Для этого определим следующий блок кода сразу после открывающего элемента Page.

<Page.Resources>

<Style x:Key="buttonStyle" TargetType="Button">

<Setter Property="Background" Value="Green"></Setter>

<Setter Property="Margin" Value="5"></Setter>

<Setter Property="FontFamily" Value="Arial"></Setter>

<Setter Property="FontSize" Value="12"></Setter>

<Setter Property="FontWeight" Value="Bold"></Setter>

<Setter Property="Foreground" Value="Blue"></Setter>

<Setter Property="BorderThickness" Value="3"></Setter>

</Style>

</Page.Resources>

Как видите, чтобы задать стиль, необходимо указать ключ и тип элементов, для которых будет применяться стиль. Ключ используется для поиска необходимого стиля, а TargetType определяет, к  каким  элементам применим стиль. Далее с  помощью  набора  элементов  Setter  мы  перечислили  все  свойства   и  их значения. Код XAML нашего интерфейса выглядит следующим образом.

<StackPanel>

<Button Width="100" Height="50"

Style="{StaticResource buttonStyle}" Content="Button 1">

</Button>

<Button Width="100" Height="50"

Style="{StaticResource buttonStyle}" Content="Button 2">

</Button>

<Button Width="100" Height="50"

Style="{StaticResource buttonStyle}" Content="Button 3">

</Button>

<Button Width="100" Height="50"

Style="{StaticResource buttonStyle}" Content="Button 4">

</Button>

</StackPanel>

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

<Page.Resources>

<Style TargetType="Button">

<Setter Property="Background" Value="Green"></Setter>

<Setter Property="Margin" Value="5"></Setter>

<Setter Property="FontFamily" Value="Arial"></Setter>

<Setter Property="FontSize" Value="12"></Setter>

<Setter Property="FontWeight" Value="Bold"></Setter>

<Setter Property="Foreground" Value="Blue"></Setter>

<Setter Property="BorderThickness" Value="3"></Setter>

</Style>

</Page.Resources>

<Grid Background="{StaticResource ApplicationPageBackgroundBrush}">

<StackPanel>

<Button Width="100" Height="50" Content="Button 1">

</Button>

<Button Width="100" Height="50" Content="Button 2">

</Button>

<Button Width="100" Height="50" Content="Button 3">

</Button>

<Button Width="100" Height="50" Content="Button 4">

</Button>

</StackPanel>

</Grid>

Стили представляют собой очень мощный механизм, позволяющий сделать не только Ваше приложение в едином формате, но и придать общность большинству запускаемых приложений. Чтобы у разработчика была возможность создавать страницы,  придерживаясь  единого стиля,  Visual Studio включает  в   любой проект  файл   StandardStyles.xaml,  который  определяет  набор  стандартных стилей  на  все  случаи  жизни.  Так,  попробуйте  модифицировать код  выше, прописав кнопкам стиль BackButtonStyle.

<StackPanel>

<Button Width="100" Height="50"

Content="Button 1" Style="{StaticResource BackButtonStyle}">

</Button>

<Button Width="100" Height="50"

Content="Button 2" Style="{StaticResource BackButtonStyle}">

</Button>

<Button Width="100" Height="50"

Content="Button 3" Style="{StaticResource BackButtonStyle}">

</Button>

<Button Width="100" Height="50"

Content="Button 4" Style="{StaticResource BackButtonStyle}">

</Button>

</StackPanel>

В результате работы кода на экране появится следующая картина.

Рис. 3.1.

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

BasedOn-стили

XAML в Windows Runtime поддерживает и BasedOn-стили. Это позволяет задать общие стили применительно к базовым классам для общей группы элементов управления (или для конкретного типа элементов  управления) и определить дополнительные стили путем наследования. Ниже приведен пример BasedOn- стиля.

<Style x:Key="baseStyle" TargetType="Button" >

<Setter Property="Width" Value="100"></Setter>

</Style>

<Style x:Key="btnStyleRus"

BasedOn="{StaticResource baseStyle}"  TargetType="Button">

<Setter Property="Foreground" Value="Blue"></Setter>

<Setter Property="Content" Value="Кнопка"></Setter>

</Style>

<Style x:Key="btnStyle"

BasedOn="{StaticResource baseStyle}"  TargetType="Button">

<Setter Property="Foreground" Value="Green"></Setter>

<Setter Property="Content" Value="Button"></Setter>

</Style>

Пример не совсем удачный (локализировать приложения таким образом нельзя),

однако общую идею он демонстрирует.

Сергей Лутай, Сергей Байдачный, Windows 8 для C# разработчиков

По теме:

  • Комментарии