コントロールのフォーカスのスタイルと FocusVisualStyleStyling for Focus in Controls, and FocusVisualStyle

Windows Presentation Foundation (WPF)Windows Presentation Foundation (WPF) には、キーボードフォーカスを受け取ったときのコントロールの外観を変更するための2つの並列機構が用意されています。provides two parallel mechanisms for changing the visual appearance of a control when it receives keyboard focus. 1つ目のメカニズムでは、コントロールに適用されるスタイルまたはテンプレート内の IsKeyboardFocused などのプロパティのプロパティセッターを使用します。The first mechanism is to use property setters for properties such as IsKeyboardFocused within the style or template that is applied to the control. 2番目のメカニズムは、FocusVisualStyle プロパティの値として別のスタイルを提供することです。"focus visual スタイル" は、コントロールまたはその他の UI 要素を置き換えることで、コントロールの上に描画する装飾用の独立したビジュアルツリーを作成します。The second mechanism is to provide a separate style as the value of the FocusVisualStyle property; the "focus visual style" creates a separate visual tree for an adorner that draws on top of the control, rather than changing the visual tree of the control or other UI element by replacing it. このトピックでは、これらの各メカニズムが適切であるシナリオについて説明します。This topic discusses the scenarios where each of these mechanisms is appropriate.

フォーカスの視覚スタイルの目的The Purpose of Focus Visual Style

Visual スタイルのフォーカス機能は、UI 要素へのキーボードナビゲーションに基づくビジュアルユーザーフィードバックを導入するための一般的な "オブジェクトモデル" を提供します。The focus visual style feature provides a common "object model" for introducing visual user feedback based on keyboard navigation to any UI element. これは、新しいテンプレートをコントロールに適用したり、特定のテンプレートの構成を把握したりすることなく実行できます。This is possible without applying a new template to the control, or knowing the specific template composition.

ただし、visual スタイルのフォーカス機能はコントロールテンプレートを知らなくても動作するため、フォーカスのある視覚スタイルを使用しているコントロールに表示できるビジュアルフィードバックは必ずしも制限されています。However, precisely because the focus visual style feature works without knowing the control templates, the visual feedback that can be displayed for a control using a focus visual style is necessarily limited. この機能の実際の動作は、テンプレートを使用してコントロールのレンダリングによって作成された、ビジュアルツリーの上に別のビジュアルツリー (装飾) を重ね合わせることです。What the feature actually does is to overlay a different visual tree (an adorner) on top of the visual tree as created by a control's rendering through its template. この個別のビジュアルツリーは、FocusVisualStyle プロパティを満たすスタイルを使用して定義します。You define this separate visual tree using a style that fills the FocusVisualStyle property.

既定のフォーカスのビジュアルスタイル動作Default Focus Visual Style Behavior

フォーカスの visual スタイルは、フォーカスアクションがキーボードによって開始された場合にのみ機能します。Focus visual styles act only when the focus action was initiated by the keyboard. マウス操作またはプログラムによるフォーカスの変更により、フォーカスの視覚スタイルのモードが無効になります。Any mouse action or programmatic focus change disables the mode for focus visual styles. フォーカスモードの違いの詳細については、「フォーカスの概要」を参照してください。For more information about the distinctions between focus modes, see Focus Overview.

コントロールのテーマには、テーマ内のすべてのコントロールのフォーカスの視覚スタイルになる、既定のフォーカスのビジュアルスタイルの動作が含まれます。The themes for controls include a default focus visual style behavior that becomes the focus visual style for all controls in the theme. このテーマスタイルは、静的なキー FocusVisualStyleKeyの値によって識別されます。This theme style is identified by the value of the static key FocusVisualStyleKey. アプリケーションレベルで独自のフォーカスの視覚スタイルを宣言する場合は、この既定のスタイルの動作をテーマから置き換えます。When you declare your own focus visual style at the application level, you replace this default style behavior from the themes. または、テーマ全体を定義する場合は、この同じキーを使用して、テーマ全体の既定の動作のスタイルを定義する必要があります。Alternatively, if you define the entire theme, then you should use this same key to define the style for the default behavior for your entire theme.

テーマでは、通常、既定のフォーカスの視覚スタイルは非常に単純です。In the themes, the default focus visual style is generally very simple. 大まかな概算は次のとおりです。The following is a rough approximation:

<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>  

フォーカスの視覚スタイルを使用する場合When to Use Focus Visual Styles

概念的には、コントロールに適用されるフォーカスの視覚スタイルの外観は、コントロールからコントロールまで一貫している必要があります。Conceptually, the appearance of focus visual styles applied to controls should be coherent from control to control. 一貫性を確保する方法の1つとして、テーマ全体を作成する場合にのみ、フォーカスのビジュアルスタイルを変更します。テーマに定義されている各コントロールは、非常に同じフォーカスの表示スタイルを取得します。または、コントロールから継続して表示されるスタイルのバリエーションを取得します。.One way to ensure coherence is to change the focus visual style only if you are composing an entire theme, where each control that is defined in the theme gets either the very same focus visual style, or some variation of a style that is visually related from control to control. また、同じスタイル (または同様のスタイル) を使用して、ページまたは UI のすべてのキーボードフォーカスがある要素のスタイルを作成することもできます。Alternatively, you might use the same style (or similar styles) to style every keyboard-focusable element on a page or in a UI.

テーマの一部ではない個々のコントロールスタイルに FocusVisualStyle を設定することは、フォーカスの視覚スタイルの使用には適していません。Setting FocusVisualStyle on individual control styles that are not part of a theme is not the intended usage of focus visual styles. これは、コントロール間の視覚的な動作が一貫していないと、キーボードフォーカスに関してユーザーエクスペリエンスが混乱する可能性があるためです。This is because an inconsistent visual behavior between controls can lead to a confusing user experience regarding keyboard focus. テーマ全体で一貫していないキーボードフォーカスに対してコントロール固有の動作を行う場合は、IsFocusedIsKeyboardFocusedなど、個々の入力状態プロパティのスタイルでトリガーを使用する方がはるかに適しています。If you are intending control-specific behaviors for keyboard focus that are deliberately not coherent across a theme, a much better approach is to use triggers in styles for individual input state properties, such as IsFocused or IsKeyboardFocused.

フォーカスの visual スタイルは、キーボードフォーカス専用です。Focus visual styles act exclusively for keyboard focus. そのため、フォーカスの視覚的なスタイルは、ユーザー補助機能の一種です。As such, focus visual styles are a type of accessibility feature. マウス、キーボード、またはプログラムによってどのような種類のフォーカスにも UI を変更する場合は、フォーカスの視覚スタイルを使用しないでください。代わりに、一般的なフォーカスプロパティの値から動作するスタイルまたはテンプレートで setter とトリガーを使用する必要があります。IsFocusedIsKeyboardFocusWithinなどです。If you want UI changes for any type of focus, whether via mouse, keyboard, or programmatically, then you should not use focus visual styles, and should instead use setters and triggers in styles or templates that are working from the value of general focus properties such as IsFocused or IsKeyboardFocusWithin.

フォーカスのある視覚スタイルを作成する方法How to Create a Focus Visual Style

フォーカスのある視覚スタイル用に作成するスタイルには、常に ControlTargetType が必要です。The style you create for a focus visual style should always have the TargetType of Control. このスタイルは、主に ControlTemplateで構成されている必要があります。The style should consist mainly of a ControlTemplate. 対象の型は、フォーカスの visual スタイルが FocusVisualStyleに割り当てられている型として指定しないでください。You do not specify the target type to be the type where the focus visual style is assigned to the FocusVisualStyle.

ターゲットの型は常に Controlので、すべてのコントロールに共通のプロパティを使用してスタイルを設定する必要があります (Control クラスとその基本クラスのプロパティを使用します)。Because the target type is always Control, you must style by using properties that are common to all controls (using properties of the Control class and its base classes). UI 要素へのオーバーレイとして正しく機能し、コントロールの機能領域が不明瞭にならないテンプレートを作成する必要があります。You should create a template that will properly function as an overlay to a UI element and that will not obscure functional areas of the control. 一般に、ビジュアルフィードバックはコントロールの余白の外側に表示されるか、またはフォーカスのある視覚スタイルが適用されているコントロールのヒットテストをブロックしない一時的または控えめな効果として表示されることを意味します。Generally, this means that the visual feedback should appear outside the control margins, or as temporary or unobtrusive effects that will not block the hit testing on the control where the focus visual style is applied. オーバーレイテンプレートのサイズと位置を決定するのに役立つテンプレートバインドで使用できるプロパティには、ActualHeightActualWidthMargin、および Paddingがあります。Properties that you can use in template binding that are useful for determining sizing and positioning of your overlay template include ActualHeight, ActualWidth, Margin, and Padding.

フォーカスの視覚スタイルを使用する代替手段Alternatives to Using a Focus Visual Style

1つのコントロールのスタイルを設定するだけであるため、またはコントロールテンプレートをより細かく制御する必要があるために、フォーカスの視覚スタイルを使用することが適切でない場合は、ビジュアルを作成できる他の多くのアクセス可能なプロパティと手法があります。フォーカスの変化に応じた動作。For situations where using a focus visual style is not appropriate, either because you are only styling single controls or because you want greater control over the control template, there are many other accessible properties and techniques that can create visual behavior in response to changes in focus.

トリガー、セッター、およびイベントセッターの詳細については、「スタイルとテンプレート」をご覧ください。Triggers, setters, and event setters are all discussed in detail in Styling and Templating. ルーティングイベントの処理については、 「ルーティングイベントの概要」で説明されています。Routed event handling is discussed in Routed Events Overview.

IsKeyboardFocusedIsKeyboardFocused

特にキーボードフォーカスを知りたい場合は、プロパティ Triggerに対して IsKeyboardFocused 依存関係プロパティを使用できます。If you are specifically interested in keyboard focus, the IsKeyboardFocused dependency property can be used for a property Trigger. スタイルまたはテンプレートのプロパティトリガーは、キーボードフォーカスの動作を定義するためのより適切な手法であり、1つのコントロールに対してのみ使用され、他のコントロールのキーボードフォーカスの動作を視覚的に一致させることはできません。A property trigger in either a style or template is a more appropriate technique for defining a keyboard focus behavior that is very specifically for a single control, and which might not visually match the keyboard focus behavior for other controls.

もう1つの類似した依存関係プロパティも IsKeyboardFocusWithinます。これは、キーボードフォーカスが複合内またはコントロールの機能領域内のどこかにあることを視覚的に呼び出す場合に適しています。Another similar dependency property is IsKeyboardFocusWithin, which might be appropriate to use if you want to visually call out that keyboard focus is somewhere within compositing or within the functional area of the control. たとえば、複数のコントロールをグループ化するパネルが、そのパネル内の個々の要素に対してより正確に表示される場合でも、複数のコントロールをグループ化するパネルが異なるように表示されるように IsKeyboardFocusWithin トリガーを配置できます。For example, you might place an IsKeyboardFocusWithin trigger such that a panel that groups several controls appears differently, even though keyboard focus might more precisely be on an individual element within that panel.

また、イベント GotKeyboardFocusLostKeyboardFocus (およびそのプレビューに相当するもの) を使用することもできます。You can also use the events GotKeyboardFocus and LostKeyboardFocus (as well as their Preview equivalents). これらのイベントは、EventSetterの基礎として使用することも、分離コードでイベントのハンドラーを記述することもできます。You can use these events as the basis for an EventSetter, or you can write handlers for the events in code-behind.

その他のフォーカスプロパティOther Focus Properties

フォーカスを変更して視覚的な動作を生成する可能性のあるすべての原因を確認するには、setter または trigger を IsFocused 依存関係プロパティに基づいて作成するか、EventSetterに使用される GotFocus または LostFocus イベントの基にする必要があります。If you want all possible causes of changing focus to produce a visual behavior, you should base a setter or trigger on the IsFocused dependency property, or alternatively on the GotFocus or LostFocus events used for an EventSetter.

関連項目See also