Lencana informasi

Badging adalah cara penandaan yang tidak mengganggu dan intuitif untuk menampilkan notifikasi atau memusatkan perhatian ke area dalam aplikasi - apakah itu untuk pemberitahuan, menunjukkan konten baru, atau memperlihatkan peringatan. info badge Adalah bagian kecil UI yang dapat ditambahkan ke dalam aplikasi dan disesuaikan untuk menampilkan angka, ikon, atau titik sederhana.

info badge dibangun ke dalam XAML navigation view, tetapi juga dapat ditempatkan sebagai elemen mandiri di pohon XAML, memungkinkan Anda untuk menempatkan info badge ke dalam kontrol atau sepotong UI yang Anda pilih. Ketika Anda menggunakan info badge di lokasi selain navigation view, Anda bertanggung jawab untuk menentukan secara programatis kapan harus menampilkan dan menghilangkan info badge, serta di mana menempatkan info badge.

Apakah ini kontrol yang tepat?

info badge harus digunakan saat Anda ingin membawa fokus pengguna ke area tertentu dari aplikasi Anda dengan cara yang tidak mengganggu. Ketika info badge muncul, itu dimaksudkan untuk memusatkan perhatian ke suatu area dan kemudian mengizinkan pengguna kembali ke alur mereka, memberi mereka pilihan untuk menentukan apakah mereka ingin melihat detail mengapa info badge muncul. Lencana info hanya mewakili pesan yang dapat dihentikan dan tidak permanen – sesuatu seperti info badge harus memiliki aturan khusus tentang kapan dapat muncul, menghilang, dan berubah.

Contoh penggunaan yang sesuai info badge :

• Untuk menunjukkan bahwa pesan baru telah tiba.
• Untuk menunjukkan bahwa artikel baru tersedia untuk dibaca.
• Untuk menunjukkan bahwa ada opsi baru yang tersedia di halaman.
• Untuk menunjukkan bahwa mungkin ada masalah dengan item di halaman tertentu yang tidak mencegah aplikasi berfungsi.

Kapan kontrol yang berbeda harus digunakan?

info badge tidak boleh digunakan untuk menampilkan kesalahan kritis atau menyampaikan pesan penting sekali yang memerlukan tindakan segera. Lencana info tidak boleh digunakan dalam kasus di mana diperlukan interaksi segera untuk terus menggunakan aplikasi.

Contoh penggunaan yang tidak pantas info badge :

• Untuk menunjukkan masalah mendesak pada halaman dalam aplikasi yang perlu ditangani sebelum terus menggunakan aplikasi. Untuk skenario ini, gunakan content dialog.
• Muncul di aplikasi tanpa cara bagi pengguna untuk menghilangkan info badge. Untuk pemberitahuan persisten seperti ini, gunakan info bar.
• info badge digunakan sebagai cara permanen untuk menarik perhatian pengguna ke suatu area, tanpa cara bagi pengguna untuk menghilangkan info badge.
• Menggunakan info badge sebagai ikon atau gambar biasa di aplikasi Anda. Sebagai gantinya, gunakan gambar atau ikon yang sesuai (lihat IconElement dan IconSource).

Jenis-jenis info badge

Ada tiga gaya info badge yang dapat Anda pilih - titik, ikon, dan numerik, seperti yang ditunjukkan dalam urutan di bawah ini.

Dot info badge

Titik info badge adalah elips sederhana dengan diameter 4px. Ini tidak memiliki batas, dan tidak dimaksudkan untuk menyimpan teks atau apa pun di dalamnya.

Anda harus menggunakan titik info badge untuk skenario umum di mana Anda ingin memandu fokus pengguna terhadap info badge - misalnya, untuk menunjukkan konten atau pembaruan baru tersedia.

Ikon info badge

Ikon info badge adalah elips dengan diameter 16px yang menyimpan ikon di dalamnya. info badge memiliki properti IconSource yang memberikan fleksibilitas untuk jenis ikon yang didukung.

Anda harus menggunakan ikon info badge untuk mengirim pesan cepat bersama dengan mendapatkan perhatian pengguna - misalnya, untuk memperingatkan pengguna bahwa sesuatu yang tidak diblokir telah salah, pembaruan penting tambahan tersedia, atau bahwa sesuatu yang spesifik dalam aplikasi saat ini diaktifkan (seperti timer hitung mundur yang terjadi).

Jika Anda ingin menggunakan BitmapIconSource untuk IconSourceinfo badge, Anda bertanggung jawab untuk memastikan bahwa bitmap cocok di dalam info badge (baik dengan mengubah ukuran ikon, atau mengubah ukuran info badge).

Numerik info badge

Numerik info badge memiliki bentuk dan ukuran yang sama seperti ikon info badge, tetapi menyimpan angka di dalamnya, ditentukan oleh properti Nilai. Angka harus berupa bilangan bulat utuh dan harus lebih besar dari atau sama dengan nol. Lebar info badge akan secara otomatis meluas saat jumlah yang ditampilkan tumbuh menjadi beberapa digit, dengan animasi yang halus.

Anda harus menggunakan numerik info badge untuk menunjukkan bahwa ada sejumlah item tertentu yang perlu diperhatikan - misalnya, email atau pesan baru.

Gaya bawaan info badge

Untuk membantu mendukung skenario paling umum di mana info badges digunakan, kontrol mencakup gaya prasetel info badge bawaan. Meskipun Anda dapat menyesuaikan info badge untuk menggunakan kombinasi warna/ikon/angka apa pun yang Anda inginkan, preset bawaan ini adalah opsi cepat untuk memastikan bahwa info badge Anda mematuhi panduan aksesibilitas dan proporsional dalam hal ukuran ikon dan angka.

Preset gaya berikut tersedia untuk info badge:

Perhatian

• AttentionDotInfoBadgeStyle
• AttentionIconInfoBadgeStyle
• AttentionValueInfoBadgeStyle

Informasi

• InformationalDotInfoBadgeStyle
• InformationalIconInfoBadgeStyle
• InformationalValueInfoBadgeStyle

Berhasil

• SuccessDotInfoBadgeStyle
• SuccessIconInfoBadgeStyle
• SuccessValueInfoBadgeStyle

Perhatian

• CautionDotInfoBadgeStyle
• CautionIconInfoBadgeStyle
• CautionValueInfoBadgeStyle

Kritis

• CriticalDotInfoBadgeStyle
• CriticalIconInfoBadgeStyle
• CriticalValueInfoBadgeStyle

Jika suatu gaya ditetapkan pada info badge dan pada saat yang sama properti yang bertentangan juga ditetapkan, maka properti tersebut akan menimpa bagian gaya yang bertentangan, tetapi elemen gaya yang tidak bertentangan akan tetap berlaku.

Misalnya, jika Anda menerapkan CriticalIconInfoBadgeStyle ke info badge, tetapi juga mengatur InfoBadge.Value = "1", Anda akan berakhir dengan info badge yang memiliki warna latar belakang "Kritis" tetapi menampilkan angka 1 di dalamnya, daripada menampilkan ikon prasetel.

Contoh ini membuat info badge yang mengambil warna dan ikon dari gaya prasetel Ikon Perhatian.

<InfoBadge Style="{ThemeResource AttentionIconInfoBadgeStyle}"/>

Aksesibilitas

Kontrol info badge tidak memiliki fungsionalitas pembaca layar atau otomatisasi antarmuka pengguna (UIA) bawaannya sendiri, karena kontrol tidak dapat difokuskan dan tidak dapat berinteraksi.

Jika Anda menggunakan info badge di dalam navigation view, navigation view menyediakan pembaca layar bawaan dan dukungan teknologi bantuan. Saat Anda melakukan tab melalui navigation view dan Anda mendarat di elemen navigation view dengan info badge di dalamnya, pembaca layar akan mengumumkan bahwa ada info badge pada elemen ini. Jika yang info badge dimaksud adalah numerik, pembaca layar juga akan mengumumkan info badgenilainya.

Jika Anda menggunakan info badge di luar navigation view, kami sarankan hal berikut untuk memastikan aplikasi Anda dapat diakses sepenuhnya:

• Elemen induk dari info badge harus memiliki fokus dan dapat diakses dengan tombol tab.
• Elemen induk mengumumkan info badge ke pembaca layar.
• Aplikasi mengirimkan pemberitahuan UIA saat info badge muncul untuk pertama kalinya.
• Aplikasi mengirimkan pemberitahuan UIA saat menghilang info badge dari UI.
• Aplikasi mengirimkan pemberitahuan UIA ketika terjadi perubahan signifikan pada info badge.
  • Definisi "perubahan signifikan" terserah Anda sebagai pengembang individu. Contohnya dapat mencakup: peralihan info badge antara berbagai jenis, perubahan warna info badge untuk mewakili statusnya, atau nilai info badge yang melebihi angka signifikan tertentu.

Untuk mengontrol apa yang diumumkan elemen induk kepada pembaca layar, Anda dapat menggunakan properti terlampir dari kelas AutomationProperties . Disarankan agar Anda menetapkan properti terlampir AutomationProperties.FullDescription atau AutomationProperties.ItemStatus pada elemen induk untuk info badge.

Untuk mengirim pemberitahuan UIA ketika info badge muncul atau dihapus, Anda dapat menggunakan metode AutomationPeer.RaiseAutomationEvent.

info badge tersedia dalam ukuran default yang memenuhi persyaratan aksesibilitas. Anda dapat menyesuaikan banyak aspek info badge termasuk tinggi/lebar/warnanya, dll., tetapi penting bahwa default info badge mematuhi pedoman aksesibilitas kami untuk ukuran dan warna.

Membuat InfoBadge

Aplikasi Galeri WinUI 3 mencakup contoh interaktif dari sebagian besar kontrol, fitur, dan fungsi WinUI 3. Dapatkan aplikasi dari Microsoft Store atau dapatkan kode sumber di GitHub

Anda dapat membuat InfoBadge di XAML atau dalam kode. Jenis InfoBadge yang Anda buat ditentukan oleh properti mana yang Anda tetapkan.

Titik

Untuk membuat titik InfoBadge, gunakan kontrol InfoBadge default tanpa kumpulan properti.

<InfoBadge />

Ikon

Untuk membuat ikon InfoBadge, atur properti IconSource .

<InfoBadge x:Name="SyncStatusInfoBadge">
    <InfoBadge.IconSource>
        <SymbolIconSource Symbol="Sync"/>
    </InfoBadge.IconSource>
</InfoBadge>

Numerik

Untuk membuat InfoBadge numerik, atur properti Nilai .

<InfoBadge x:Name="EmailInfoBadge" Value="{x:Bind numUnreadMail}"/>

Dalam sebagian besar skenario, Anda akan mengikat Value properti InfoBadge ke nilai bilangan bulat yang berubah di backend aplikasi sehingga Anda dapat dengan mudah meningkatkan/menurunkan dan menampilkan/menyembunyikan InfoBadge berdasarkan nilai tertentu tersebut.

Menggunakan InfoBadge di NavigationView

Jika Anda menggunakan NavigationView di aplikasi Anda, kami sarankan Anda menggunakan InfoBadge dalam NavigationView untuk menampilkan notifikasi dan peringatan di seluruh aplikasi. Untuk menempatkan InfoBadge pada NavigationViewItem, tetapkan objek InfoBadge ke NavigationViewItem.InfoBadge properti .

Dalam mode Diperluas ke Kiri, InfoBadge muncul rata dengan kanan tepi NavigationViewItem.

Dalam mode Kompak Kiri, InfoBadge muncul teroverlay di sudut kanan atas ikon.

Dalam mode Atas, InfoBadge diselaraskan ke sudut kanan atas item keseluruhan.

Kami menyarankan agar Anda tidak menggunakan berbagai jenis InfoBadges dalam satu NavigationView, seperti melampirkan InfoBadge numerik ke satu NavigationViewItem dan Titik InfoBadge ke NavigationViewItem lain di NavigationView yang sama.

Contoh: Menambah InfoBadge numerik pada NavigationView

Contoh ini mensimulasikan bagaimana aplikasi email dapat menggunakan InfoBadge di NavigationView untuk menampilkan jumlah email baru di kotak masuk, dan menambahkan nomor yang ditampilkan di InfoBadge saat pesan baru diterima.

<NavigationView SelectionChanged="NavigationView_SelectionChanged">
    <NavigationView.MenuItems>
        <NavigationViewItem Content="Home" Icon="Home"/>
        <NavigationViewItem Content="Account" Icon="Contact"/>
        <NavigationViewItem x:Name="InboxPage" Content="Inbox" Icon="Mail">
            <NavigationViewItem.InfoBadge>
                <InfoBadge x:Name="bg1"
                                Value="{x:Bind mailBox.NewMailCount, Mode=OneWay}"
                                Visibility="{x:Bind mailBox.HasNewMail, Mode=OneWay}"/>
            </NavigationViewItem.InfoBadge>
        </NavigationViewItem>
    </NavigationView.MenuItems>
    <Frame x:Name="contentFrame" />
</NavigationView>

public sealed partial class MainWindow : Window
{
    MailBox mailBox = new MailBox();

    public MainWindow()
    {
        this.InitializeComponent();

    }

    private void NavigationView_SelectionChanged(NavigationView sender,
                               NavigationViewSelectionChangedEventArgs args)
    {
        if (args.SelectedItem == InboxPage)
        {
            mailBox.ResetNewMailCount();
        }
        else
        {
            mailBox.CheckMail();
        }
    }
}

public class MailBox : DependencyObject
{
    DispatcherQueueTimer timer;

    // Dependency Properties for binding.
    public int NewMailCount
    {
        get { return (int)GetValue(NewMailCountProperty); }
        set { SetValue(NewMailCountProperty, value); }
    }
    public static readonly DependencyProperty NewMailCountProperty =
        DependencyProperty.Register("NewMailCount", typeof(int), typeof(MailBox), new PropertyMetadata(0));

    public bool HasNewMail
    {
        get { return (bool)GetValue(HasNewMailProperty); }
        set { SetValue(HasNewMailProperty, value); }
    }
    public static readonly DependencyProperty HasNewMailProperty =
        DependencyProperty.Register("HasNewMail", typeof(bool), typeof(MailBox), new PropertyMetadata(false));

    public MailBox()
    {
        timer = this.DispatcherQueue.CreateTimer();
        timer.Interval = new TimeSpan(15000000);
        timer.Tick += (s, e) =>
        {
            NewMailCount++;
            if (HasNewMail == false) { HasNewMail = true; }
        };
        timer.Start();
    }

    public void ResetNewMailCount()
    {
        NewMailCount = 0;
        HasNewMail = false;
        timer.Stop();
    }

    public void CheckMail()
    {
        timer.Start();
    }
}

Hierarki pada NavigationView

Jika Anda memiliki NavigationView hierarkis, dengan NavigationViewItems yang ditumpuk di NavigationViewItems lainnya, item induk akan mengikuti pola desain/penempatan yang sama seperti yang dijelaskan di atas.

NavigationViewItem induk dan NavigationViewItems turunan masing-masing akan memiliki properti InfoBadge tersendiri. Anda dapat mengikat nilai InfoBadge induk ke faktor-faktor yang menentukan nilai InfoBadge anak-anak, seperti menampilkan jumlah InfoBadges numerik anak di InfoBadge induk.

Gambar ini memperlihatkan Tampilan Navigasi hierarkis dengan PanelDisplayMode diatur ke Atas, di mana item tingkat atas (induk) menunjukkan InfoBadge numerik. Aplikasi telah menyetel item induk InfoBadge untuk mewakili apa yang ditampilkan di InfoBadges item turunan, karena item turunan saat ini belum diperluas (dan karenanya tidak terlihat).

Menggunakan InfoBadge di kontrol lain

Anda mungkin ingin menampilkan peringatan atau pemberitahuan pada elemen dalam aplikasi Anda selain NavigationView. Anda mungkin memiliki ListViewItem yang memerlukan perhatian khusus, atau item menu yang menampilkan pemberitahuan. Dalam kasus ini, Anda dapat mengintegrasikan InfoBadge langsung ke UI Anda dengan kontrol lain.

InfoBadge adalah UIElement dan oleh karena itu tidak dapat digunakan sebagai sumber daya bersama.

Untuk melakukan ini, gunakan InfoBadge seperti Anda menggunakan kontrol lainnya – cukup tambahkan markup InfoBadge di mana Anda ingin itu muncul. Karena InfoBadge mewarisi dari Kontrol, InfoBadge memiliki semua properti posisi bawaan, seperti margin, perataan, padding, dan lainnya, yang dapat Anda gunakan untuk memosisikan InfoBadge tepat di tempat yang Anda inginkan.

Jika Anda menempatkan InfoBadge di dalam kontrol lain, seperti Tombol atau ListViewItem, kemungkinan akan terpotong jika posisinya melebihi batas kotak kontrol induk. Jika InfoBadge Anda berada di dalam kontrol lain, InfoBadge tidak boleh diposisikan melewati sudut kotak batas kontrol secara keseluruhan.

Contoh: Menempatkan InfoBadge di dalam kontrol lain

Berikut adalah Tombol yang memiliki InfoBadge yang ditempatkan di sudut kanan atasnya, dengan lencana diletakkan di atas konten. Contoh ini dapat diterapkan ke banyak kontrol selain Tombol juga - ini hanya menunjukkan cara menempatkan, memosisikan, dan menunjukkan InfoBadge di dalam kontrol WinUI lain.

<Button Width="200" Height="60" Padding="4"
        HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
    <Grid>
        <SymbolIcon Symbol="Sync"/>
        <InfoBadge x:Name="buttonInfoBadge"
                        Background="#C42B1C"
                        HorizontalAlignment="Right" 
                        VerticalAlignment="Top"
                        Width="16" Height="16">
            <InfoBadge.IconSource>
                <FontIconSource Glyph="&#xEA6A;"/>
            </InfoBadge.IconSource>
        </InfoBadge>
    </Grid>
</Button>

Mengelola InfoBadge

InfoBadge biasanya menampilkan pemberitahuan sementara, sehingga umum untuk menampilkan atau menyembunyikannya, dan mengubahnya secara berkala saat aplikasi Anda berjalan.

Menampilkan dan menyembunyikan InfoBadge

Anda dapat menggunakan properti Visibilitas atau properti Opacity untuk menampilkan dan menyembunyikan InfoBadge berdasarkan tindakan pengguna, logika program, penghitung, dll.

Seperti halnya UIElements lainnya, pengaturan Visibility.Collapsed akan membuat InfoBadge tidak mengambil ruang di tata letak Anda, sehingga mungkin menyebabkan elemen lain bergerak saat ditampilkan dan disembunyikan.

Jika elemen yang direposisi menjadi perhatian, Anda dapat menggunakan Opacity properti untuk menampilkan dan menyembunyikan InfoBadge. Opacity diatur ke 1.0 secara default; Anda dapat mengaturnya ke 0 untuk menyembunyikan InfoBadge. Saat Anda menggunakan properti Opacity, InfoBadge akan tetap mengambil ruang dalam tata letak meskipun tersembunyi.

Mengubah gaya InfoBadge

Anda dapat mengubah ikon atau nomor yang ditampilkan di InfoBadge saat sedang ditampilkan. Menurunkan atau meningkatkan InfoBadge numerik berdasarkan tindakan pengguna dapat dicapai dengan mengubah nilai InfoBadge.Value. Mengubah ikon InfoBadge dapat dicapai dengan mengatur InfoBadge.IconSource ke objek baru IconSource . Saat mengubah ikon, pastikan bahwa ikon baru berukuran sama dengan ikon lama untuk menghindari efek visual yang melesat.

Perilaku bawaan

Jika tidak ada InfoBadge.Value maupun InfoBadge.IconSource yang diatur, InfoBadge akan secara otomatis menampilkan titik (khususnya jika Value diatur ke -1 dan IconSource diatur ke null, yang merupakan nilai bawaan). Jika kedua properti Value dan IconSource diatur, InfoBadge akan mengikuti properti Value dan menampilkan nilai angka.

Anda juga dapat mengubah jenis InfoBadge saat sedang ditampilkan. Untuk mengubah jenis InfoBadge, pastikan bahwa properti terkait jenis saat ini (Value atau IconSource) diatur ke nilai defaultnya (-1 atau null), dan atur properti jenis baru yang sama dengan nilai yang sesuai. Untuk mengubah jenis InfoBadge dari numerik atau ikon ke jenis titik InfoBadge, pastikan bahwa InfoBadge.Value diatur ke -1 dan InfoBadge.IconSource diatur ke null.

Bergantung pada bagaimana Anda telah memposisikan InfoBadge Anda, ketahuilah bahwa hal ini dapat menyebabkan item bergeser karena ukuran dan bentuk InfoBadge dapat berubah.

UWP dan WinUI 2

InfoBadge untuk aplikasi UWP memerlukan WinUI 2. Untuk informasi selengkapnya, termasuk instruksi penginstalan, lihat WinUI 2. API untuk kontrol ini ada di namespace Microsoft.UI.Xaml.Controls .

Untuk menggunakan kode dalam artikel ini dengan WinUI 2, gunakan alias di XAML (kami menggunakan muxc) untuk mewakili API Pustaka Windows UI yang disertakan dalam proyek Anda. Lihat Mulai menggunakan WinUI 2 untuk informasi selengkapnya.

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:InfoBadge/>

Artikel terkait

• Tampilan Navigasi