Стандартные стили и ресурсы.

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

Темы

Темы приложения позволяют менять общий цветовой набор всех элементов управления. Фактически они играют такую же роль, как, например, темы для приложений WPF. В Metro существуют две предопределенные темы – темная и светлая. Для переключения между ними используется свойство Application.RequestedTheme, которое можно задать в файле App.xaml:

<Application
    x:Class="App1.App"
    
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:localData="using:App1.Data"
    RequestedTheme="Dark">
    ...

По умолчанию используется темная тема. На следующих рисунках вы можете увидеть различие между темами на примере базового приложения Grid Application:

Стандартные кисти

Как видите на предыдущих рисунках, для разных тем меняется фон приложения. Это достигается путем установки для корневого элемента Grid цвета фона:

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
   ...

Кисть ApplicationPageBackgroundThemeBrush является стандартной и в темной теме имеет черный цвет, а в светлой – белый. Подобных кистей в Metro довольно много и они задают цветовую схему элементов управления. В следующей таблице представлены все стандартные кисти:

Изменяя эти кисти, можно создавать собственные цветовые темы для приложения (это демонстрировалось в приложении AutoShop, когда мы заменяли фон элемента ListBox).

Кнопки

В словаре ресурсов StandardStyles.xaml представлен стиль AppBarButtonStyle, который используется для стилизации кнопок, которые, как правило, используются на панели приложения AppBar. Также, в этом словаре представлено множество стилей для этих кнопок, которые изначально закомментированы. Эти стили создают разное представление за счет использования разных значений свойства Content, в котором передается специальный код шрифта Segoe UI.

На рисунке ниже показаны все стили для кнопок AppBar, которые вы можете использовать в своем приложении:

Используя этот рисунок довольно просто будет найти стиль определенной кнопки в словаре ресурсов StandardStyles.xaml и использовать его в своем приложении.