重新想象 Windows 8 Store Apps (56) - 系统 UI: Scale, Snap, Orientation, High Contrast 等

介绍
重新想象 Windows 8 Store Apps 之系统 UI

获取系统的 UI 相关的设置信息
屏幕方向
Snap
为 snap 操作和屏幕方向的改变增加动画效果
缩放至不同屏幕
高对比度

示例
1、演示如何获取系统的 UI 相关的设置信息
UI/UISettingsInfo.xaml.cs

/*
 * 演示如何获取系统的 UI 相关的设置信息
 */
 
using System;
using Windows.UI.ViewManagement;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;
 
namespace XamlDemo.UI
{
    public sealed partial class UISettingsInfo : Page
    {
        public UISettingsInfo()
        {
            this.InitializeComponent();
        }
 
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            UISettings uiSettings = new UISettings();
 
            lblMsg.Text = "AnimationsEnabled: " + uiSettings.AnimationsEnabled; // 是否启用动画
            lblMsg.Text += Environment.NewLine;
            lblMsg.Text += "CaretBlinkRate: " + uiSettings.CaretBlinkRate; // 输入光标的闪烁速率
            lblMsg.Text += Environment.NewLine;
 
            /*
             * 光标浏览模式（Caret Browsing） - 在页面中会出现一个类似于记事本中的输入光标，用户可以使用键盘（按 Shift 键 + 方向键）来精确地进行页面文字的选择
             * IE8 以上可以通过“F7”来打开/关闭光标浏览模式
             */
            lblMsg.Text += "CaretBrowsingEnabled: " + uiSettings.CaretBrowsingEnabled; // 当前输入光标是否可用于光标浏览模式
            lblMsg.Text += Environment.NewLine;
 
            lblMsg.Text += "CaretWidth: " + uiSettings.CaretWidth; // 输入光标的宽度
            lblMsg.Text += Environment.NewLine;
            lblMsg.Text += "CursorSize: " + uiSettings.CursorSize; // 指针的尺寸
            lblMsg.Text += Environment.NewLine;
            lblMsg.Text += "DoubleClickTime: " + uiSettings.DoubleClickTime; // 捕获双击时，两次单击间的最长时间
            lblMsg.Text += Environment.NewLine;
            lblMsg.Text += "HandPreference: " + uiSettings.HandPreference; // 用户界面的方向（LeftHanded 或 RightHanded）
            lblMsg.Text += Environment.NewLine;
            lblMsg.Text += "MessageDuration: " + uiSettings.MessageDuration; // 消息显示的持续时间，单位：秒
            lblMsg.Text += Environment.NewLine;
            lblMsg.Text += "MouseHoverTime: " + uiSettings.MouseHoverTime; // hover 事件触发之前，指针可以 hover 的时间
            lblMsg.Text += Environment.NewLine;
            lblMsg.Text += "ScrollBarArrowSize: " + uiSettings.ScrollBarArrowSize; // 当前窗口滚动条的箭头的大小
            lblMsg.Text += Environment.NewLine;
            lblMsg.Text += "ScrollBarSize: " + uiSettings.ScrollBarSize; // 当前窗口滚动条的大小
            lblMsg.Text += Environment.NewLine;
            lblMsg.Text += "ScrollBarThumbBoxSize: " + uiSettings.ScrollBarThumbBoxSize; // 当前窗口滚动条 thumb 的大小
            lblMsg.Text += Environment.NewLine;
 
            // 获取当前系统的相关颜色
            lblMsg.Text += "ActiveCaption: " + uiSettings.UIElementColor(UIElementType.ActiveCaption);
            lblMsg.Text += Environment.NewLine;
            lblMsg.Text += "Background: " + uiSettings.UIElementColor(UIElementType.Background);
            lblMsg.Text += Environment.NewLine;
            lblMsg.Text += "ButtonFace: " + uiSettings.UIElementColor(UIElementType.ButtonFace);
            lblMsg.Text += Environment.NewLine;
            lblMsg.Text += "ButtonText: " + uiSettings.UIElementColor(UIElementType.ButtonText);
            lblMsg.Text += Environment.NewLine;
            lblMsg.Text += "CaptionText: " + uiSettings.UIElementColor(UIElementType.CaptionText);
            lblMsg.Text += Environment.NewLine;
            lblMsg.Text += "GrayText: " + uiSettings.UIElementColor(UIElementType.GrayText);
            lblMsg.Text += Environment.NewLine;
            lblMsg.Text += "Highlight: " + uiSettings.UIElementColor(UIElementType.Highlight);
            lblMsg.Text += Environment.NewLine;
            lblMsg.Text += "HighlightText: " + uiSettings.UIElementColor(UIElementType.HighlightText);
            lblMsg.Text += Environment.NewLine;
            lblMsg.Text += "Hotlight: " + uiSettings.UIElementColor(UIElementType.Hotlight);
            lblMsg.Text += Environment.NewLine;
            lblMsg.Text += "InactiveCaption: " + uiSettings.UIElementColor(UIElementType.InactiveCaption);
            lblMsg.Text += Environment.NewLine;
            lblMsg.Text += "InactiveCaptionText: " + uiSettings.UIElementColor(UIElementType.InactiveCaptionText);
            lblMsg.Text += Environment.NewLine;
            lblMsg.Text += "Window: " + uiSettings.UIElementColor(UIElementType.Window);
            lblMsg.Text += Environment.NewLine;
            lblMsg.Text += "WindowText: " + uiSettings.UIElementColor(UIElementType.WindowText);
            lblMsg.Text += Environment.NewLine;
 
            AccessibilitySettings accessibilitySettings = new AccessibilitySettings();
            lblMsg.Text += "是否启用了高对比度模式: " + accessibilitySettings.HighContrast; // 是否启用了高对比度模式
        }
    }
}

2、演示与“屏幕方向”相关的知识点
UI/ScreenOrientation.xaml

<Page
    x:Class="XamlDemo.UI.ScreenOrientation"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlDemo.UI"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
 
    <Grid Background="Transparent">
        <StackPanel Margin="120 0 0 0">
 
            <ToggleButton Name="btnLock" Content="锁定当前方向" IsChecked="False" Checked="btnLock_Checked_1" Unchecked="btnLock_Unchecked_1" />
 
            <TextBlock Name="lblMsg" FontSize="14.667" Margin="0 10 0 0" />
 
        </StackPanel>
 
    </Grid>
</Page>

UI/ScreenOrientation.xaml.cs

/*
 * 演示与“屏幕方向”相关的知识点
 */
 
using System;
using Windows.Graphics.Display;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;
 
namespace XamlDemo.UI
{
    public sealed partial class ScreenOrientation : Page
    {
        public ScreenOrientation()
        {
            this.InitializeComponent();
        }
 
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            // 平板上的“windows”键相对于平板本身的方向
            lblMsg.Text = "NativeOrientation: " + DisplayProperties.NativeOrientation.ToString();
            lblMsg.Text += Environment.NewLine;
 
            // 平板的方向（Windows.Graphics.Display.DisplayOrientations 枚举：None, Landscape, Portrait, LandscapeFlipped, PortraitFlipped）
            // 注：Landscape 顺时针转是 Portrait
            lblMsg.Text += "CurrentOrientation: " + DisplayProperties.CurrentOrientation.ToString();
 
            // DisplayProperties.CurrentOrientation 发生变化时触发的事件
            DisplayProperties.OrientationChanged += DisplayProperties_OrientationChanged;
        }
 
        protected override void OnNavigatedFrom(NavigationEventArgs e)
        {
            DisplayProperties.OrientationChanged -= DisplayProperties_OrientationChanged;
        }
 
        void DisplayProperties_OrientationChanged(object sender)
        {
            lblMsg.Text += Environment.NewLine;
            lblMsg.Text += "CurrentOrientation: " + DisplayProperties.CurrentOrientation.ToString();
        }
 
        private void btnLock_Checked_1(object sender, RoutedEventArgs e)
        {
            // DisplayProperties.AutoRotationPreferences - 指定当前 app 所支持的方向，即仅允许设备支持指定的方向（模拟器中无效）
            // 注：可在 Package.appxmanifest 中指定
            DisplayProperties.AutoRotationPreferences = DisplayProperties.CurrentOrientation;
            btnLock.Content = "解除方向锁定";
        }
 
        private void btnLock_Unchecked_1(object sender, RoutedEventArgs e)
        {
            DisplayProperties.AutoRotationPreferences = DisplayOrientations.None;
            btnLock.Content = "锁定当前方向";
        }
    }
}

3、演示与“snap”相关的知识点
UI/Snap.xaml

<Page
    x:Class="XamlDemo.UI.Snap"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlDemo.UI"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
 
    <Grid Background="Transparent">
        <StackPanel Margin="120 0 0 0">
 
            <Button Name="btnUnsnap" Content="unsnap" Click="btnUnsnap_Click_1" />
 
            <TextBlock Name="lblMsg" FontSize="14.667" Margin="0 10 0 0">
                <Run>snap 可以通过手势操作，也可以通过快捷键：win + .</Run>
            </TextBlock>
 
        </StackPanel>
    </Grid>
</Page>

UI/Snap.xaml.cs

/*
 * 演示与“snap”相关的知识点
 *
 * 注：
 * snap 视图的宽度是固定的：320 像素
 * 支持 snap 的最小分辨率为 1366 * 768
 */
 
using System;
using Windows.UI.Core;
using Windows.UI.ViewManagement;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
 
namespace XamlDemo.UI
{
    public sealed partial class Snap : Page
    {
        public Snap()
        {
            this.InitializeComponent();
 
            Window.Current.SizeChanged += Current_SizeChanged;
 
            ShowCurrentApplicationViewState();
        }
 
        void Current_SizeChanged(object sender, WindowSizeChangedEventArgs e)
        {
            ShowCurrentApplicationViewState();
        }
 
        void ShowCurrentApplicationViewState()
        {
            /*
             * ApplicationView.Value - 获取当前的视图状态（Windows.UI.ViewManagement.ApplicationViewState 枚举）
             *     Snapped - snap 后的小视图
             *     Filled - snap 后的大视图
             *     FullScreenLandscape - 全屏水平视图
             *     FullScreenPortrait - 全屏垂直视图
             */
            ApplicationViewState currentState = ApplicationView.Value;
 
            if (currentState == ApplicationViewState.Snapped)
            {
                lblMsg.Text += Environment.NewLine;
                lblMsg.Text += "This app is snapped";
            }
            else if (currentState == ApplicationViewState.Filled)
            {
                lblMsg.Text += Environment.NewLine;
                lblMsg.Text += "This app is in the fill state";
            }
            else if (currentState == ApplicationViewState.FullScreenLandscape)
            {
                lblMsg.Text += Environment.NewLine;
                lblMsg.Text += "This app is full-screen landscape";
            }
            else if (currentState == ApplicationViewState.FullScreenPortrait)
            {
                lblMsg.Text += Environment.NewLine;
                lblMsg.Text += "This app is full-screen portrait";
            }
        }
 
        private void btnUnsnap_Click_1(object sender, RoutedEventArgs e)
        {
            /*
             * ApplicationView.TryUnsnap() - 尝试解除 snap，尝试之后返回当前是否是 unsnapped 状态
             */
            bool unsnapped = ((ApplicationView.Value != ApplicationViewState.Snapped) || ApplicationView.TryUnsnap());
 
            lblMsg.Text += Environment.NewLine;
            lblMsg.Text += "unsnapped: " + unsnapped;
        }
    }
}

4、演示如何为 ApplicationViewState 的变化增加动画效果
UI/ApplicationViewStateAnimation.xaml

<Page
    x:Class="XamlDemo.UI.ApplicationViewStateAnimation"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlDemo.UI"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
 
    <Grid Background="Transparent">
 
        <StackPanel Margin="120 0 0 0">
 
            <TextBlock Name="lblMsg" FontSize="48" TextWrapping="Wrap" Text="为 snap 操作和屏幕方向的改变增加动画效果" Foreground="White" Margin="0 0 20 0" />
 
        </StackPanel>
 
        <!--
            自定义 ApplicationViewState 变化时的动画效果，由 code-behind 中的 VisualStateManager 控制
            关于 VisualState 请参见 XamlDemo/Controls/UI/VisualStateDemo.xaml
        -->
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="Landscape">
                    <Storyboard>
                        <ColorAnimation Storyboard.TargetName="lblMsg" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"
                                        To="White" />
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Portrait">
                    <Storyboard>
                        <ColorAnimation Storyboard.TargetName="lblMsg" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"
                                        To="Blue" />
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ColorAnimation Storyboard.TargetName="lblMsg" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"
                                        To="Red" />
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Filled">
                    <Storyboard>
                        <ColorAnimation Storyboard.TargetName="lblMsg" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"
                                        To="Orange" />
                    </Storyboard>
                </VisualState>
                <VisualStateGroup.Transitions>
                    <VisualTransition To="Landscape" GeneratedDuration="0:0:1">
                        <VisualTransition.GeneratedEasingFunction>
                            <ElasticEase EasingMode="EaseInOut" />
                        </VisualTransition.GeneratedEasingFunction>
                    </VisualTransition>
                    <VisualTransition To="Portrait" GeneratedDuration="0:0:1">
                        <VisualTransition.GeneratedEasingFunction>
                            <ElasticEase EasingMode="EaseInOut" />
                        </VisualTransition.GeneratedEasingFunction>
                    </VisualTransition>
                    <VisualTransition To="Snapped" GeneratedDuration="0:0:1">
                        <VisualTransition.GeneratedEasingFunction>
                            <ElasticEase EasingMode="EaseInOut" />
                        </VisualTransition.GeneratedEasingFunction>
                    </VisualTransition>
                    <VisualTransition To="Filled" GeneratedDuration="0:0:1">
                        <VisualTransition.GeneratedEasingFunction>
                            <ElasticEase EasingMode="EaseInOut" />
                        </VisualTransition.GeneratedEasingFunction>
                    </VisualTransition>
                </VisualStateGroup.Transitions>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
 
    </Grid>
</Page>

UI/ApplicationViewStateAnimation.xaml.cs

/*
 *  演示如何为 ApplicationViewState 的变化增加动画效果
 */
 
using Windows.UI.Core;
using Windows.UI.ViewManagement;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
 
namespace XamlDemo.UI
{
    public sealed partial class ApplicationViewStateAnimation : Page
    {
        public ApplicationViewStateAnimation()
        {
            this.InitializeComponent();
 
            Window.Current.SizeChanged += Current_SizeChanged;
 
            ChangeViewSate();
        }
 
        void Current_SizeChanged(object sender, WindowSizeChangedEventArgs e)
        {
            ChangeViewSate();
        }
 
        void ChangeViewSate()
        {
            // 根据 ApplicationViewState 的变化触发相应的动画
            switch (ApplicationView.Value)
            {
                case ApplicationViewState.FullScreenLandscape:
                    VisualStateManager.GoToState(this, "Landscape", true);
                    break;
                case ApplicationViewState.FullScreenPortrait:
                    VisualStateManager.GoToState(this, "Portrait", true);
                    break;
                case ApplicationViewState.Snapped:
                    VisualStateManager.GoToState(this, "Snapped", true);
                    break;
                case ApplicationViewState.Filled:
                    VisualStateManager.GoToState(this, "Filled", true);
                    break;
                default:
                    break;
            }
        }
    }
}

5、演示 WinRT 中关于“缩放至不同屏幕”的概念
UI/Scale.xaml

<Page
    x:Class="XamlDemo.UI.Scale"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlDemo.UI"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
 
    <Grid Background="Transparent">
        <StackPanel Margin="120 0 0 0" HorizontalAlignment="Left">
 
            <TextBlock FontSize="14.667" LineHeight="20" TextWrapping="Wrap">
                <Run>1、区分屏幕的指标：尺寸，分辨率，密度</Run>
                <LineBreak />
                <Run>2、最小分辨率为 1024 * 768（无 snap），支持 snap 的最小分辨率为 1366 * 768</Run>
                <LineBreak />
                <Run>3、系统会根据屏幕密度自动进行缩放，也就是说在开发 app 的时候只要考虑分辨率的适应问题即可</Run>
                <LineBreak />
                <Run>4、系统有 3 种缩放倍数：100%, 140%, 180%</Run>
                <LineBreak />
                <Run>5、比如 10.6 寸屏幕：1366*768 会缩放至 100%，1920*1080 会缩放至 140%，2560*1440 会缩放至 180%</Run>
                <LineBreak />
                <Run>6、通过 Window.Current.Bounds 获取到的宽度和高度不是屏幕分辨率，而是屏幕分辨率与缩放相结合之后的值</Run>
                <LineBreak />
                <Run>7、px 是像素，dpi 是密度（每英寸的点数），pt 是 1/72 英寸，px = pt * dpi / 72，WinRT 中与尺寸相关的单位通常是 px</Run>
                <LineBreak />
                <Run>8、Package.appxmanifest 中引用的图片也支持 scale</Run>
            </TextBlock>
 
            <TextBlock Name="lblMsg" FontSize="14.667" Margin="0 10 0 0" />
 
            <!--
                在 /Assets/ 目录内放 3 个目录 scale-100, scale-140, scale-180, 每个目录内均放一个 MyImage.png 文件
                它们分别对应 100% 缩放, 140% 缩放, 180% 缩放
                通过 /Assets/MyImage.png 引用图片，系统会自动找到并使用对应缩放比的图片
            -->
            <Image Source="/Assets/MyImage.png" Width="100" Height="100" Margin="0 10 0 0" HorizontalAlignment="Left" VerticalAlignment="Top" />
 
            <!--
                在 /Assets/scale/ 目录内放 3 个文件 MyImage.scale-100.png, MyImage.scale-140.png, MyImage.scale-180.png
                它们分别对应 100% 缩放, 140% 缩放, 180% 缩放
                通过 /Assets/scale/MyImage.png 引用图片，系统会自动找到并使用对应缩放比的图片
            -->
            <Image Source="/Assets/scale/MyImage.png" Width="100" Height="100" Margin="0 10 0 0" HorizontalAlignment="Left" VerticalAlignment="Top" />
 
        </StackPanel>
    </Grid>
</Page>

UI/Scale.xaml.cs

/*
 * 演示 WinRT 中关于“缩放至不同屏幕”的概念
 */
 
using System;
using Windows.ApplicationModel.Resources.Core;
using Windows.Graphics.Display;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
 
namespace XamlDemo.UI
{
    public sealed partial class Scale : Page
    {
        public Scale()
        {
            this.InitializeComponent();
 
            Window.Current.SizeChanged += Current_SizeChanged;
 
            ShowInfo();
        }
 
        void Current_SizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e)
        {
            ShowInfo();
        }
 
        private void ShowInfo()
        {
            // 通过 Window.Current.Bounds 获取到的宽度和高度不是屏幕分辨率，而是屏幕分辨率与缩放相结合之后的值
            lblMsg.Text = string.Format("Window.Current.Bounds: {0} * {1}", Window.Current.Bounds.Width, Window.Current.Bounds.Height);
            lblMsg.Text += Environment.NewLine;
 
            // 获取屏幕的 dpi（dots per inch）
            lblMsg.Text += "LogicalDpi: " + DisplayProperties.LogicalDpi.ToString();
            lblMsg.Text += Environment.NewLine;
 
            // 获取当前的缩放比例（Windows.Graphics.Display.ResolutionScale 枚举：Invalid, Scale100Percent, Scale140Percent, Scale180Percent）
            lblMsg.Text += "ResolutionScale: " + DisplayProperties.ResolutionScale.ToString();
            lblMsg.Text += Environment.NewLine;
 
            // 另一个获取当前的缩放比例的方法
            string scale;
            ResourceManager.Current.DefaultContext.QualifierValues.TryGetValue("Scale", out scale);
            lblMsg.Text += "Scale: " + scale;
            lblMsg.Text += Environment.NewLine;
        }
    }
}

6、演示 WinRT 中关于“对比度”的概念
UI/HighContrast.xaml

<Page
    x:Class="XamlDemo.UI.HighContrast"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlDemo.UI"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
 
    <Grid Background="Transparent">
        <StackPanel Margin="120 0 0 0">
 
            <TextBlock Name="lblMsg" FontSize="14.667" />
 
            <!--
                注：Package.appxmanifest 中引用的图片也支持 high contrast
 
                有 3 种模式，分别是
                1、标准模式
                2、黑色主题的高对比度模式
                3、白色主题的高对比度模式
 
                系统资源包含了对全部 3 种模式的支持
            -->
            <Button Content="默认的 Button 样式，启用高对比度模式（电脑设置 -> 轻松使用 -> 高对比度）可查看效果" Margin="0 10 0 0" />
 
            <!--
                具体图片文件请查看 /Assets/highContrast/ 目录
                1、xxx.contrast-standard.png 对应 标准模式
                2、xxx.contrast-black.png 对应 黑色主题的高对比度模式
                3、xxx.contrast-white.png 对应 白色主题的高对比度模式
                4、xxx.scale-100_contrast-standard.png 或 xxx.contrast-standard_scale-100.png 对应 scale 与 HighContrast 相结合的方式
            -->
            <Image Source="/Assets/highContrast/TheImage.png" Width="200" Height="100" Margin="0 10 0 0" HorizontalAlignment="Left" />
 
            <!--
                通过 ResourceDictionary.ThemeDictionaries 来指定 3 种模式下的不同资源
                Default 代表 标准模式
                HighContrastBlack 代表 黑色主题的高对比度模式
                HighContrastWhite 代表 白色主题的高对比度模式
            -->
            <StackPanel Margin="0 10 0 0">
                <StackPanel.Resources>
                    <ResourceDictionary>
                        <ResourceDictionary.ThemeDictionaries>
                            <ResourceDictionary x:Key="Default">
                                <SolidColorBrush x:Key="TargetForeground" Color="Red"/>
                            </ResourceDictionary>
                            <ResourceDictionary x:Key="HighContrastBlack">
                                <SolidColorBrush x:Key="TargetForeground" Color="White"/>
                            </ResourceDictionary>
                            <ResourceDictionary x:Key="HighContrastWhite">
                                <SolidColorBrush x:Key="TargetForeground" Color="Black"/>
                            </ResourceDictionary>
                        </ResourceDictionary.ThemeDictionaries>
                    </ResourceDictionary>
                </StackPanel.Resources>
 
                <TextBlock Text="启用高对比度模式可查看效果" FontSize="14.667" Foreground="{StaticResource TargetForeground}" />
            </StackPanel>
 
        </StackPanel>
    </Grid>
</Page>

UI/HighContrast.xaml.cs

/*
 * 演示 WinRT 中关于“对比度”的概念
 */
 
using Windows.ApplicationModel.Resources.Core;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;
 
namespace XamlDemo.UI
{
    public sealed partial class HighContrast : Page
    {
        public HighContrast()
        {
            this.InitializeComponent();
        }
 
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            string contrast;
            // 获取当前的对比度模式
            ResourceManager.Current.DefaultContext.QualifierValues.TryGetValue("Contrast", out contrast);
            lblMsg.Text = "current contrast: " + contrast;
        }
    }
}

OK
[源码下载]

重新想象 Windows 8 Store Apps (56) - 系统 UI: Scale, Snap, Orientation, High Contrast 等的更多相关文章

重新想象 Windows 8 Store Apps 系列文章索引
[源码下载][重新想象 Windows 8.1 Store Apps 系列文章] 重新想象 Windows 8 Store Apps 系列文章索引作者:webabcd 1.重新想象 Windows ...
重新想象 Windows 8.1 Store Apps (86) - 系统 UI 的新特性: Theme, 窗口宽度大小可变, ApplicationView, DisplayInformation
[源码下载] 重新想象 Windows 8.1 Store Apps (86) - 系统 UI 的新特性: Theme, 窗口宽度大小可变, ApplicationView, DisplayInfor ...
重新想象 Windows 8 Store Apps (34) - 通知: Toast Demo, Tile Demo, Badge Demo
[源码下载] 重新想象 Windows 8 Store Apps (34) - 通知: Toast Demo, Tile Demo, Badge Demo 作者:webabcd 介绍重新想象 Wind ...
重新想象 Windows 8 Store Apps (35) - 通知: Toast 详解
[源码下载] 重新想象 Windows 8 Store Apps (35) - 通知: Toast 详解作者:webabcd 介绍重新想象 Windows 8 Store Apps 之通知 Toa ...
重新想象 Windows 8 Store Apps (36) - 通知: Tile 详解
[源码下载] 重新想象 Windows 8 Store Apps (36) - 通知: Tile 详解作者:webabcd 介绍重新想象 Windows 8 Store Apps 之通知 Tile ...
重新想象 Windows 8 Store Apps (37) - 契约: Settings Contract
[源码下载] 重新想象 Windows 8 Store Apps (37) - 契约: Settings Contract 作者:webabcd 介绍重新想象 Windows 8 Store Apps ...
重新想象 Windows 8 Store Apps (38) - 契约: Search Contract
[源码下载] 重新想象 Windows 8 Store Apps (38) - 契约: Search Contract 作者:webabcd 介绍重新想象 Windows 8 Store Apps 之 ...
重新想象 Windows 8 Store Apps (39) - 契约: Share Contract
[源码下载] 重新想象 Windows 8 Store Apps (39) - 契约: Share Contract 作者:webabcd 介绍重新想象 Windows 8 Store Apps 之 ...
重新想象 Windows 8 Store Apps (40) - 剪切板: 复制/粘贴文本, html, 图片, 文件
[源码下载] 重新想象 Windows 8 Store Apps (40) - 剪切板: 复制/粘贴文本, html, 图片, 文件作者:webabcd 介绍重新想象 Windows 8 Store ...

随机推荐

How to create an anonymous IDA PRO database (.IDB)
Source: http://www.0xebfe.net/blog/2013/01/13/how-to-create-an-anonymous-ida-pro-database-dot-idb/ P ...
Spring3系列4-多个配置文件的整合
Spring3系列4-多个配置文件的整合在大型的Spring3项目中,所有的Bean配置在一个配置文件中不易管理,也不利于团队开发,通常在开发过程中,我们会按照功能模块的不同,或者开发人员的不同,将 ...
UNIX环境高级编程笔记之进程环境
本章讲的都是一些非常基础的知识,目的是为了下一章讲进程控制做铺垫,所以,本章就不做过多的总结了,直接看图吧.
dlib库使用
最近的工作中用到了dlib这个库,该库是一个机器学习的开源库,使用起来很方便,直接包含头文件即可,并且不依赖于其他库(自带图像编解码库源码).不过由于是开源的,所以bug多少有一些,我在example ...
[LeetCode] 桶排序的特殊解，例 Sort Color
Sort Colors Given an array with n objects colored red, white or blue, sort them so that objects of t ...
Python Django 开发 2 数据库
一半教程用的Django都是1.8以前的版本,导致跟我用的1.8.2的版本用法有些出入,所以只能自己去官网看文档,以下一下是看官方文档而理解的,英语渣渣,可能会有理解有误的地方先记录下如何查看dja ...
NVARCHAR 和VARCHAR区别和使用
1.各自的定义: ► nvarchar(n) : 包含 n 个字符的可变长度 Unicode 字符数据.n 的值必须介于 1 与 4,000 之间.字节的存储大小是 ...
ES6 Promise 接口
构造函数 new Promise(function(resolve, reject){}); 构造函数接受一个函数(executor)作为参数,该函数在返回 Promise 实例之前被调用.函数的两个 ...
匹配img和a
a:<\s*a\shref=*([^>]*)>([^<]|<(?!/a))*<\s*/a\s*> img:<img\b[^<>]*?\bsr ...
Android 布局之GridLayout
Android 布局之GridLayout 1 GridLayout简介 GridLayout是Android4.0新提供的网格矩阵形式的布局控件. GridLayout的继承关系如下:java.la ...

重新想象 Windows 8 Store Apps (56) - 系统 UI: Scale, Snap, Orientation, High Contrast 等

重新想象 Windows 8 Store Apps (56) - 系统 UI: Scale, Snap, Orientation, High Contrast 等的更多相关文章

随机推荐

热门专题