共用方式為

顯示焦點

主角圖像

Reveal Focus 是一種適用於 10 英尺的使用體驗（如電視螢幕上的遊戲控制台）的燈光效果。 它會在使用者將遊戲控制器或鍵盤的焦點移近可設定焦點的元素 (例如按鈕) 時，以動畫方式呈現這些元素的框線。 默認會關閉它，但很容易啟用。

重要 API：Application.FocusVisualKind 屬性、FocusVisualKind 列舉、Control.UseSystemFocusVisuals 属性

運作方式

顯示焦點會透過在元素邊框周圍新增動畫光暈來突出焦點元素。

揭示視覺效果

這在 10 英呎距離的情境中特別有用，當使用者可能無法完全注意整個電視螢幕時。

範例

WinUI 2 圖庫應用程式包含了大部分 WinUI 2 控制項、特性和功能的互動式範例。 從 Microsoft Store 取得應用程式，或在 Github 上取得原始程式碼。

如何使用

顯示焦點預設為關閉。 若要啟用該功能：

  1. 在應用程式的建構函式中，呼叫 AnalyticsInfo.VersionInfo.DeviceFamily 屬性，並檢查目前的裝置系列是否為 Windows.Xbox。
  2. 如果裝置系列是 Windows.Xbox，請將 Application.FocusVisualKind 屬性設定為 FocusVisualKind.Reveal。
    if(AnalyticsInfo.VersionInfo.DeviceFamily == "Windows.Xbox")
    {
        this.FocusVisualKind = FocusVisualKind.Reveal;
    }

設定 FocusVisualKind 屬性之後，系統會自動將顯露焦點效果套用至所有 UseSystemFocusVisuals 屬性設定為 True 的控件（這是大多數控件的預設值）。

為什麼預設不會開啟「顯示焦點」功能？

如您所見，當應用程式偵測到它在 Xbox 上執行時，開啟顯色焦點相當容易。 那麼，為什麼系統不就替您開啟它呢？ 因為 Reveal Focus 會增加焦點視覺效果的大小，這可能會導致 UI 佈局出現問題。 在某些情況下，您會想要自定義顯色焦點效果，以針對您的應用程式進行優化。

定制「Reveal Focus」

您可以修改每個控制項的焦點視覺屬性來自定義顯示焦點效果：FocusVisualPrimaryThickness、FocusVisualSecondaryThickness、FocusVisualPrimaryBrush和FocusVisualSecondaryBrush。 這些屬性可讓您自定義焦點矩形的色彩和粗細。 （這些屬性與您用來建立 高可見度焦點視覺效果相同。）

但在開始自定義之前，進一步瞭解組成 Reveal Focus 的元件會有所幫助。

默認顯色焦點視覺效果有三個部分：主要框線、次要框線和顯色光暈。 主要框線為 ，厚度 2px，環繞在次要框線的外部 的 。 次要框線 1px 粗，圍繞在主要框線 內的 周圍。 亮顯焦點的光暈粗細與主要邊框的粗細相稱，並沿著主要邊框外圍於 和 之間運行。

除了靜態元素之外，Reveal Focus 視覺效果還具有動畫光線，當靜止時會脈動，當移動焦點時會朝著焦點方向移動。

顯示焦點層

自訂框線粗細

若要變更控制元件框線類型的粗細，請使用下列屬性：

框線類型 房產
主要的、光澤 FocusVisualPrimaryThickness
（變更主要框線會按比例改變光暈的厚度。
次要的 FocusVisualSecondaryThickness

本範例會變更按鈕焦點視覺效果的框線粗細：

<Button FocusVisualPrimaryThickness="2" FocusVisualSecondaryThickness="1"/>

自定義邊界

邊界是控件視覺效果界限與焦點視覺效果次要框線開頭之間的空間。 默認邊界距離控件界限為 1px。 您可以變更 FocusVisualMargin 屬性，以便針對每個控件來編輯此邊界。

<Button FocusVisualPrimaryThickness="2" FocusVisualSecondaryThickness="1" FocusVisualMargin="-3"/>

負邊界會將框線從控件的中心推開，而正邊界會將框線移到控件的中心。

自訂色彩

若要變更顯色焦點視覺效果，請使用 FocusVisualPrimaryBrush 和 FocusVisualSecondaryBrush 屬性。

房產 默認資源 默認資源值
FocusVisualPrimaryBrush SystemControlRevealFocusVisualBrush 系統強調色
FocusVisualSecondaryBrush 系統控制焦點視覺次級畫筆 SystemAltMediumColor

（FocusPrimaryBrush 屬性只會在焦點VisualKind 設為 Reveal時，預設為 SystemControlRevealFocusVisualBrush 資源。否則，它會使用 SystemControlFocusVisualPrimaryBrush。

若要變更個別控件焦點視覺效果的色彩，請直接在控件上設定屬性。 本範例會覆寫按鈕的焦點視覺色彩。


<!-- Specifying a color directly -->
<Button
    FocusVisualPrimaryBrush="DarkRed"
    FocusVisualSecondaryBrush="Pink"/>

<!-- Using theme resources -->
<Button
    FocusVisualPrimaryBrush="{ThemeResource SystemBaseHighColor}"
    FocusVisualSecondaryBrush="{ThemeResource SystemAccentColor}"/>

若要變更整個應用程式中所有焦點視覺效果的色彩，請覆寫 SystemControlRevealFocusVisualBrush 和 SystemControlFocusVisualSecondaryBrush 資源，使用您自己的定義：

<!-- App.xaml -->
<Application.Resources>

    <!-- Override Reveal Focus default resources. -->
    <SolidColorBrush x:Key="SystemControlRevealFocusVisualBrush" Color="{ThemeResource SystemBaseHighColor}"/>
    <SolidColorBrush x:Key="SystemControlFocusVisualSecondaryBrush" Color="{ThemeResource SystemAccentColor}"/>
</Application.Resources>

如需修改焦點視覺效果色彩的詳細資訊，請參閱 色彩商標和自定義。

只顯示光暈

如果您想要只使用沒有主要或次要焦點視覺效果的光暈，只要將控件的 FocusVisualPrimaryBrush 屬性設定為 Transparent ， 並將 FocusVisualSecondaryThickness 設定為 0。 在此情況下，光暈會採用控件背景的色彩，以提供無框線的感覺。 您可以使用 FocusVisualPrimaryThickness 來修改光暈的厚度。


<!-- Show just the glow -->
<Button
    FocusVisualPrimaryBrush="Transparent"
    FocusVisualSecondaryThickness="0" />

使用您自己的聚焦影像

自定義揭示焦點的另一種方式是透過使用視覺狀態繪製您自己的焦點視覺效果，以退出系統提供的焦點視覺效果。 若要深入瞭解，請參閱 焦點視覺效果範例。

  • Last updated on