表示フォーカス

  • [アーティクル]

hero image

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

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

動作方法

表示フォーカスでは、フォーカスが置かれた要素に注意が向くように、要素の境界線の周囲にアニメーション化されたグロー (蛍光ライト効果) が追加されます。

Reveal Visual

この効果は、ユーザーがテレビ画面全体を注視していない場合のような 10 フィート シナリオで特に便利です。

例

WinUI 2 ギャラリー
WinUI Gallery

WinUI 2 ギャラリー アプリがインストールされている場合、こちらをクリックしてアプリを開き、表示フォーカスの動作を確認してください。

使用方法

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

  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 での実行中であるとアプリが検出した場合は、表示フォーカスを有効にすることは非常に簡単です。 それでは、システムによって自動的に有効にならないのはなぜでしょうか。 表示フォーカスを使用すると、フォーカスの視覚効果のサイズが増加し、UI レイアウトに問題が発生する可能性があります。 場合によっては、表示フォーカス効果をカスタマイズし、アプリに合わせて最適化する必要があります。

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

表示フォーカス効果は、各コントロールのフォーカス視覚効果プロパティ (FocusVisualPrimaryThickness、FocusVisualSecondaryThickness、FocusVisualPrimaryBrush、FocusVisualSecondaryBrush) を変更することによってカスタマイズできます。 これらのプロパティでは、フォーカスの四角形の色と太さをカスタマイズできます。 (これらは、視認性の高いフォーカスの視覚効果を作成する場合と同じプロパティです。)

カスタマイズを開始する前に、表示フォーカスを構成しているコンポーネントについてもう少し詳しく知っておくと便利です。

既定の表示フォーカス視覚効果は、プライマリ境界線、セカンダリ境界線、表示グローという 3 つの部分で構成されています。 プライマリ境界線は、2 px の幅があり、セカンダリ境界線の外側に描画されます。 セカンダリ境界線は、1 px の幅があり、プライマリ境界線の内側に描画されます。 表示フォーカスのグロー部分は、プライマリ境界線の幅に比例した幅があり、プライマリ境界線の外側に描画されます。

静的な要素に加えて、表示フォーカスの視覚効果では、アニメーション化された光が使用されます。この光は、フォーカスの停止中は振動し、フォーカスの移動時にはフォーカス方向に移動します。

Reveal Focus layers

境界線の幅のカスタマイズ

コントロールの境界線の種類ごとに幅を変更するには、以下のプロパティを使用します。

境界線の種類 プロパティ
プライマリ、グロー FocusVisualPrimaryThickness
(プライマリ境界線を変更すると、グロー部分の幅も比例して変化します。)
セカンダリ FocusVisualSecondaryThickness

この例では、ボタンのフォーカス視覚効果で、境界線の幅を変更しています。

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

余白のカスタマイズ

余白とは、コントロールの視覚的な境界線と、フォーカスの視覚効果で示されるセカンダリ境界線の開始点との間にあるスペースです。 既定の余白は、コントロールの境界線から 1 px の幅になります。 この余白は、FocusVisualMargin プロパティを変更することでコントロールごとに変更できます。

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

余白が負の値の場合は境界線がコントロールの中央から遠くなり、正の値の場合はコントロールの中央に近くなります。

色のカスタマイズ

表示フォーカス視覚効果の色を変更するには、FocusVisualPrimaryBrush プロパティと FocusVisualSecondaryBrush プロパティを使用します。

プロパティ 既定のリソース 既定のリソースの値
FocusVisualPrimaryBrush SystemControlRevealFocusVisualBrush SystemAccentColor
FocusVisualSecondaryBrush SystemControlFocusVisualSecondaryBrush SystemAltMediumColor

(FocusPrimaryBrush プロパティに既定の SystemControlRevealFocusVisualBrush リソースが使用されるのは、FocusVisualKind が Reveal に設定されている場合のみです。それ以外の場合は、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 つの方法は、表示状態を使って独自のフォーカス表示効果を描画することにより、システムから提供されるフォーカス表示効果を除外することです。 詳しくは、フォーカスの視覚効果のサンプルをご覧ください。

表示フォーカスと Fluent Design System

表示フォーカスは、アプリに発光効果を加える Fluent Design System コンポーネントです。 Fluent Design System およびその他のコンポーネントについて詳しくは、Fluent Design の概要をご覧ください。