次の方法で共有


コントロールのフォーカスのスタイルと FocusVisualStyle

更新 : 2007 年 11 月

Windows Presentation Foundation (WPF) には、キーボード フォーカスを受け取ったときにコントロールの外観を変えるための、対になるしくみが 2 つあります。1 つは、コントロールに適用するスタイルまたはテンプレートの中で IsKeyboardFocused などのプロパティに対して setter を使用する方法です。もう 1 つは、FocusVisualStyle プロパティの値として別のスタイルを指定する方法です。"フォーカス表示スタイル" では、コントロールやその他の UI 要素のビジュアル ツリーを置換して変更するのではなく、コントロールの上部に描画される装飾に対して別個のビジュアル ツリーを作成します。このトピックでは、それぞれの方法に適したシナリオを説明します。

このトピックには次のセクションが含まれています。

  • フォーカス表示スタイルの目的
  • フォーカス表示スタイルの既定の動作
  • フォーカス表示スタイルの使用に適した状況
  • フォーカス表示スタイルの作成方法
  • フォーカス表示スタイル以外の方法
  • 関連トピック

フォーカス表示スタイルの目的

フォーカス表示スタイル機能は、UI 要素にキーボードで移動したときに視覚的なユーザー フィードバックを表示するための、共通の "オブジェクト モデル" です。この際に、新しいテンプレートをコントロールに適用することや、テンプレートの具体的な構成を把握することは必要ありません。

しかし、コントロールのテンプレートを把握していなくてもフォーカス表示スタイル機能を使用できるというまさにその理由から、フォーカス表示スタイルでコントロールに表示できる視覚的なフィードバックは、必然的に限られています。この機能が実際に行うのは、テンプレートを通じてコントロールの描画によって作成されたビジュアル ツリーの上に、別のビジュアル ツリー (装飾) をオーバーレイするという処理です。この別個のビジュアル ツリーは、FocusVisualStyle プロパティで設定するスタイルを使用して定義します。

フォーカス表示スタイルの既定の動作

フォーカス表示スタイルが機能するのは、フォーカス操作がキーボードで実行された場合のみです。マウス操作やプログラムによるフォーカス変更では、フォーカス表示スタイルのモードは無効になります。フォーカス モードの違いの詳細については、「フォーカスの概要」を参照してください。

コントロールのテーマには、フォーカス表示スタイルの既定の動作が含まれており、そのテーマのすべてのコントロールに適用されます。このテーマ スタイルは、静的キー FocusVisualStyleKey の値によって識別されます。アプリケーション レベルでフォーカス表示スタイルを独自に宣言すると、テーマに含まれている既定のスタイルの動作を置き換えることになります。また、テーマ全体を定義する場合には、これと同じキーを使用して、テーマ全体の既定の動作のスタイルを定義する必要があります。

通常、テーマに含まれる既定のフォーカス表示スタイルは、非常にシンプルです。大まかな概略は、次のようになります。

<Style x:Key="{x:Static SystemParameters.FocusVisualStyleKey}">
  <Setter Property="Control.Template">
    <Setter.Value>
      <ControlTemplate>
        <Rectangle StrokeThickness="1"
          Stroke="Black"
          StrokeDashArray="1 2"
          SnapsToDevicePixels="true"/>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

フォーカス表示スタイルの使用に適した状況

概念上、コントロールに適用するフォーカス表示スタイルの外観は、コントロール間で一貫している必要があります。一貫性を実現する方法の 1 つは、全体のテーマを作成する場合に限って、フォーカス表示スタイルを変更することです。この場合、テーマで定義する各コントロールは、フォーカス表示スタイルをまったく同じにするか、同じスタイルのバリエーションを使用して、コントロール間の外観に統一性が生まれるようにします。また、ページまたは UI 内のキーボード フォーカスを取得できる全要素に対し、まったく同じスタイル (または似たスタイル) を設定するという方法もあります。

テーマに含まれていない個別のコントロールのスタイルに対して FocusVisualStyle を設定することは、フォーカス表示スタイルの本来の用途ではありません。コントロール間で見た目の動作が一貫していないと、キーボード フォーカスに関してユーザー エクスペリエンスに混乱をきたす可能性があるためです。キーボード フォーカスに関して、全体的なテーマと一貫しないコントロール固有の動作を意図的に割り当てる場合は、スタイルで個々の入力状態プロパティ (IsFocusedIsKeyboardFocused など) に対してトリガを使用することをお勧めします。

フォーカス表示スタイルは、キーボード フォーカス専用の機能です。したがって、フォーカス表示スタイルはユーザー補助機能の一種です。マウス、キーボード、プログラムのいずれの種類のフォーカスでも UI を変化させるようにするには、フォーカス表示スタイルを使用するのではなく、スタイルまたはテンプレートで setter とトリガを使用して、一般的なフォーカスのプロパティ (IsFocused や IsFocusWithin など) の値から動作させる必要があります。

フォーカス表示スタイルの作成方法

フォーカス表示スタイルとして作成するスタイルでは、TargetType は必ず Control です。スタイルの構成要素の中心は ControlTemplate です。対象の型は、フォーカス表示スタイルを FocusVisualStyle に割り当てた型には指定しません。

対象の型が常に Control であることから、スタイルの設定では、すべてのコントロールに共通のプロパティ (Control クラスおよびその基本クラスのプロパティ) を使用します。テンプレートは、UI 要素のオーバーレイとして適切に機能し、コントロールの機能領域を隠さないように作成する必要があります。そこで、通常、視覚的なフィードバックは、コントロールのマージンの外部に表示したり、フォーカス表示スタイルを適用するコントロールのヒット テストの妨げとならない一時的な効果や控えめな効果として表示します。テンプレート バインディングで使用できるプロパティで、オーバーレイ テンプレートのサイズと位置を決定するうえで役立つものには、ActualHeightActualWidthMargin、および Padding があります。

フォーカス表示スタイル以外の方法

単一のコントロールに対してスタイルを設定する場合や、コントロール テンプレートを細かく制御する場合など、フォーカス表示スタイルの使用が適さない状況では、他のさまざまなプロパティや手法を使用して、フォーカス変更に反応する視覚的な動作を作成できます。

トリガ、setter、およびイベント setter の詳細については、「スタイルとテンプレート」を参照してください。ルーティング イベントの処理については、「ルーティング イベントの概要」を参照してください。

IsKeyboardFocused

処理の対象がキーボード フォーカスに限定される場合は、プロパティ トリガ (Trigger) で IsKeyboardFocused 依存関係プロパティを使用できます。スタイルまたはテンプレートでプロパティ トリガを使用する方法が適しているのは、単一のコントロールに対し、他のコントロールとは視覚的に必ずしも一致しない固有のキーボード フォーカス動作を定義する場合です。

同様の依存関係プロパティとして、IsKeyboardFocusWithin もあります。こちらは、キーボード フォーカスが複合内またはコントロールの機能領域内にあることを視覚的に示す場合の使用に適しています。たとえば、IsKeyboardFocusWithin トリガを使用して、複数のコントロールをグループ化するパネルの外観を変えることができます。キーボード フォーカスが厳密にはそのパネル内の特定の要素にあるときでも、外観を変えることが可能です。

また、GotKeyboardFocus イベントと LostKeyboardFocus イベント (およびそれぞれに対応する Preview イベント) を使用することもできます。これらのイベントを EventSetter で使用することや、分離コードでこれらのイベントのハンドラを作成することができます。

その他のフォーカス関連のプロパティ

フォーカス移動の原因にかかわらず、視覚的な動作を行うには、setter またはトリガに対して IsFocused 依存関係プロパティを使用するか、または GotFocus イベントまたは LostFocus イベントを EventSetter で使用します。

参照

概念

スタイルとテンプレート

フォーカスの概要

入力の概要

参照

FocusVisualStyle

その他の技術情報

ユーザー補助