Поделиться через

Как применить стиль визуального фокуса к элементу управления

  • Статья

В этом примере показано, как создать визуальный стиль фокуса в ресурсах и применить стиль к элементу управления с помощью свойства FocusVisualStyle.

Пример

В следующем примере определяется стиль, который создает дополнительный состав элементов управления, который применяется только в том случае, если этот элемент управления ориентирован на клавиатуру в пользовательском интерфейсе. Это достигается путем определения стиля с ControlTemplate, а затем ссылкой на этот стиль как на ресурс при установке свойства FocusVisualStyle.

Внешний прямоугольник, напоминающий границу, помещается за пределами прямоугольной области. Если не будет указано иное, размеры стиля зависят от ActualHeight и ActualWidth прямоугольного элемента управления, в котором применяется визуальный стиль фокуса. В этом примере задаются отрицательные значения для 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.

Стили визуального фокуса должны использоваться последовательно в теме или пользовательском интерфейсе, вместо использования разных стилей для каждого фокусируемого элемента. Дополнительные сведения см. в разделе Стилизация фокуса в элементах управления и FocusVisualStyle.

См. также