フォーカスの表示

2025-06-10

ヒーローイメージ

表示フォーカスは、テレビ画面のゲーム機などの 10 フィートエクスペリエンスの照明効果です。ユーザーがゲームパッドやキーボードフォーカスを移動すると、ボタンなどのフォーカス可能な要素の境界線がアニメーション化されます。既定ではオフになっていますが、有効にするのは簡単です。

重要な API: Application.FocusVisualKind プロパティ、 FocusVisualKind 列挙型、 Control.UseSystemFocusVisuals プロパティ

動作方法

表示フォーカスは、要素の境界線の周りにアニメーション化された光彩を追加することで、フォーカスされた要素に注意を向けます。

ビジュアルを表示する

これは、ユーザーがテレビ画面全体に十分な注意を払っていない可能性がある 10 フィートのシナリオで特に役立ちます。

例示

WinUI 2 ギャラリーアプリを開き、RevealFocus の動作を確認します。

WinUI 2 ギャラリー アプリには、ほとんどの WinUI 2 コントロールと機能の対話型の例が含まれています。 Microsoft Store からアプリを入手するか、GitHub でソースコードを取得します。

使用方法

[フォーカスの表示] は既定ではオフになっています。これを有効にするには、次の手順を行います。

アプリのコンストラクターで、AnalyticsInfo.VersionInfo.DeviceFamily プロパティを呼び出し、現在のデバイスファミリが Windows.Xboxされているかどうかを確認します。
デバイスファミリが Windows.Xbox場合は、 Application.FocusVisualKind プロパティを FocusVisualKind.Reveal に設定します。

    if(AnalyticsInfo.VersionInfo.DeviceFamily == "Windows.Xbox")
    {
        this.FocusVisualKind = FocusVisualKind.Reveal;
    }

FocusVisualKind プロパティを設定すると、UseSystemFocusVisuals プロパティが True (ほとんどのコントロールの既定値) に設定されているすべてのコントロールに、表示フォーカス効果が自動的に適用されます。

[表示フォーカス] が既定でオンになっていないのはなぜですか?

ご覧のように、アプリが Xbox で実行されていると検出したときに、表示フォーカスを有効にするのは非常に簡単です。では、なぜシステムが自動でそれをオンにしてくれないのでしょうか? 表示フォーカスはフォーカスビジュアルのサイズを大きくするため、UI レイアウトに問題が発生する可能性があります。場合によっては、表示フォーカス効果をカスタマイズしてアプリ用に最適化する必要があります。

表示フォーカスのカスタマイズ

表示フォーカス効果をカスタマイズするには、各コントロールのフォーカス表示プロパティを次のように変更します。FocusVisualPrimaryThickness、FocusVisualSecondaryThickness、FocusVisualPrimaryBrush、FocusVisualSecondaryBrush。これらのプロパティを使用すると、フォーカスの四角形の色と太さをカスタマイズできます。 (これらは、可視性の高いフォーカスビジュアルの作成に使用するのと同じプロパティです)。

ただし、カスタマイズを開始する前に、表示フォーカスを構成するコンポーネントについてもう少し理解しておくと役立ちます。

既定の表示フォーカスビジュアルには、プライマリ境界線、セカンダリ境界線、表示光彩の 3 つの部分があります。プライマリの境界線は、太さ2px、で、セカンダリの境界線の外側を囲んでいます。セカンダリ境界線は、1px幅ので、プライマリ境界線の内側をに沿って回ります。 [表示フォーカス] の輝きは、主要な境界線の太さに比例した厚みがあり、主要な境界線の外側のを取り囲んでいます。

静的要素に加えて、表示フォーカスビジュアルには、静止時に点滅し、フォーカスを移動するときにフォーカスの方向に移動するアニメーション化された光が特徴です。

フォーカスレイヤーを表示する

罫線の太さをカスタマイズする

コントロールの境界線の種類の太さを変更するには、次のプロパティを使用します。

罫線の種類	プロパティ
プライマリ、光彩	FocusVisualPrimaryThickness (プライマリ境界線を変更すると、光彩の厚さが比例して変化します)。
第二	FocusVisualSecondaryThickness

次の使用例は、ボタンのフォーカスビジュアルの境界線の太さを変更します。

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

余白をカスタマイズする

余白は、コントロールのビジュアル境界とフォーカスビジュアルのセカンダリ境界線の開始の間のスペースです。既定の余白は、コントロールの境界から 1px 離れています。 FocusVisualMargin プロパティを変更することで、コントロールごとにこの余白を編集できます。

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

負の余白は、境界線をコントロールの中心から押し出し、正の余白は、境界線をコントロールの中心に近づけます。

色をカスタマイズする

表示フォーカスビジュアルの色を変更するには、FocusVisualPrimaryBrush をに設定し、FocusVisualSecondaryBrush をに設定します。

プロパティ	既定のリソース	既定のリソース値
FocusVisualPrimaryBrush	SystemControlRevealFocusVisualBrush（システムコントロールリビールフォーカスビジュアルブラシ）	システムアクセントカラー
FocusVisualSecondaryBrush	システムコントロールフォーカスビジュアルセカンダリーブラシ	SystemAltMediumColor

(FocusVisualKind が表示に設定されている場合、FocusPrimaryBrush プロパティの既定値は 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" />

独自のフォーカスビジュアルを使用する

表示フォーカスをカスタマイズするもう 1 つの方法は、表示状態を使用して独自に描画することで、システム提供のフォーカスビジュアルをオプトアウトすることです。詳細については、フォーカスビジュアルのサンプルを参照してください。

次の方法で共有