Нашли ошибку или опечатку? Выделите текст и нажмите

Поменять цветовую

гамму сайта?

Поменять
Обновления сайта
и новые разделы

Рекомендовать в Google +1

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

83

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

Темы

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

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

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

Темная тема в Metro
Светлая тема в Metro

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

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

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

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

Стандартные кисти Metro-приложений
Название Dark theme Light theme
AppBarBackgroundThemeBrush
#E5000000
#FFFFFFFF
AppBarBorderThemeBrush
#E5000000
#FFFFFFFF
AppBarItemBackgroundThemeBrush
#00FFFFFF
AppBarItemDisabledForegroundThemeBrush
#66FFFFFF
#66000000
AppBarItemForegroundThemeBrush
#FFFFFFFF
#FF000000
AppBarItemPointerOverBackgroundThemeBrush
#21FFFFFF
#3D000000
AppBarItemPointerOverForegroundThemeBrush
#FFFFFFFF
#FF000000
AppBarItemPressedForegroundThemeBrush
#FF000000
#FFFFFFFF
ApplicationForegroundThemeBrush
#DEFFFFFF
#DE000000
ApplicationPageBackgroundThemeBrush
#FF1D1D1D
#FFF4F4F4
ApplicationPointerOverForegroundThemeBrush
#FFFFFFFF
#73000000
ApplicationPressedForegroundThemeBrush
#FF5AB7E3
ApplicationSecondaryForegroundThemeBrush
#99FFFFFF
#99000000
BackButtonBackgroundThemeBrush
#00FFFFFF
BackButtonDisabledForegroundThemeBrush
#66FFFFFF
#66000000
BackButtonForegroundThemeBrush
#FFFFFFFF
#FF000000
BackButtonPointerOverBackgroundThemeBrush
#21FFFFFF
#3D000000
BackButtonPointerOverForegroundThemeBrush
#FFFFFFFF
#FF000000
BackButtonPressedForegroundThemeBrush
#FF000000
#FFFFFFFF
ButtonBackgroundThemeBrush
#00FFFFFF
#B3B6B6B6
ButtonBorderThemeBrush
#FFFFFFFF
#33000000
ButtonDisabledBackgroundThemeBrush
#00FFFFFF
#66CACACA
ButtonDisabledBorderThemeBrush
#66FFFFFF
#1A000000
ButtonDisabledForegroundThemeBrush
#66FFFFFF
#66000000
ButtonForegroundThemeBrush
#FFFFFFFF
#FF000000
ButtonPointerOverBackgroundThemeBrush
#21FFFFFF
#D1CDCDCD
ButtonPointerOverForegroundThemeBrush
#FFFFFFFF
#FF000000
ButtonPressedBackgroundThemeBrush
#FFFFFFFF
#FF000000
ButtonPressedForegroundThemeBrush
#FF000000
#FFFFFFFF
CheckBoxBackgroundThemeBrush
#CCFFFFFF
CheckBoxBorderThemeBrush
#CCFFFFFF
#45000000
CheckBoxContentDisabledForegroundThemeBrush
#66FFFFFF
#66000000
CheckBoxContentForegroundThemeBrush
#FFFFFFFF
#FF000000
CheckBoxDisabledBackgroundThemeBrush
#66FFFFFF
#66CACACA
CheckBoxDisabledBorderThemeBrush
#66FFFFFF
#66000000
CheckBoxDisabledForegroundThemeBrush
#66000000
CheckBoxForegroundThemeBrush
#FF000000
CheckBoxPointerOverBackgroundThemeBrush
#DEFFFFFF
CheckBoxPointerOverBorderThemeBrush
#DEFFFFFF
#70000000
CheckBoxPointerOverForegroundThemeBrush
#FF000000
CheckBoxPressedBackgroundThemeBrush
#FFFFFFFF
#FF000000
CheckBoxPressedBorderThemeBrush
#FFFFFFFF
#FF000000
CheckBoxPressedForegroundThemeBrush
#FF000000
#FFFFFFFF
ComboBoxArrowDisabledForegroundThemeBrush
#66FFFFFF
#66000000
ComboBoxArrowForegroundThemeBrush
#FF000000
ComboBoxArrowPressedForegroundThemeBrush
#FF000000
ComboBoxBackgroundThemeBrush
#CCFFFFFF
ComboBoxBorderThemeBrush
#CCFFFFFF
#45000000
ComboBoxDisabledBackgroundThemeBrush
#00FFFFFF
#66CACACA
ComboBoxDisabledBorderThemeBrush
#66FFFFFF
#66000000
ComboBoxDisabledForegroundThemeBrush
#66FFFFFF
#66000000
ComboBoxFocusedBackgroundThemeBrush
#FFFFFFFF
ComboBoxFocusedBorderThemeBrush
#FFFFFFFF
#70000000
ComboBoxFocusedForegroundThemeBrush
#FFFFFFFF
ComboBoxForegroundThemeBrush
#FF000000
ComboBoxItemDisabledForegroundThemeBrush
#66000000
ComboBoxItemPointerOverBackgroundThemeBrush
#21000000
ComboBoxItemPointerOverForegroundThemeBrush
#FF000000
ComboBoxItemPressedBackgroundThemeBrush
#FFD3D3D3
ComboBoxItemPressedForegroundThemeBrush
#FF000000
ComboBoxItemSelectedBackgroundThemeBrush
#FF4617B4
ComboBoxItemSelectedDisabledBackgroundThemeBrush
#8C000000
ComboBoxItemSelectedDisabledForegroundThemeBrush
#99FFFFFF
ComboBoxItemSelectedForegroundThemeBrush
#FFFFFFFF
ComboBoxItemSelectedPointerOverBackgroundThemeBrush
#FF5F37BE
ComboBoxPointerOverBackgroundThemeBrush
#DEFFFFFF
ComboBoxPointerOverBorderThemeBrush
#DEFFFFFF
#70000000
ComboBoxPopupBackgroundThemeBrush
#FFFFFFFF
ComboBoxPopupBorderThemeBrush
#FF212121
ComboBoxPopupForegroundThemeBrush
#FF000000
ComboBoxPressedBackgroundThemeBrush
#FFFFFFFF
ComboBoxPressedBorderThemeBrush
#FFFFFFFF
#A3000000
ComboBoxPressedForegroundThemeBrush
#FF000000
ComboBoxPressedHighlightThemeBrush
#FFD3D3D3
ComboBoxSelectedBackgroundThemeBrush
#FF4617B4
ComboBoxSelectedPointerOverBackgroundThemeBrush
#FF5F37BE
DefaultTextForegroundThemeBrush
#FFFFFFFF
#FF000000
FlipViewButtonBackgroundThemeBrush
#59D5D5D5
FlipViewButtonBorderThemeBrush
#59D5D5D5
FlipViewButtonForegroundThemeBrush
#99000000
FlipViewButtonPointerOverBackgroundThemeBrush
#F0D7D7D7
FlipViewButtonPointerOverBorderThemeBrush
#9EC1C1C1
FlipViewButtonPointerOverForegroundThemeBrush
#FF000000
FlipViewButtonPressedBackgroundThemeBrush
#BD292929
FlipViewButtonPressedBorderThemeBrush
#BD292929
FlipViewButtonPressedForegroundThemeBrush
#FFFFFFFF
FocusVisualBlackStrokeThemeBrush
#FF000000
FocusVisualWhiteStrokeThemeBrush
#FFFFFFFF
HyperlinkButtonBackgroundThemeBrush
#00FFFFFF
HyperlinkButtonBorderThemeBrush
#00FFFFFF
HyperlinkDisabledThemeBrush
#66FFFFFF
#66000000
HyperlinkForegroundThemeBrush
#FF9C72FF
#FF4F1ACB
HyperlinkPointerOverForegroundThemeBrush
#CC9C72FF
#CC4F1ACB
HyperlinkPressedForegroundThemeBrush
#999C72FF
#994F1ACB
ListBoxBackgroundThemeBrush
#CCFFFFFF
ListBoxBorderThemeBrush
#00FFFFFF
#45000000
ListBoxDisabledForegroundThemeBrush
#66FFFFFF
#66000000
ListBoxFocusBackgroundThemeBrush
#FFFFFFFF
ListBoxForegroundThemeBrush
#FF000000
ListBoxItemDisabledForegroundThemeBrush
#66FFFFFF
#66000000
ListBoxItemPointerOverBackgroundThemeBrush
#21000000
ListBoxItemPointerOverForegroundThemeBrush
#FF000000
ListBoxItemPressedBackgroundThemeBrush
#FFD3D3D3
ListBoxItemPressedForegroundThemeBrush
#FF000000
ListBoxItemSelectedBackgroundThemeBrush
#FF4617B4
ListBoxItemSelectedDisabledBackgroundThemeBrush
#66FFFFFF
#8C000000
ListBoxItemSelectedDisabledForegroundThemeBrush
#99000000
#99FFFFFF
ListBoxItemSelectedForegroundThemeBrush
#FFFFFFFF
ListBoxItemSelectedPointerOverBackgroundThemeBrush
#FF5F37BE
ListViewItemCheckHintThemeBrush
#FFFFFFFF
#FF4617B4
ListViewItemCheckSelectingThemeBrush
#FFFFFFFF
#FF4617B4
ListViewItemCheckThemeBrush
#FFFFFFFF
ListViewItemDragBackgroundThemeBrush
#994617B4
ListViewItemDragForegroundThemeBrush
#FFFFFFFF
ListViewItemFocusBorderThemeBrush
#FFFFFFFF
#FF000000
ListViewItemOverlayBackgroundThemeBrush
#A6000000
ListViewItemOverlayForegroundThemeBrush
#FFFFFFFF
ListViewItemOverlaySecondaryForegroundThemeBrush
#99FFFFFF
ListViewItemPlaceholderBackgroundThemeBrush
#FF3D3D3D
ListViewItemPointerOverBackgroundThemeBrush
#4DFFFFFF
#4D000000
ListViewItemSelectedBackgroundThemeBrush
#FF4617B4
ListViewItemSelectedPointerOverBackgroundThemeBrush
#FF5F37BE
ListViewItemSelectedPointerOverBorderThemeBrush
#FF5F37BE
ProgressBarBackgroundThemeBrush
#59FFFFFF
#30000000
ProgressBarBorderThemeBrush
#00FFFFFF
ProgressBarForegroundThemeBrush
#FF5B2EC5
#FF4617B4
ProgressBarIndeterminateForegroundThemeBrush
#FF8A57FF
#FF4617B4
RadioButtonBackgroundThemeBrush
#CCFFFFFF
RadioButtonBorderThemeBrush
#CCFFFFFF
#45000000
RadioButtonContentDisabledForegroundThemeBrush
#66FFFFFF
#66000000
RadioButtonContentForegroundThemeBrush
#FFFFFFFF
#FF000000
RadioButtonDisabledBackgroundThemeBrush
#66FFFFFF
#66CACACA
RadioButtonDisabledBorderThemeBrush
#66FFFFFF
#66000000
RadioButtonDisabledForegroundThemeBrush
#66000000
RadioButtonForegroundThemeBrush
#FF000000
RadioButtonPointerOverBackgroundThemeBrush
#DEFFFFFF
RadioButtonPointerOverBorderThemeBrush
#DEFFFFFF
#70000000
RadioButtonPointerOverForegroundThemeBrush
#FF000000
RadioButtonPressedBackgroundThemeBrush
#FFFFFFFF
#FF000000
RadioButtonPressedBorderThemeBrush
#FFFFFFFF
#FF000000
RadioButtonPressedForegroundThemeBrush
#FF000000
#FFFFFFFF
RepeatButtonBorderThemeBrush
#FFFFFFFF
#33000000
RepeatButtonDisabledBackgroundThemeBrush
#00FFFFFF
#66CACACA
RepeatButtonDisabledBorderThemeBrush
#66FFFFFF
#1A000000
RepeatButtonDisabledForegroundThemeBrush
#66FFFFFF
#66000000
RepeatButtonForegroundThemeBrush
#FFFFFFFF
#FF000000
RepeatButtonPointerOverBackgroundThemeBrush
#21FFFFFF
#D1CDCDCD
RepeatButtonPointerOverForegroundThemeBrush
#FFFFFFFF
#FF000000
RepeatButtonPressedBackgroundThemeBrush
#FFFFFFFF
#FF000000
RepeatButtonPressedForegroundThemeBrush
#FF000000
#FFFFFFFF
ScrollBarButtonForegroundThemeBrush
#99000000
ScrollBarButtonPointerOverBackgroundThemeBrush
#FFDADADA
ScrollBarButtonPointerOverBorderThemeBrush
#FFDADADA
ScrollBarButtonPointerOverForegroundThemeBrush
#FF000000
ScrollBarButtonPressedBackgroundThemeBrush
#99000000
ScrollBarButtonPressedBorderThemeBrush
#99000000
ScrollBarButtonPressedForegroundThemeBrush
#FFFFFFFF
ScrollBarPanningBackgroundThemeBrush
#FFCDCDCD
ScrollBarPanningBorderThemeBrush
#7D9A9A9A
ScrollBarThumbBackgroundThemeBrush
#FFCDCDCD
ScrollBarThumbBorderThemeBrush
#3B555555
ScrollBarThumbPointerOverBackgroundThemeBrush
#FFDADADA
ScrollBarThumbPointerOverBorderThemeBrush
#6BB7B7B7
ScrollBarThumbPressedBackgroundThemeBrush
#99000000
ScrollBarThumbPressedBorderThemeBrush
#ED555555
ScrollBarTrackBackgroundThemeBrush
#59D5D5D5
ScrollBarTrackBorderThemeBrush
#59D5D5D5
SliderBorderThemeBrush
#00FFFFFF
SliderDisabledBorderThemeBrush
#00FFFFFF
SliderThumbBackgroundThemeBrush
#FFFFFFFF
#FF000000
SliderThumbBorderThemeBrush
#FFFFFFFF
#FF000000
SliderThumbDisabledBackgroundThemeBrush
#FF7E7E7E
#FF929292
SliderThumbPointerOverBackgroundThemeBrush
#FFFFFFFF
#FF000000
SliderThumbPointerOverBorderThemeBrush
#FFFFFFFF
#FF000000
SliderThumbPressedBackgroundThemeBrush
#FFFFFFFF
#FF000000
SliderThumbPressedBorderThemeBrush
#FFFFFFFF
#FF000000
SliderTickMarkInlineBackgroundThemeBrush
#FF000000
#FFFFFFFF
SliderTickMarkInlineDisabledForegroundThemeBrush
#FF000000
#FFFFFFFF
SliderTickmarkOutsideBackgroundThemeBrush
#80FFFFFF
#80000000
SliderTickMarkOutsideDisabledForegroundThemeBrush
#80FFFFFF
#80000000
SliderTrackBackgroundThemeBrush
#29FFFFFF
#1A000000
SliderTrackDecreaseBackgroundThemeBrush
#FF5B2EC5
#FF4617B4
SliderTrackDecreaseDisabledBackgroundThemeBrush
#1FFFFFFF
#1C000000
SliderTrackDecreasePointerOverBackgroundThemeBrush
#FF724BCD
#FF5F37BE
SliderTrackDecreasePressedBackgroundThemeBrush
#FF8152EF
#FF7241E4
SliderTrackDisabledBackgroundThemeBrush
#29FFFFFF
#1A000000
SliderTrackPointerOverBackgroundThemeBrush
#46FFFFFF
#26000000
SliderTrackPressedBackgroundThemeBrush
#59FFFFFF
#33000000
TextBoxBackgroundThemeBrush
#FFFFFFFF
TextBoxBorderThemeBrush
#FFFFFFFF
#A3000000
TextBoxButtonBackgroundThemeBrush
#00FFFFFF
TextBoxButtonBorderThemeBrush
#00FFFFFF
TextBoxButtonForegroundThemeBrush
#FF000000
TextBoxButtonPointerOverBackgroundThemeBrush
#FFDEDEDE
TextBoxButtonPointerOverBorderThemeBrush
#00FFFFFF
TextBoxButtonPointerOverForegroundThemeBrush
#FF000000
TextBoxButtonPressedBackgroundThemeBrush
#FF000000
TextBoxButtonPressedBorderThemeBrush
#00FFFFFF
TextBoxButtonPressedForegroundThemeBrush
#FFFFFFFF
TextBoxDisabledBackgroundThemeBrush
#00FFFFFF
#66CACACA
TextBoxDisabledBorderThemeBrush
#66FFFFFF
#26000000
TextBoxDisabledForegroundThemeBrush
#FF666666
TextBoxForegroundThemeBrush
#FF000000
ThumbBackgroundThemeBrush
#FFCDCDCD
ThumbBorderThemeBrush
#3B555555
ThumbPointerOverBackgroundThemeBrush
#FFDADADA
ThumbPointerOverBorderThemeBrush
#6BB7B7B7
ThumbPressedBackgroundThemeBrush
#99000000
ThumbPressedBorderThemeBrush
#ED555555
ToggleButtonBackgroundThemeBrush
#00FFFFFF
ToggleButtonBorderThemeBrush
#FFFFFFFF
#FF000000
ToggleButtonCheckedBackgroundThemeBrush
#FFFFFFFF
#FF000000
ToggleButtonCheckedBorderThemeBrush
#FFFFFFFF
#FF000000
ToggleButtonCheckedDisabledBackgroundThemeBrush
#66FFFFFF
#66000000
ToggleButtonCheckedDisabledForegroundThemeBrush
#FF000000
#FFFFFFFF
ToggleButtonCheckedForegroundThemeBrush
#FF000000
#FFFFFFFF
ToggleButtonCheckedPointerOverBackgroundThemeBrush
#99FFFFFF
#99000000
ToggleButtonCheckedPointerOverBorderThemeBrush
#99FFFFFF
#99000000
ToggleButtonCheckedPressedBackgroundThemeBrush
#00FFFFFF
ToggleButtonCheckedPressedBorderThemeBrush
#FFFFFFFF
#FF000000
ToggleButtonCheckedPressedForegroundThemeBrush
#FFFFFFFF
#FF000000
ToggleButtonDisabledBorderThemeBrush
#66FFFFFF
#66000000
ToggleButtonDisabledForegroundThemeBrush
#66FFFFFF
#66000000
ToggleButtonForegroundThemeBrush
#FFFFFFFF
#FF000000
ToggleButtonPointerOverBackgroundThemeBrush
#21FFFFFF
#21000000
ToggleButtonPressedBackgroundThemeBrush
#FFFFFFFF
#FF000000
ToggleButtonPressedForegroundThemeBrush
#FF000000
#FFFFFFFF
ToggleSwitchCurtainBackgroundThemeBrush
#FF5729C1
#FF4617B4
ToggleSwitchCurtainDisabledBackgroundThemeBrush
#00FFFFFF
ToggleSwitchCurtainPointerOverBackgroundThemeBrush
#FF6E46CA
#FF5F37BE
ToggleSwitchCurtainPressedBackgroundThemeBrush
#FF7E4FEC
#FF7241E4
ToggleSwitchDisabledForegroundThemeBrush
#66FFFFFF
#66000000
ToggleSwitchForegroundThemeBrush
#FFFFFFFF
#FF000000
ToggleSwitchHeaderDisabledForegroundThemeBrush
#66FFFFFF
#66000000
ToggleSwitchHeaderForegroundThemeBrush
#FFFFFFFF
#FF000000
ToggleSwitchOuterBorderBorderThemeBrush
#59FFFFFF
#59000000
ToggleSwitchOuterBorderDisabledBorderThemeBrush
#33FFFFFF
#33000000
ToggleSwitchThumbBackgroundThemeBrush
#FFFFFFFF
#FF000000
ToggleSwitchThumbBorderThemeBrush
#FFFFFFFF
#FF000000
ToggleSwitchThumbDisabledBackgroundThemeBrush
#FF7E7E7E
#FF929292
ToggleSwitchThumbDisabledBorderThemeBrush
#FF7E7E7E
#FF929292
ToggleSwitchThumbPointerOverBackgroundThemeBrush
#FFFFFFFF
#FF000000
ToggleSwitchThumbPointerOverBorderThemeBrush
#FFFFFFFF
#FF000000
ToggleSwitchThumbPressedBackgroundThemeBrush
#FFFFFFFF
#FF000000
ToggleSwitchThumbPressedForegroundThemeBrush
#FFFFFFFF
#FF000000
ToggleSwitchTrackBackgroundThemeBrush
#42FFFFFF
#59000000
ToggleSwitchTrackBorderThemeBrush
#00FFFFFF
ToggleSwitchTrackDisabledBackgroundThemeBrush
#1FFFFFFF
#1F000000
ToggleSwitchTrackPointerOverBackgroundThemeBrush
#4AFFFFFF
#4A000000
ToggleSwitchTrackPressedBackgroundThemeBrush
#59FFFFFF
#42000000
ToolTipBackgroundThemeBrush
#FFFFFFFF
ToolTipBorderThemeBrush
#FF808080
ToolTipForegroundThemeBrush
#FF666666

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

Кнопки

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

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

Стандартные кнопки Metro

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

Пройди тесты