Bagikan melalui

Gaya untuk Fokus pada Kontrol, dan FocusVisualStyle

Windows Presentation Foundation (WPF) menyediakan dua mekanisme paralel untuk mengubah tampilan visual kontrol saat menerima fokus keyboard. Mekanisme pertama adalah menggunakan setter properti untuk properti seperti IsKeyboardFocused dalam gaya atau templat yang diterapkan ke kontrol. Mekanisme kedua adalah memberikan gaya terpisah sebagai nilai dari properti FocusVisualStyle; "gaya visual fokus" membuat pohon visual terpisah untuk dekorator yang ditampilkan di atas kontrol, daripada mengubah pohon visual dari kontrol atau elemen UI lainnya dengan menggantikannya. Topik ini membahas skenario di mana masing-masing mekanisme ini sesuai.

Tujuan Gaya Visual Fokus

Fitur gaya visual fokus menyediakan "model objek" umum untuk memperkenalkan umpan balik pengguna visual berdasarkan navigasi keyboard ke elemen UI apa pun. Ini dimungkinkan tanpa menerapkan templat baru ke kontrol, atau mengetahui komposisi templat tertentu.

Namun, justru karena fitur gaya visual fokus berfungsi tanpa mengetahui templat kontrol, umpan balik visual yang dapat ditampilkan untuk kontrol menggunakan gaya visual fokus selalu terbatas. Fitur ini sebenarnya berfungsi untuk melapisi pohon visual yang berbeda (adorner) di atas pohon visual seperti yang dibuat oleh rendering kontrol melalui templatnya. Anda menentukan pohon visual terpisah ini menggunakan gaya yang mengisi properti FocusVisualStyle.

Perilaku Gaya Visual Fokus Default

Gaya visual fokus bertindak hanya saat tindakan fokus dimulai oleh keyboard. Setiap aksi mouse atau perubahan fokus terprogram menonaktifkan mode gaya visual fokus. Untuk informasi selengkapnya tentang perbedaan antara mode fokus, lihat Gambaran Umum Fokus.

Tema kontrol mencakup perilaku gaya visual fokus default yang menjadi gaya visual fokus untuk semua kontrol dalam tema tersebut. Gaya tema ini diidentifikasi oleh nilai kunci statis FocusVisualStyleKey. Saat Anda mendeklarasikan gaya visual fokus Anda sendiri di tingkat aplikasi, Anda mengganti perilaku gaya default ini dari tema. Atau, jika Anda menentukan seluruh tema, maka Anda harus menggunakan kunci yang sama ini untuk menentukan gaya perilaku default untuk seluruh tema Anda.

Dalam tema, gaya visual fokus default umumnya sangat sederhana. Berikut ini adalah perkiraan kasar:

<Style x:Key="{x:Static SystemParameters.FocusVisualStyleKey}">
  <Setter Property="Control.Template">
    <Setter.Value>
      <ControlTemplate>
        <Rectangle StrokeThickness="1"
          Stroke="Black"
          StrokeDashArray="1 2"
          SnapsToDevicePixels="true"/>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

Kapan Menggunakan Gaya Visual Fokus

Secara konseptual, tampilan gaya visual fokus yang diterapkan pada kontrol harus koheren dari kontrol ke kontrol. Salah satu cara untuk memastikan koherensi adalah mengubah gaya visual fokus hanya jika Anda menyusun seluruh tema, di mana setiap kontrol yang ditentukan dalam tema mendapatkan gaya visual fokus yang sama persis, atau beberapa variasi gaya yang secara visual saling berhubungan dari kontrol ke kontrol. Atau, Anda mungkin menggunakan gaya yang sama (atau gaya serupa) untuk menata setiap elemen yang dapat difokuskan keyboard pada halaman atau di UI.

Mengatur FocusVisualStyle pada gaya kontrol individual yang bukan bagian dari tema bukanlah penggunaan gaya visual fokus yang dimaksudkan. Ini karena perilaku visual yang tidak konsisten antara kontrol dapat menyebabkan pengalaman pengguna yang membingungkan mengenai fokus keyboard. Jika Anda bermaksud mengatur perilaku kontrol spesifik untuk fokus keyboard yang sengaja tidak koheren di seluruh tema, pendekatan yang jauh lebih baik adalah menggunakan pemicu dalam gaya untuk properti status input individu, seperti IsFocused atau IsKeyboardFocused.

Gaya visual fokus hanya berlaku untuk fokus papan ketik. Dengan demikian, gaya visual fokus adalah jenis fitur aksesibilitas. Jika Anda ingin perubahan UI untuk setiap jenis fokus, baik melalui mouse, keyboard, atau programatik, maka Anda tidak boleh menggunakan gaya visual fokus, melainkan harus menggunakan setter dan pemicu dalam gaya atau templat yang bekerja dari nilai properti fokus umum seperti IsFocused atau IsKeyboardFocusWithin.

Cara Membuat Gaya Visual Fokus

Gaya yang Anda buat untuk gaya visual fokus harus selalu memiliki TargetType dari Control. Gaya harus terutama terdiri dari ControlTemplate. Anda tidak menentukan jenis target untuk menjadi jenis di mana gaya visual fokus ditetapkan ke FocusVisualStyle.

Karena tipe target selalu Control, Anda harus menata dengan menggunakan properti yang bersifat umum untuk semua kontrol (dengan menggunakan properti dari kelas Control dan kelas dasarnya). Anda harus membuat templat yang akan berfungsi dengan benar sebagai overlay ke elemen UI dan itu tidak akan mengaburkan area fungsional kontrol. Umumnya, ini berarti bahwa umpan balik visual akan muncul di luar margin kontrol, atau sebagai efek sementara atau tidak mengganggu yang tidak akan memblokir pengujian hit pada kontrol tempat gaya visual fokus diterapkan. Properti yang dapat Anda gunakan dalam pengikatan templat yang berguna untuk menentukan ukuran dan posisi templat overlay Anda termasuk ActualHeight, ActualWidth, Margin, dan Padding.

Alternatif untuk Menggunakan Gaya Visual Fokus

Untuk situasi di mana menggunakan gaya visual fokus tidak sesuai, baik karena Anda hanya menata kontrol tunggal atau karena Anda menginginkan kontrol yang lebih besar atas templat kontrol, ada banyak properti dan teknik lain yang dapat diakses yang dapat membuat perilaku visual sebagai respons terhadap perubahan fokus.

Pemicu, pengatur, dan pengatur peristiwa semuanya dibahas secara rinci dalam Styling dan Templating. Penanganan peristiwa yang dirutekan dibahas di Ringkasan Peristiwa Yang Dirutekan.

Apakah Keyboard Terfokus

Jika Anda secara khusus tertarik pada fokus keyboard, properti dependensi IsKeyboardFocused dapat digunakan untuk properti Trigger. Pemicu properti dalam gaya atau templat adalah teknik yang lebih tepat untuk menentukan perilaku fokus keyboard yang sangat khusus untuk satu kontrol, dan yang mungkin tidak cocok secara visual dengan perilaku fokus keyboard untuk kontrol lain.

Properti dependensi serupa lainnya adalah IsKeyboardFocusWithin, yang mungkin sesuai untuk digunakan jika Anda ingin menandai secara visual bahwa fokus keyboard berada di suatu tempat dalam komposisi atau dalam area fungsional pengendalian. Misalnya, Anda mungkin menempatkan pemicu IsKeyboardFocusWithin sehingga panel yang mengelompokkan beberapa kontrol muncul secara berbeda, meskipun fokus keyboard mungkin lebih tepat berada pada elemen individual dalam panel tersebut.

Anda juga dapat menggunakan event GotKeyboardFocus dan LostKeyboardFocus (serta versi pratinjaunya). Anda dapat menggunakan peristiwa ini sebagai dasar untuk EventSetter, atau Anda dapat menulis handler untuk peristiwa di code-behind.

Properti Fokus Lainnya

Jika Anda ingin semua kemungkinan penyebab perubahan fokus menghasilkan perilaku visual, Anda harus mendasarkan setter atau pemicu pada properti dependensi IsFocused, atau pada kejadian GotFocus atau LostFocus yang digunakan untuk EventSetter.

Lihat juga

  • Last updated on