Bagikan melalui

Cara: Menerapkan FocusVisualStyle ke Kontrol

  • Artikel

Contoh ini menunjukkan kepada Anda cara membuat gaya visual fokus dalam sumber daya dan menerapkan gaya ke kontrol, menggunakan FocusVisualStyle properti .

Contoh

Contoh berikut mendefinisikan gaya yang membuat komposit kontrol tambahan yang hanya berlaku ketika kontrol tersebut berfokus pada antarmuka pengguna (UI). Ini dicapai dengan menentukan gaya dengan ControlTemplate, lalu merujuk gaya tersebut FocusVisualStyle sebagai sumber daya saat mengatur properti.

Persegi panjang eksternal yang menyerupai batas ditempatkan di luar area persegi panjang. Kecuali dimodifikasi lain, ukuran gaya menggunakan ActualHeight dan ActualWidth kontrol persegi panjang tempat gaya visual fokus diterapkan. Contoh ini menetapkan nilai negatif untuk Margin membuat batas tampak sedikit di luar kontrol yang difokuskan.

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

aditif FocusVisualStyle untuk gaya templat kontrol apa pun yang berasal dari gaya eksplisit atau gaya tema; gaya utama untuk kontrol masih dapat dibuat dengan menggunakan ControlTemplate dan mengatur gaya tersebut ke Style properti.

Gaya visual fokus harus digunakan secara konsisten di seluruh tema atau UI, daripada menggunakan yang berbeda untuk setiap elemen yang dapat difokuskan. Untuk detailnya, lihat Gaya untuk Fokus dalam Kontrol, dan FocusVisualStyle.

Baca juga