方法: FocusVisualStyle をコントロールに適用する

この例では、FocusVisualStyle プロパティを使用して、リソースにフォーカス表示スタイルを作成し、そのスタイルをコントロールに適用する方法を示します。

次の例では、コントロールがユーザー インターフェイス (UI)ユーザー インターフェイス (UI) でキーボード フォーカスされている場合にのみ適用される追加のコントロール複合を作成するスタイルを定義します。 これは、ControlTemplate でスタイルを定義して、FocusVisualStyle プロパティを設定するときに、そのスタイルをリソースとして参照することで実現します。

枠線のような外部の四角形は、四角形の領域の外側に配置されます。 特に変更がない限り、スタイルのサイズ変更では、フォーカス表示スタイルが適用される四角形コントロールの ActualHeightActualWidth を使用します。 この例では、Margin に負の値を設定して、フォーカスされたコントロールの外に枠線が少し表示されるようにします。

<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 プロパティに設定することで作成できます。

フォーカス表示スタイルは、フォーカスできる要素ごとに異なるものを使用するのではなく、テーマまたは UI 全体で一貫したものを使用する必要があります。 詳細については、「コントロールのフォーカスのスタイルと FocusVisualStyle」を参照してください。

関連項目