Ungkap Fokus

  • Artikel

hero image

Reveal Focus adalah efek pencahayaan untuk pengalaman 10 kaki, seperti konsol game di layar televisi. Ini menganimasikan batas elemen yang dapat difokuskan, seperti tombol, ketika pengguna memindahkan gamepad atau fokus keyboard kepada mereka. Ini dinonaktifkan secara default, tetapi mudah diaktifkan.

API Penting: Properti Application.FocusVisualKind, enum FocusVisualKind, properti Control.UseSystemFocusVisuals

Cara kerjanya

Ungkapkan Fokus menarik perhatian pada elemen yang difokuskan dengan menambahkan cahaya animasi di sekitar batas elemen:

Reveal Visual

Ini sangat membantu dalam skenario 10 kaki di mana pengguna mungkin tidak memperhatikan sepenuhnya seluruh layar TV.

Contoh

Galeri WinUI 2
WinUI Gallery

Jika Anda telah menginstal aplikasi Galeri WinUI 2, klik di sini untuk membuka aplikasi dan lihat Mengungkapkan Fokus dalam tindakan.

Cara menggunakannya

Ungkapkan Fokus nonaktif secara default. Untuk mengaktifkannya:

  1. Di konstruktor aplikasi Anda, panggil properti AnalyticsInfo.VersionInfo.DeviceFamily dan periksa apakah keluarga perangkat saat ini adalah Windows.Xbox.
  2. Jika keluarga perangkat adalah Windows.Xbox, atur properti Application.FocusVisualKind ke FocusVisualKind.Reveal.
    if(AnalyticsInfo.VersionInfo.DeviceFamily == "Windows.Xbox")
    {
        this.FocusVisualKind = FocusVisualKind.Reveal;
    }

Setelah Anda mengatur properti FocusVisualKind , sistem secara otomatis menerapkan efek Reveal Focus ke semua kontrol yang properti UseSystemFocusVisuals-nya diatur ke True (nilai default untuk sebagian besar kontrol).

Mengapa Tidak Mengungkapkan Fokus secara default?

Seperti yang Anda lihat, cukup mudah untuk mengaktifkan Reveal Focus saat aplikasi mendeteksinya berjalan di Xbox. Jadi, mengapa sistem tidak hanya menyalakannya untuk Anda? Karena Fokus Ungkap meningkatkan ukuran visual fokus, yang dapat menyebabkan masalah dengan tata letak UI Anda. Dalam beberapa kasus, Anda mungkin ingin menyesuaikan efek Ungkapkan Fokus untuk mengoptimalkannya untuk aplikasi Anda.

Menyesuaikan Fokus Ungkapan

Anda dapat menyesuaikan efek Ungkapkan Fokus dengan memodifikasi properti visual fokus untuk setiap kontrol: FocusVisualPrimaryThickness, FocusVisualSecondaryThickness, FocusVisualPrimaryBrush, dan FocusVisualSecondaryBrush. Properti ini memungkinkan Anda menyesuaikan warna dan ketebalan persegi panjang fokus. (Properti tersebut adalah properti yang sama dengan yang Anda gunakan untuk membuat Visual fokus Visibilitas Tinggi.)

Tetapi sebelum Anda mulai menyesuaikannya, sangat membantu untuk mengetahui sedikit lebih banyak tentang komponen yang membentuk Reveal Focus.

Ada tiga bagian ke visual Reveal Focus default: batas utama, batas sekunder, dan Tampilan bersinar. Batas utama tebal 2px , dan berjalan di luar perbatasan sekunder. Batas sekunder tebal 1px dan berjalan di sekitar bagian dalam perbatasan utama. Cahaya Fokus Ungkap memiliki ketebalan yang sebanding dengan ketebalan batas utama dan berjalan di luar batas utama.

Selain elemen statis, visual Reveal Focus menampilkan cahaya animasi yang bergelimpangan saat tidak aktif dan bergerak ke arah fokus saat memindahkan fokus.

Reveal Focus layers

Mengkustomisasi ketebalan batas

Untuk mengubah ketebalan tipe batas kontrol, gunakan properti ini:

Tipe batas Properti
Primer, Bersinar FocusVisualPrimaryThickness
(Mengubah batas utama mengubah ketebalan cahaya secara proporsional.)
Sekunder FocusVisualSecondaryThickness

Contoh ini mengubah ketebalan batas visual fokus tombol:

<Button FocusVisualPrimaryThickness="2" FocusVisualSecondaryThickness="1"/>

Mengkustomisasi margin

Margin adalah spasi antara batas visual kontrol dan awal visual fokus batas sekunder. Margin default adalah 1px jauh dari batas kontrol. Anda dapat mengedit margin ini per kontrol dengan mengubah properti FocusVisualMargin :

<Button FocusVisualPrimaryThickness="2" FocusVisualSecondaryThickness="1" FocusVisualMargin="-3"/>

Margin negatif mendorong batas menjauh dari pusat kontrol, dan margin positif memindahkan batas lebih dekat ke pusat kontrol.

Mengkustomisasi warna

Untuk mengubah warna visual Ungkapkan Fokus, gunakan properti FocusVisualPrimaryBrush dan FocusVisualSecondaryBrush .

Properti Sumber daya default Nilai sumber daya default
FocusVisualPrimaryBrush SystemControlRevealFocusVisualBrush SystemAccentColor
FocusVisualSecondaryBrush SystemControlFocusVisualSecondaryBrush SystemAltMediumColor

(Properti FocusPrimaryBrush hanya default ke Sumber daya SystemControlRevealFocusVisualBrush saat FocusVisualKind diatur ke Reveal. Jika tidak, ia menggunakan SystemControlFocusVisualPrimaryBrush.)

Untuk mengubah warna visual fokus kontrol individual, atur properti langsung pada kontrol. Contoh ini mengambil alih warna visual fokus tombol.


<!-- Specifying a color directly -->
<Button
    FocusVisualPrimaryBrush="DarkRed"
    FocusVisualSecondaryBrush="Pink"/>

<!-- Using theme resources -->
<Button
    FocusVisualPrimaryBrush="{ThemeResource SystemBaseHighColor}"
    FocusVisualSecondaryBrush="{ThemeResource SystemAccentColor}"/>

Untuk mengubah warna semua visual fokus di seluruh aplikasi Anda, ganti sumber daya SystemControlRevealFocusVisualBrush dan SystemControlFocusVisualSecondaryBrush dengan definisi Anda sendiri:

<!-- App.xaml -->
<Application.Resources>

    <!-- Override Reveal Focus default resources. -->
    <SolidColorBrush x:Key="SystemControlRevealFocusVisualBrush" Color="{ThemeResource SystemBaseHighColor}"/>
    <SolidColorBrush x:Key="SystemControlFocusVisualSecondaryBrush" Color="{ThemeResource SystemAccentColor}"/>
</Application.Resources>

Untuk informasi selengkapnya tentang memodifikasi warna visual fokus, lihat Branding Warna & Penyesuaian.

Perlihatkan cahaya saja

Jika Anda hanya ingin menggunakan cahaya tanpa visual fokus utama atau sekunder, cukup atur properti FocusVisualPrimaryBrush kontrol ke Transparent dan FocusVisualSecondaryThickness ke 0. Dalam hal ini, cahaya akan mengadopsi warna latar belakang kontrol untuk memberikan nuansa tanpa batas. Anda dapat memodifikasi ketebalan cahaya menggunakan FocusVisualPrimaryThickness.


<!-- Show just the glow -->
<Button
    FocusVisualPrimaryBrush="Transparent"
    FocusVisualSecondaryThickness="0" />

Menggunakan visual fokus Anda sendiri

Cara lain untuk menyesuaikan Reveal Focus adalah dengan memilih keluar dari visual fokus yang disediakan sistem dengan menggambar sendiri menggunakan status visual. Untuk mempelajari selengkapnya, lihat sampel Visual fokus.

Mengungkapkan Fokus dan Sistem Fluent Design

Reveal Focus adalah komponen Sistem Fluent Design yang menambahkan cahaya ke aplikasi Anda. Untuk mempelajari selengkapnya tentang sistem Desain Fasih dan komponen lainnya, lihat gambaran umum Desain Fasih.