程式師世界 >> 編程語言 >> .NET網頁編程 >> 關於.NET >> Windows 8 Store Apps學習(56)系統UI Scale, Snap,Orientation,High Contrast

Windows 8 Store Apps學習(56)系統UI Scale, Snap,Orientation,High Contrast

編輯：關於.NET

介紹

重新想象 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;
        }
    }
}/*
 * 演示 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;
        }
    }
}

[源碼下載]：http://files.cnblogs.com/webabcd/Windows8.rar