Share via

Bilah Info

  • Artikel

Kontrol InfoBar adalah untuk menampilkan pesan status di seluruh aplikasi kepada pengguna yang sangat terlihat namun tidak mengganggu. Ada tingkat Keparahan bawaan untuk dengan mudah menunjukkan jenis pesan yang ditampilkan serta opsi untuk menyertakan tombol ajakan bertindak atau hyperlink Anda sendiri. Karena InfoBar sebaris dengan konten UI lain, opsinya ada di sana agar kontrol selalu terlihat atau diberhentikan oleh pengguna.

Sampel Bilah Info dalam status default dengan tombol tutup dan pesan

Apakah ini kontrol yang tepat?

Gunakan kontrol InfoBar saat pengguna harus diberi tahu, mengakui, atau mengambil tindakan pada status aplikasi yang diubah. Secara default pemberitahuan akan tetap berada di area konten hingga ditutup oleh pengguna tetapi tidak akan selalu merusak alur pengguna.

InfoBar akan mengambil ruang dalam tata letak Anda dan berperilaku seperti elemen anak lainnya. Ini tidak akan menutupi konten lain atau mengambang di atasnya.

Jangan gunakan kontrol InfoBar untuk mengonfirmasi atau merespons langsung tindakan pengguna yang tidak mengubah status aplikasi, untuk pemberitahuan sensitif waktu, atau untuk pesan yang tidak penting.

Keterangan

Gunakan InfoBar yang ditutup oleh pengguna atau saat status diselesaikan untuk skenario yang secara langsung memengaruhi persepsi atau pengalaman aplikasi.

Berikut adalah beberapa contohnya:

  • Konektivitas internet hilang
  • Kesalahan saat menyimpan dokumen saat dipicu secara otomatis, tidak terkait dengan tindakan pengguna tertentu
  • Tidak ada mikrofon yang dicolokkan saat mencoba merekam
  • Langganan ke aplikasi kedaluwarsa

Menggunakan InfoBar yang ditutup oleh pengguna untuk skenario yang secara tidak langsung memengaruhi persepsi atau pengalaman aplikasi

Berikut adalah beberapa contohnya:

  • Panggilan telah mulai merekam
  • Pembaruan diterapkan dengan tautan ke 'Catatan Rilis'
  • Ketentuan layanan telah diperbarui dan memerlukan pengakuan
  • Pencadangan di seluruh aplikasi berhasil diselesaikan secara asinkron
  • Langganan ke aplikasi hampir kedaluwarsa

Kapan kontrol yang berbeda harus digunakan?

Ada beberapa skenario di mana ContentDialog, Flyout, atau TeachingTip mungkin lebih tepat untuk digunakan.

  • Untuk skenario di mana pemberitahuan persisten tidak diperlukan, misalnya menampilkan informasi dalam konteks elemen UI tertentu, Flyout adalah opsi yang lebih baik.
  • Untuk skenario di mana aplikasi mengonfirmasi tindakan pengguna, memperlihatkan informasi yang harus dibaca pengguna, gunakan ContentDialog.
    • Selain itu, jika perubahan status ke aplikasi sangat parah sehingga perlu memblokir semua kemampuan lebih lanjut bagi pengguna untuk berinteraksi dengan aplikasi, gunakan ContentDialog.
  • Untuk skenario di mana pemberitahuan adalah momen pengajaran sementara, TeachingTip adalah pilihan yang lebih baik.

Untuk informasi selengkapnya tentang memilih kontrol pemberitahuan yang tepat, lihat artikel Dialog dan Flyout.

Rekomendasi

Kegunaan Masuk dan Keluar

Konten berkedip

InfoBar tidak boleh muncul dan menghilang dari tampilan dengan cepat untuk mencegah berkedip pada layar. Hindari mem-flash visual untuk orang dengan fotoensitivitas dan untuk meningkatkan kegunaan aplikasi Anda.

Untuk InfoBars yang secara otomatis memasukkan dan keluar dari tampilan melalui kondisi status aplikasi, kami sarankan Anda menyertakan logika dalam aplikasi Anda untuk mencegah konten muncul atau menghilang dengan cepat atau beberapa kali berturut-turut. Namun, secara umum, kontrol ini harus digunakan untuk pesan status berumur panjang.

Memperbarui Bilah Info

Setelah kontrol terbuka, setiap perubahan yang dilakukan pada berbagai properti seperti memperbarui pesan atau Tingkat Keparahan tidak akan memunculkan peristiwa pemberitahuan. Jika Anda ingin memberi tahu pengguna yang menggunakan pembaca layar konten InfoBar yang diperbarui, kami sarankan Anda menutup dan membuka kembali kontrol untuk memicu peristiwa.

Pesan sebaris mengimbangi konten

Untuk InfoBars yang sebaris dengan konten UI lainnya, perlu diingat bagaimana sisa halaman akan bereaksi secara responsif terhadap penambahan elemen.

InfoBars dengan tinggi substansial dapat mengubah tata letak elemen lain secara dramatis di halaman. Jika InfoBar muncul atau menghilang dengan cepat, terutama berturut-turut, pengguna mungkin bingung dengan perubahan status visual.

Warna dan Ikon

Saat menyesuaikan warna dan ikon di luar tingkat Keparahan prasetel, ingatlah harapan pengguna untuk konotasi dari kumpulan ikon dan warna standar.

Selain itu, warna Keparahan prasetel telah dirancang untuk perubahan tema, mode kontras tinggi, aksesibilitas kebingungan warna, dan kontras dengan warna latar depan. Sebaiknya gunakan warna-warna ini jika memungkinkan dan untuk menyertakan logika kustom dalam aplikasi Anda untuk beradaptasi dengan berbagai status warna dan fitur aksesibilitas.

Lihat panduan UX untuk Ikon dan WarnaStandar untuk memastikan pesan Anda dikomunikasikan dengan jelas dan dapat diakses oleh pengguna.

Tingkat keparahan

Hindari mengatur properti Tingkat Keparahan untuk pemberitahuan yang tidak cocok dengan informasi yang dikomunikasikan dalam Judul, Pesan, atau konten kustom.

Informasi yang menyertainya harus bertujuan untuk mengomunikasikan hal-hal berikut untuk menggunakan Tingkat Keparahan tersebut.

  • Kesalahan: Kesalahan atau masalah yang telah terjadi.
  • Peringatan: Kondisi yang dapat menyebabkan masalah di masa mendatang.
  • Berhasil: Tugas jangka panjang dan/atau latar belakang telah selesai.
  • Default: Informasi umum yang memerlukan perhatian pengguna.

Ikon dan warna tidak boleh menjadi satu-satunya komponen UI yang menandakan arti untuk pemberitahuan Anda. Teks dalam Judul dan/atau Pesan pemberitahuan harus disertakan untuk menampilkan informasi.

Message

Teks dalam pemberitahuan Anda tidak akan menjadi panjang konstanta dalam semua bahasa. Untuk properti Judul dan Pesan, ini dapat memengaruhi apakah pemberitahuan Anda akan diperluas ke baris kedua. Sebaiknya hindari penempatan berdasarkan panjang pesan atau elemen UI lainnya yang diatur ke bahasa tertentu.

Pemberitahuan akan mengikuti perilaku pencerminan standar saat dilokalkan ke/dari bahasa yang kanan ke kiri (RTL) atau kiri ke kanan (LTR). Ikon hanya akan mencerminkan jika ada arah.

Silakan lihat panduan untuk Menyesuaikan tata letak dan font, dan mendukung RTL untuk informasi lebih lanjut tentang pelokalan teks di pemberitahuan Anda.

UWP dan WinUI 2

Penting

Informasi dan contoh dalam artikel ini dioptimalkan untuk aplikasi yang menggunakan SDK Aplikasi Windows dan WinUI 3, tetapi umumnya berlaku untuk aplikasi UWP yang menggunakan WinUI 2. Lihat referensi API UWP untuk informasi dan contoh spesifik platform.

Bagian ini berisi informasi yang Anda butuhkan untuk menggunakan kontrol di aplikasi UWP atau WinUI 2.

InfoBar untuk aplikasi UWP memerlukan Windows UI Library 2. Untuk informasi selengkapnya, termasuk instruksi penginstalan, lihat Pustaka Windows UI. 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:InfoBar />

Membuat Bilah Info

Buka aplikasi Galeri WinUI 3 dan lihat InfoBar beraksi.

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

XAML di bawah ini menjelaskan InfoBar sebaris dengan gaya default untuk pemberitahuan informasi. Bilah info dapat ditempatkan seperti elemen lainnya dan akan mengikuti perilaku tata letak dasar. Misalnya, dalam StackPanel vertikal, InfoBar akan diperluas secara horizontal untuk mengisi lebar yang tersedia.

Secara default, InfoBar tidak akan terlihat. Atur properti IsOpen ke true di XAML atau kode di belakang untuk menampilkan InfoBar.

<InfoBar x:Name="UpdateAvailableNotification"
    Title="Update available."
    Message="Restart the application to apply the latest update.">
</InfoBar>

public MainPage()
{
    this.InitializeComponent();

    if(IsUpdateAvailable())
    {
        UpdateAvailableNotification.IsOpen = true;
    }
}

Sampel Bilah Info dalam status default dengan tombol tutup dan pesan

Menggunakan tingkat keparahan yang telah ditentukan sebelumnya

Jenis bilah info dapat diatur melalui properti Tingkat Keparahan untuk secara otomatis mengatur warna status, ikon, dan pengaturan teknologi bantuan yang konsisten tergantung pada kekritisan pemberitahuan. Jika tidak ada Tingkat Keparahan yang diatur, gaya informasi default diterapkan.

<InfoBar x:Name="SubscriptionExpiringNotification"
    Severity="Warning"
    Title="Your subscription is expiring in 3 days."
    Message="Renew your subscription to keep all functionality" />

Sampel Bilah Info dalam status Peringatan dengan tombol tutup dan pesan

Tutup terprogram di InfoBar

InfoBar dapat ditutup oleh pengguna melalui tombol tutup atau secara terprogram. Jika pemberitahuan diperlukan untuk dilihat hingga status diselesaikan dan Anda ingin menghapus kemampuan pengguna untuk menutup bilah info, Anda dapat mengatur properti IsClosable ke false.

Nilai default properti ini benar, dalam hal ini tombol tutup ada dan mengambil bentuk 'X'.

<InfoBar x:Name="NoInternetNotification"
    Severity="Error"
    Title="No Internet"
    Message="Reconnect to continue working."
    IsClosable="False" />

Sampel Bilah Info dalam status Kesalahan tanpa tombol tutup

Kustomisasi: Warna dan ikon latar belakang

Di luar tingkat keparahan yang telah ditentukan sebelumnya, properti Latar Belakang dan IconSource dapat diatur untuk menyesuaikan ikon dan warna latar belakang. InfoBar akan mempertahankan pengaturan teknologi bantuan dari tingkat keparahan yang ditentukan, atau default jika tidak ada yang ditentukan.

Warna latar belakang kustom dapat diatur melalui properti Latar Belakang standar dan akan menggantikan warna yang ditetapkan oleh Tingkat Keparahan. Harap ingat keterbacaan dan aksesibilitas konten saat mengatur warna Anda sendiri.

Ikon kustom dapat diatur melalui properti IconSource. Secara default, ikon akan terlihat (dengan asumsi kontrol tidak diciutkan). Ikon ini dapat dihapus dengan mengatur properti IsIconVisible ke false. Untuk ikon kustom, ukuran ikon yang disarankan adalah 20px.

<InfoBar x:Name="CallRecordingNotification"
    Title="Recording started"
    Message="Your call has begun recording."
    Background="{StaticResource LavenderBackgroundBrush}">
    <InfoBar.IconSource>
        <SymbolIconSource Symbol="Phone" />
    </InfoBar.IconSource>
</InfoBar>

Sampel Bilah Info dalam status default dengan warna latar belakang kustom, ikon kustom, dan tombol tutup

Menambahkan tombol tindakan

Tombol tindakan tambahan dapat ditambahkan dengan menentukan tombol Anda sendiri yang mewarisi ButtonBase dan mengaturnya di properti ActionButton. Gaya kustom akan diterapkan ke tombol tindakan jenis Tombol dan HyperlinkButton untuk konsistensi dan aksesibilitas. Selain properti ActionButton, tombol tindakan tambahan dapat ditambahkan melalui konten kustom dan akan muncul di bawah pesan.

<InfoBar x:Name="NoInternetNotification"
    Severity="Error"
    Title="No Internet"
    Message="Reconnect to continue working.">
    <InfoBar.ActionButton>
        <Button Content="Network Settings" Click="InternetInfoBarButton_Click" />
    </InfoBar.ActionButton>
</InfoBar>

Sampel Bilah Info dalam status Kesalahan dengan satu pesan baris dan tombol tindakan

<InfoBar x:Name="TermsAndConditionsUpdatedNotification"
    Title="Terms and Conditions Updated"
    Message="Dismissal of this message implies agreement to the updated Terms and Conditions. Please view the changes on our website.">
    <InfoBar.ActionButton>
        <HyperlinkButton Content="Terms and Conditions Sep 2020"
            NavigateUri="https://www.example.com"
            Click="UpdateInfoBarHyperlinkButton_Click" />
    </InfoBar.ActionButton>
</InfoBar>

Sampel Bilah Info dengan pesan yang memperluas beberapa baris dan hyperlink

Tombol tindakan rata kanan

Secara default, tombol tindakan diratakan kiri di ruang yang tersedia langsung di sebelah kanan Pesan. Secara opsional, Anda dapat mengatur HorizontalAlignment ke "kanan" di tombol Anda untuk meratakan tombol ini agar langsung berada di sebelah kiri tombol tutup dalam satu baris, horizontal, tata letak.

<InfoBar x:Name="RightAlignedButtonNotification"
    Title="Title"
    Message="Essential app message">
    <InfoBar.ActionButton>
        <Button Content="Hello" HorizontalAlignment="Right"/>
    </InfoBar.ActionButton>
</InfoBar>

Sampel Bilah Info dengan tombol tindakan rata kanan

Pembungkusan konten

Jika konten InfoBar, tidak termasuk konten kustom, tidak dapat pas pada satu garis horizontal, konten tersebut akan ditata secara vertikal. Judul, Pesan, dan ActionButton — jika ada — masing-masing akan muncul pada baris terpisah.

<InfoBar x:Name="BackupCompleteNotification"
    Severity="Success"
    Title="Backup complete: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    Message="All documents were uploaded successfully. Ultrices sagittis orci a scelerisque. Aliquet risus feugiat in ante metus dictum at tempor commodo. Auctor augue mauris augue neque gravida.">
    <InfoBar.ActionButton>
        <Button Content="Action"
            Click="BackupInfoBarButton_Click" />
    </InfoBar.ActionButton>
</InfoBar>

Sampel InfoBar di status Sukses judul multibaris dan pesan InfoBar

Konten kustom

Konten XAML dapat ditambahkan ke InfoBar menggunakan properti Konten. Ini akan muncul di barisnya sendiri di bawah konten kontrol lainnya. Bilah Info akan diperluas agar sesuai dengan konten yang ditentukan.

<InfoBar x:Name="BackupInProgressNotification"
    Title="Backup in progress"
    Message="Your documents are being saved to the cloud"
    IsClosable="False">
    <InfoBar.Content>
        <ProgressBar IsIndeterminate="True" Margin="0,0,0,6" MaxWidth="200"/>
    </InfoBar.Content>
</InfoBar>

Sampel InfoBar dalam status defaultnya dengan bilah kemajuan yang tidak ditentukan

Gaya ringan

Anda dapat mengubah Gaya dan ControlTemplate default untuk memberi kontrol tampilan yang unik. Lihat bagian Gaya Kontrol dan Templat dari dokumen API InfoBar untuk daftar sumber daya tema yang tersedia.

Untuk informasi selengkapnya, lihat bagian Gaya ringan dari artikel Kontrol gaya .

Misalnya, hal berikut menyebabkan warna latar belakang untuk semua InfoBar informasi pada halaman menjadi biru:

<Page.Resources>
    <x:SolidColorBrush x:Key="InfoBarInformationalSeverityBackgroundBrush" Color="LightBlue"></x:SolidColorBrush>
</Page.Resources>

Membatalkan penutupan

Peristiwa Penutupan dapat digunakan untuk membatalkan dan/atau menugur penutupan InfoBar. Ini dapat digunakan untuk menjaga InfoBar tetap terbuka atau memungkinkan waktu untuk terjadinya tindakan kustom. Ketika penutupan InfoBar dibatalkan, IsOpen akan kembali ke true. Penutupan terprogram juga dapat dibatalkan.

<InfoBar x:Name="UpdateAvailable"
    Title="Update Available"
    Message="Please close this tip to apply required security updates to this application"
    Closing="InfoBar_Closing">
</InfoBar>

public void InfoBar_Closing(InfoBar sender, InfoBarClosingEventArgs args)
{
    if (args.Reason == InfoBarCloseReason.CloseButton) 
    {
        if (!ApplyUpdates()) 
        {
            // could not apply updates - do not close
            args.Cancel = true;
        }
    }
}