Стандартные стили и ресурсы
83WPF --- Периферия WPF --- Windows 8 Metro - Стандартные стили и ресурсы
Приложения 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:
Стандартные кисти
Как видите на предыдущих рисунках, для разных тем меняется фон приложения. Это достигается путем установки для корневого элемента Grid цвета фона:
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
...
Кисть ApplicationPageBackgroundThemeBrush является стандартной и в темной теме имеет черный цвет, а в светлой - белый. Подобных кистей в 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, которые вы можете использовать в своем приложении:
Используя этот рисунок довольно просто будет найти стиль определенной кнопки в словаре ресурсов StandardStyles.xaml и использовать его в своем приложении.