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" />