您现在的位置：程式碼之家 >> 編程語言 > >> .NET 網頁程式設計 >> 關於.NET

Windows 8 市集應用程式開發實戰 (56)：系統 UI 適應 - 縮放、Snap、旋轉與高對比度

編輯：關於.NET

前言：單一程式碼，適應千變萬化的裝置環境

Windows 8 裝置形態多樣：平板、筆電、桌機、全螢幕、Snap 視圖、橫向/直向旋轉、不同 DPI 螢幕、高對比度輔助模式。本文系統性介紹如何查詢系統 UI 設定、處理視圖狀態變更、實作自適應動畫、支援多解析度圖片與高對比度主題。

一、查詢系統 UI 設定 (UISettings)

UISettings ui = new UISettings();
bool animations = ui.AnimationsEnabled;
int caretBlink = ui.CaretBlinkRate;
bool caretBrowsing = ui.CaretBrowsingEnabled;
double caretWidth = ui.CaretWidth;
Windows.UI.ViewManagement.CursorSize cursorSize = ui.CursorSize;
int doubleClickTime = ui.DoubleClickTime;
Windows.UI.ViewManagement.HandPreference hand = ui.HandPreference;
int messageDuration = ui.MessageDuration;
int hoverTime = ui.MouseHoverTime;
double scrollArrow = ui.ScrollBarArrowSize;
double scrollBar = ui.ScrollBarSize;
double scrollThumb = ui.ScrollBarThumbBoxSize;
// 系統色彩
Color activeCaption = ui.UIElementColor(UIElementType.ActiveCaption);
Color background = ui.UIElementColor(UIElementType.Background);
// ... 其他色彩型別
// 高對比度偵測
AccessibilitySettings acc = new AccessibilitySettings();
bool highContrast = acc.HighContrast;

二、螢幕旋轉與鎖定

取得目前方向

DisplayOrientations native = DisplayProperties.NativeOrientation;  // 裝置原生方向
DisplayOrientations current = DisplayProperties.CurrentOrientation; // 目前方向
// 枚舉值：None, Landscape, Portrait, LandscapeFlipped, PortraitFlipped

鎖定應用程式支援方向

// 鎖定目前方向
DisplayProperties.AutoRotationPreferences = DisplayProperties.CurrentOrientation;
// 解除鎖定
DisplayProperties.AutoRotationPreferences = DisplayOrientations.None;
// 監聽變更
DisplayProperties.OrientationChanged += (sender) => { /* 更新 UI */ };

三、Snap 視圖狀態管理

視圖狀態枚舉

FullScreenLandscape：全螢幕橫向
FullScreenPortrait：全螢幕直向
Snapped：320px 固定寬度側欄
Filled：佔據剩餘空間的主視圖

限制：Snap 需最小解析度 1366×768。

狀態偵測與強制解除 Snap

Window.Current.SizeChanged += (s, e) => { UpdateVisualState(); };

void UpdateVisualState() {
    switch (ApplicationView.Value) {
        case ApplicationViewState.Snapped: /* 簡化版面 */ break;
        case ApplicationViewState.Filled: /* 完整版面 */ break;
        // ...
    }
}

// 嘗試解除 Snap
bool unsnapped = (ApplicationView.Value != ApplicationViewState.Snapped) || ApplicationView.TryUnsnap();

四、視圖狀態轉場動畫

在 XAML 定義 VisualStateGroup，對應四種視圖狀態，並設定 VisualTransition 與緩動函數：

<VisualStateManager.VisualStateGroups>
  <VisualStateGroup>
    <VisualState x:Name="Landscape">
      <Storyboard><ColorAnimation To="White" .../></Storyboard>
    </VisualState>
    <VisualState x:Name="Portrait">...</VisualState>
    <VisualState x:Name="Snapped">...</VisualState>
    <VisualState x:Name="Filled">...</VisualState>
    <VisualStateGroup.Transitions>
      <VisualTransition To="Snapped" GeneratedDuration="0:0:1">
        <VisualTransition.GeneratedEasingFunction><ElasticEase EasingMode="EaseInOut"/></VisualTransition.GeneratedEasingFunction>
      </VisualTransition>
      <!-- 其他轉場 -->
    </VisualStateGroup.Transitions>
  </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

程式碼觸發：

VisualStateManager.GoToState(this, "Snapped", true);

五、縮放至不同螢幕 (Resolution Scale)

核心概念

三種縮放等級：100%、140%、180%
系統自動根據螢幕 DPI 選擇縮放，開發者只需關注有效解析度（Window.Current.Bounds）
單位換算：px = pt × dpi / 72，WinRT 以有效像素 (effective pixels) 為單位

多解析度圖片命名慣例

資料夾法：/Assets/scale-100/MyImage.png, /Assets/scale-140/MyImage.png, /Assets/scale-180/MyImage.png → 參考 /Assets/MyImage.png

檔名法：/Assets/scale/MyImage.scale-100.png, MyImage.scale-140.png, MyImage.scale-180.png → 參考 /Assets/scale/MyImage.png

查詢目前縮放

ResolutionScale scale = DisplayProperties.ResolutionScale; // Scale100Percent 等
string scaleStr;
ResourceManager.Current.DefaultContext.QualifierValues.TryGetValue("Scale", out scaleStr);

六、高對比度模式支援

三種對比度模式

標準 (Standard)
高對比度黑底 (HighContrastBlack)
高對比度白底 (HighContrastWhite)

圖片資源命名

TheImage.contrast-standard.png
TheImage.contrast-black.png
TheImage.contrast-white.png
// 結合縮放
TheImage.scale-100_contrast-black.png

XAML 資源字典切換

<StackPanel>
  <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 Foreground="{StaticResource TargetForeground}" Text="自動切換顏色"/>
</StackPanel>

查詢目前對比度

string contrast;
ResourceManager.Current.DefaultContext.QualifierValues.TryGetValue("Contrast", out contrast);

總結與原始碼下載

掌握系統 UI 適應關鍵在於：查詢而非假設（使用 UISettings/DisplayProperties/ApplicationView），聲明式資源（縮放圖片、對比度主題），視覺狀態機（VisualStateManager）處理版面重組與動畫。如此才能在單一套件中提供一致且優質的跨裝置體驗。

完整原始碼下載： https://files.cnblogs.com/webabcd/Windows8.rar