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

 

posted @ 2012-11-16 13:01  博琼  阅读(408)  评论(0编辑  收藏  举报