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


Практическое руководство. Применение стиля визуального отображения фокуса к элементу управления

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

Пример

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

Внешний прямоугольник, сходный с границей, помещается с внешней стороны прямоугольной области. В противном случае изменение размера стиля использует ActualHeight и ActualWidth прямоугольного элемента управления, в котором применяется стиль визуального отображения фокуса. Этот пример устанавливает отрицательные значения для Margin, чтобы граница появлялась с внешней стороны элемента управления, получившего фокус.

<Page
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://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.

См. также

Ссылки

FocusVisualStyle

Основные понятия

Стилизация и использование шаблонов

Стилизация фокуса в элементах управления и FocusVisualStyle