43、XAML high contrast style
在这个例子之前,我没使用过 win8 的高对比度的功能。一般在这个功能下,把应用的背景大部分都变成黑色,内容变成高亮显示。猜测
这个功能是供用户在昏暗的环境下使用的功能。
设置方法是:
1)在超级按钮栏中选中 “设置” ,然后选择底部的 “ 更改电脑设置”:
2)然后在 “轻松使用” 栏中,打开 “高对比度” 按钮:
3)打开之后效果:
开始菜单的显示效果,一切都变高亮了 有木有:
1、High Contract via XAML :
下面这个实例演示你怎样使用 ResourceDictionary.ThemesDictionary API 来声明只会被应用在高对比模式的上下文 中的 Styles。
<StackPanel Margin="20,0,0,0" Grid.Column="1"> <StackPanel.Resources> <ResourceDictionary> <ResourceDictionary.ThemeDictionaries> <ResourceDictionary x:Key="Default"> <Style TargetType="Button" > <Setter Property="Background" Value="Red"/> <Setter Property="Foreground" Value="White"/> <Setter Property="BorderBrush" Value="Blue" /> </Style> </ResourceDictionary> <!--没有设置样式,则不会运用. 默认运用上面 Default 的样式--> <ResourceDictionary x:Key="HighContrastBlack"/> <ResourceDictionary x:Key="HighContrastWhite"/> <ResourceDictionary x:Key="HighContrastCustom"/> </ResourceDictionary.ThemeDictionaries> </ResourceDictionary> </StackPanel.Resources> <Button >High contrast aware</Button> </StackPanel>
显示截图:
默认:
鼠标悬停在按钮上时:
2、Hight contrast using system colors via XAML :
本实例演示怎样使用这个 ResourceDictionary.ThemesDictionary API ,定义系统颜色关键字来实现一个自定
义的高对比度兼容复杂的视觉效果的按钮样式,。
第一个,运用 XAML 背景图像的自定义的按钮,不是高对比度敏感的:
显示效果:
默认:
鼠标悬停时:
页面中的 XAML :
<Button Background="Red" BorderBrush="Black" HorizontalAlignment="Center"> <Grid> <Ellipse Width="200" Height="200" Stroke="Black" Fill="Blue" StrokeThickness="2"/> <Ellipse Width="150" Height="150" Stroke="Black" Fill="Green" StrokeThickness="2"/> <Ellipse Width="100" Height="100" Stroke="Black" Fill="Yellow" StrokeThickness="2"/> <Ellipse Width="50" Height="50" Stroke="Black" Fill="White" StrokeThickness="2"/> </Grid> </Button>
第二个,Background 和 BorderBrush 使用系统命名的颜色刷子:
在关闭高对比度情况下,显示效果:
默认:
鼠标悬停时:
在开启高对比度情况下:
默认:
鼠标悬停:
页面中的 XAML :
<Button Background="{StaticResource SystemColorButtonFaceBrush}" BorderBrush="{StaticResource SystemColorButtonTextBrush}" HorizontalAlignment="Center"> <Grid> <Ellipse Width="200" Height="200" Stroke="Black" Fill="Blue" StrokeThickness="2"/> <Ellipse Width="150" Height="150" Stroke="Black" Fill="Green" StrokeThickness="2"/> <Ellipse Width="100" Height="100" Stroke="Black" Fill="Yellow" StrokeThickness="2"/> <Ellipse Width="50" Height="50" Stroke="Black" Fill="White" StrokeThickness="2"/> </Grid> </Button>
第三个按钮,是高对比度敏感的,使用高对比度的 XAML 的内容
1)关闭高对比度的 正常情况下, 显示效果截图:
默认:
鼠标悬停:
2)在开启高对比度时的显示效果:
正常情况下:
默认:
鼠标悬停下:
3)页面中的 XAML :
<StackPanel Margin="20,0,0,0" Grid.Column="2"> <StackPanel.Resources> <ResourceDictionary> <ResourceDictionary.ThemeDictionaries> <ResourceDictionary x:Key="Default"> <SolidColorBrush x:Key="TargetBackground" Color="Red"/> <SolidColorBrush x:Key="TargetBorderBrush" Color="Black"/> <SolidColorBrush x:Key="Circle4Fill" Color="Blue"/> <SolidColorBrush x:Key="Circle3Fill" Color="Green"/> <SolidColorBrush x:Key="Circle2Fill" Color="Yellow"/> <SolidColorBrush x:Key="Circle1Fill" Color="White"/> <SolidColorBrush x:Key="CircleStroke" Color="Black"/> </ResourceDictionary> <ResourceDictionary x:Key="HighContrastBlack"> <SolidColorBrush x:Key="TargetBackground" Color="Black"/> <SolidColorBrush x:Key="TargetBorderBrush" Color="White"/> <SolidColorBrush x:Key="Circle4Fill" Color="Black"/> <SolidColorBrush x:Key="Circle3Fill" Color="Black"/> <SolidColorBrush x:Key="Circle2Fill" Color="Black"/> <SolidColorBrush x:Key="Circle1Fill" Color="Black"/> <SolidColorBrush x:Key="CircleStroke" Color="White"/> </ResourceDictionary> <ResourceDictionary x:Key="HighContrastWhite"> <SolidColorBrush x:Key="TargetBackground" Color="White"/> <SolidColorBrush x:Key="TargetBorderBrush" Color="Black"/> <SolidColorBrush x:Key="Circle4Fill" Color="White"/> <SolidColorBrush x:Key="Circle3Fill" Color="White"/> <SolidColorBrush x:Key="Circle2Fill" Color="White"/> <SolidColorBrush x:Key="Circle1Fill" Color="White"/> <SolidColorBrush x:Key="CircleStroke" Color="Black"/> </ResourceDictionary> <ResourceDictionary x:Key="HighContrastCustom"> <SolidColorBrush x:Key="TargetBackground" Color="{StaticResource SystemColorButtonFaceColor}"/> <SolidColorBrush x:Key="TargetBorderBrush" Color="{StaticResource SystemColorButtonTextColor}"/> <SolidColorBrush x:Key="Circle4Fill" Color="{StaticResource SystemColorHotlightColor}"/> <SolidColorBrush x:Key="Circle3Fill" Color="{StaticResource SystemColorHotlightColor}"/> <SolidColorBrush x:Key="Circle2Fill" Color="{StaticResource SystemColorHotlightColor}"/> <SolidColorBrush x:Key="Circle1Fill" Color="{StaticResource SystemColorHotlightColor}"/> <SolidColorBrush x:Key="CircleStroke" Color="{StaticResource SystemColorHighlightTextColor}"/> </ResourceDictionary> </ResourceDictionary.ThemeDictionaries> </ResourceDictionary> </StackPanel.Resources> <Button Background="{StaticResource TargetBackground}" BorderBrush="{StaticResource TargetBorderBrush}" HorizontalAlignment="Center"> <Grid> <Ellipse Width="200" Height="200" Stroke="{StaticResource CircleStroke}"
、 Fill="{StaticResource Circle4Fill}" StrokeThickness="2"/> <Ellipse Width="150" Height="150" Stroke="{StaticResource CircleStroke}"
Fill="{StaticResource Circle3Fill}" StrokeThickness="2"/> <Ellipse Width="100" Height="100" Stroke="{StaticResource CircleStroke}"
Fill="{StaticResource Circle2Fill}" StrokeThickness="2"/> <Ellipse Width="50" Height="50" Stroke="{StaticResource CircleStroke}"
Fill="{StaticResource Circle1Fill}" StrokeThickness="2"/> </Grid> </Button> </StackPanel>
3、High contrast using system colors via code :
本实例演示怎样侦测高对比度,并且在代码中运行系统的颜色。
在关闭 “高对比度” 功能时的显示效果:
默认情况下:
鼠标悬停时:
在打开 “高对比度” 功能时的显示效果:
默认:
鼠标悬停时:
首先,在 HighContrast 命名空间中声明一个继承自 Button 类的 TargetButton 分部类,并与 XAML 页面组合成这个 TargetButton 类。
页面中的 XAML :
<Button x:Class="HighContrast.TargetButton" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400"> <Grid> <Ellipse x:Name="Circle4" Width="200" Height="200" StrokeThickness="2"/> <Ellipse x:Name="Circle3" Width="150" Height="150" StrokeThickness="2"/> <Ellipse x:Name="Circle2" Width="100" Height="100" StrokeThickness="2"/> <Ellipse x:Name="Circle1" Width="50" Height="50" StrokeThickness="2"/> </Grid> </Button>
对于的 C# 页面:
namespace HighContrast { partial class TargetButton : Button { public TargetButton() { InitializeComponent(); } protected override void OnApplyTemplate() { base.OnApplyTemplate(); // 当处于高对比度情况下,运用正确的颜色。 //提供对高对比的辅助功能设置的访问。 ViewManagement.AccessibilitySettings accessibilitySettings = new ViewManagement.AccessibilitySettings(); //当 “高对比度” 处于关闭时 if (!(accessibilitySettings.HighContrast) /*Off*/) { // 使用默认的颜色 this.Background = new SolidColorBrush(Colors.Red); this.BorderBrush = new SolidColorBrush(Colors.Black); this.Circle4.Fill = new SolidColorBrush(Colors.Blue); this.Circle3.Fill = new SolidColorBrush(Colors.Green); this.Circle2.Fill = new SolidColorBrush(Colors.Yellow); this.Circle1.Fill = new SolidColorBrush(Colors.White); this.Circle4.Stroke = this.Circle3.Stroke = this.Circle2.Stroke = this.Circle1.Stroke = new SolidColorBrush(Colors.Black); } else { // 当 “高对比度” 处于开启时 使用高对比度的颜色 // 包含一组常用应用程序用户界面设置和操作。 ViewManagement.UISettings uiSettings = new ViewManagement.UISettings(); //获取默认高对比度颜色方案的名称。 switch (accessibilitySettings.HighContrastScheme) { case "High Contrast Black": this.Background = this.Circle4.Fill = this.Circle3.Fill = this.Circle2.Fill = this.Circle1.Fill
= new SolidColorBrush(Colors.Black); this.BorderBrush = this.Circle4.Stroke = this.Circle3.Stroke = this.Circle2.Stroke = this.Circle1.Stroke
= new SolidColorBrush(Colors.White); break; case "High Contrast White": this.Background = this.Circle4.Fill = this.Circle3.Fill = this.Circle2.Fill = this.Circle1.Fill
= new SolidColorBrush(Colors.White); this.BorderBrush = this.Circle4.Stroke = this.Circle3.Stroke = this.Circle2.Stroke = this.Circle1.Stroke
= new SolidColorBrush(Colors.Black); break; default: // 对于所有其他高对比方案 this.Background = new SolidColorBrush(uiSettings.UIElementColor(ViewManagement.UIElementType.ButtonFace)); this.BorderBrush = new SolidColorBrush(uiSettings.UIElementColor(ViewManagement.UIElementType.ButtonText)); this.Circle4.Fill = this.Circle3.Fill = this.Circle2.Fill = this.Circle1.Fill =
new SolidColorBrush(uiSettings.UIElementColor(ViewManagement.UIElementType.Hotlight)); this.Circle4.Stroke = this.Circle3.Stroke = this.Circle2.Stroke = this.Circle1.Stroke =
new SolidColorBrush(uiSettings.UIElementColor(ViewManagement.UIElementType.HighlightText)); break; } } } } }
在其它页面中引用该按钮时:
1)在页面的 根节点处声明命名空间别名:
xmlns:local="using:HighContrast"
2)在页面中添加:
<local:TargetButton Width="300" Height="300" HorizontalAlignment="Center" />