方法: FocusVisualStyle をコントロールに適用するHow to: Apply a FocusVisualStyle to a Control

この例では、FocusVisualStyle プロパティを使用して、リソースにフォーカス表示スタイルを作成し、そのスタイルをコントロールに適用する方法を示します。This example shows you how to create a focus visual style in resources and apply the style to a control, using the FocusVisualStyle property.

Example

次の例では、コントロールがユーザー インターフェイス (UI)ユーザー インターフェイス (UI)user interface (UI) でキーボード フォーカスされている場合にのみ適用される追加のコントロール複合を作成するスタイルを定義します。The following example defines a style that creates additional control compositing that only applies when that control is keyboard focused in the ユーザー インターフェイス (UI)user interface (UI). これは、ControlTemplate でスタイルを定義して、FocusVisualStyle プロパティを設定するときに、そのスタイルをリソースとして参照することで実現します。This is accomplished by defining a style with a ControlTemplate, then referencing that style as a resource when setting the FocusVisualStyle property.

枠線のような外部の四角形は、四角形の領域の外側に配置されます。An external rectangle resembling a border is placed outside of the rectangular area. 特に変更がない限り、スタイルのサイズ変更では、フォーカス表示スタイルが適用される四角形コントロールの ActualHeightActualWidth を使用します。Unless otherwise modified, the sizing of the style uses the ActualHeight and ActualWidth of the rectangular control where the focus visual style is applied. この例では、Margin に負の値を設定して、フォーカスされたコントロールの外に枠線が少し表示されるようにします。This example sets negative values for the Margin to make the border appear slightly outside the focused control.

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
  <Page.Resources>
    <Style x:Key="MyFocusVisual">
      <Setter Property="Control.Template">
        <Setter.Value>
          <ControlTemplate>
            <Rectangle Margin="-2" StrokeThickness="1" Stroke="Red" StrokeDashArray="1 2"/>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </Page.Resources>
  <StackPanel Background="Ivory" Orientation="Horizontal">
    <Canvas Width="10"/>
    <Button Width="100" Height="30" FocusVisualStyle="{DynamicResource MyFocusVisual}">
      Focus Here</Button>
    <Canvas Width="100"/>
    <Button Width="100" Height="30" FocusVisualStyle="{DynamicResource MyFocusVisual}">
      Focus Here</Button>
  </StackPanel>
</Page>

FocusVisualStyle は、明示的なスタイルまたはテーマ スタイルから取得したコントロール テンプレート スタイルへの追加です。コントロールのプライマリ スタイルは、ControlTemplate を使用し、そのスタイルを Style プロパティに設定することで作成できます。A FocusVisualStyle is additive to any control template style that comes either from an explicit style or a theme style; the primary style for a control can still be created by using a ControlTemplate and setting that style to the Style property.

フォーカス表示スタイルは、フォーカスできる要素ごとに異なるものを使用するのではなく、テーマまたは UI 全体で一貫したものを使用する必要があります。Focus visual styles should be used consistently across a theme or a UI, rather than using a different one for each focusable element. 詳細については、「コントロールのフォーカスのスタイルと FocusVisualStyle」を参照してください。For details, see Styling for Focus in Controls, and FocusVisualStyle.

関連項目See also