Kontrol kemajuan

Kontrol kemajuan memberikan umpan balik kepada pengguna bahwa operasi yang berjalan lama sedang berlangsung. Ini dapat berarti bahwa pengguna tidak dapat berinteraksi dengan aplikasi ketika indikator kemajuan terlihat, dan juga dapat menunjukkan berapa lama waktu tunggu mungkin, tergantung pada indikator yang digunakan.

Jenis kemajuan

Ada dua kontrol untuk menunjukkan kepada pengguna bahwa operasi sedang berlangsung – baik melalui ProgressBar atau melalui ProgressRing. ProgressBar dan ProgressRing memiliki dua status yang berkomunikasi jika pengguna dapat berinteraksi dengan aplikasi atau tidak.

• Status penentuan untuk ProgressBar dan ProgressRing menunjukkan persentase selesainya tugas. Ini harus digunakan selama operasi yang durasinya diketahui, tetapi kemajuannya tidak boleh memblokir interaksi pengguna dengan aplikasi.
• Status tidak ditentukan untuk ProgressBar menunjukkan bahwa operasi sedang berlangsung, tidak memblokir interaksi pengguna dengan aplikasi, dan waktu penyelesaiannya tidak diketahui.
• Status yang tidak ditentukan untuk ProgressRing menunjukkan bahwa operasi sedang berlangsung, memblokir interaksi pengguna dengan aplikasi, dan waktu penyelesaiannya tidak diketahui.

Selain itu, kontrol kemajuan hanya dibaca dan tidak interaktif. Artinya pengguna tidak dapat memanggil atau menggunakan kontrol ini secara langsung.

Menguasai	Tampilan
Bilah Kemajuan Yang Tidak Ditentukan
Menentukan Bilah Kemajuan
Progres Yang Tidak Ditentukan
Menentukan Kemajuan

Apakah ini kontrol yang tepat?

Tidak selalu jelas kontrol apa atau status apa (menentukan vs tidak ditentukan) untuk digunakan saat mencoba menunjukkan sesuatu yang terjadi. Terkadang tugas cukup jelas sehingga tidak memerlukan kontrol kemajuan sama sekali - dan kadang-kadang bahkan jika kontrol kemajuan digunakan, baris teks masih diperlukan untuk menjelaskan kepada pengguna operasi apa yang sedang berlangsung.

ProgressBar

• Apakah kontrol memiliki durasi yang ditentukan atau akhir yang dapat diprediksi?

  Gunakan ProgressBar penentuan lalu, dan perbarui persentase atau nilai yang sesuai.

• Dapatkah pengguna melanjutkan tanpa harus memantau kemajuan operasi?

  Saat ProgressBar digunakan, interaksi bersifat non-modal, biasanya berarti bahwa pengguna tidak diblokir oleh penyelesaian operasi tersebut, dan dapat terus menggunakan aplikasi dengan cara lain sampai aspek tersebut selesai.

• Kata kunci

  Jika operasi Anda berada di sekitar kata kunci ini, atau jika Anda menampilkan teks yang bersama dengan operasi kemajuan yang cocok dengan kata kunci ini; pertimbangkan untuk menggunakan ProgressBar:

  • Loading...
  • Mengambil
  • Bekerja...

Progres

• Apakah operasi akan menyebabkan pengguna menunggu untuk melanjutkan?

  Jika operasi memerlukan semua interaksi (atau sebagian besar) dengan aplikasi untuk menunggu hingga selesai, maka ProgressRing yang tidak ditentukan adalah pilihan yang lebih baik.

  • Apakah kontrol memiliki durasi yang ditentukan atau akhir yang dapat diprediksi?

  Gunakan ProgressRing penentuan jika Anda ingin visual menjadi cincin alih-alih bilah, dan perbarui persentase atau nilai yang sesuai.

• Apakah aplikasi menunggu pengguna menyelesaikan tugas?

  Jika demikian, gunakan ProgressRing yang tidak ditentukan, karena mereka dimaksudkan untuk menunjukkan waktu tunggu yang tidak diketahui untuk pengguna.

• Kata kunci

  Jika operasi Anda berada di sekitar kata kunci ini, atau jika Anda menampilkan teks bersama dengan operasi kemajuan yang cocok dengan kata kunci ini; pertimbangkan untuk menggunakan ProgressRing:

  • Menyegarkan
  • Masuk...
  • Menghubungkan...

Tidak ada indikasi kemajuan yang diperlukan

• Apakah pengguna perlu tahu bahwa ada sesuatu yang terjadi?

  Misalnya, jika aplikasi mengunduh sesuatu di latar belakang dan pengguna tidak memulai unduhan, pengguna tidak perlu mengetahuinya.

• Apakah operasi tersebut merupakan aktivitas latar belakang yang tidak memblokir aktivitas pengguna dan minimal (tetapi masih beberapa) menarik bagi pengguna?

  Gunakan teks saat aplikasi Anda melakukan tugas yang tidak harus terlihat sepanjang waktu, tetapi Anda masih perlu menampilkan status.

• Apakah pengguna hanya peduli tentang penyelesaian operasi?

  Terkadang yang terbaik adalah menunjukkan pemberitahuan hanya ketika operasi selesai, atau memberikan visual bahwa operasi telah selesai segera, dan menjalankan sentuhan akhir di latar belakang.

Praktik terbaik kontrol kemajuan

Terkadang yang terbaik adalah melihat beberapa representasi visual kapan dan di mana menggunakan kontrol kemajuan yang berbeda ini:

ProgressBar - Menentukan

Contoh pertama adalah ProgressBar penentuan. Ketika durasi operasi diketahui, saat menginstal, mengunduh, menyiapkan, dll; ProgressBar penentuan adalah yang terbaik.

ProgressBar - Tidak ditentukan

Ketika tidak diketahui berapa lama operasi akan berlangsung, gunakan ProgressBar yang tidak ditentukan. ProgressBars yang tidak ditentukan juga baik saat mengisi daftar virtual, dan membuat transisi visual yang lancar antara ProgressBar yang tidak ditentukan untuk menentukan ProgressBar.

• Apakah operasi dalam koleksi virtual?

  Jika demikian, jangan letakkan indikator kemajuan pada setiap item daftar saat muncul. Sebagai gantinya, gunakan ProgressBar dan letakkan di bagian atas kumpulan item yang dimuat, untuk menunjukkan bahwa item sedang diambil.

ProgressRing - Tidak ditentukan

ProgressRing yang tidak ditentukan digunakan ketika interaksi pengguna lebih lanjut dengan aplikasi dihentikan, atau aplikasi sedang menunggu input pengguna untuk melanjutkan. "Masuk..." contoh di atas adalah skenario yang sempurna untuk ProgressRing, pengguna tidak dapat terus menggunakan aplikasi sampai tanda selesai.

ProgressRing - Menentukan

Ketika durasi operasi diketahui dan visual cincin diinginkan, saat menginstal, mengunduh, menyiapkan, dll; ProgressRing penentuan adalah yang terbaik.

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.

Kontrol kemajuan untuk aplikasi UWP disertakan sebagai bagian dari WinUI 2. Untuk informasi selengkapnya, termasuk instruksi penginstalan, lihat WinUI 2. API untuk kontrol ini ada di namespace Windows.UI.Xaml.Controls dan Microsoft.UI.Xaml.Controls .

• API UWP: kelas ProgressBar, properti IsIndeterminate, kelas ProgressRing, properti IsActive
• WinUI 2 Apis: Kelas ProgressBar, properti IsIndeterminate, kelas ProgressRing, properti IsActive
• Buka aplikasi Galeri WinUI 2 dan lihat ProgressBar atau ProgressRing. Aplikasi Galeri WinUI 2 mencakup contoh interaktif dari sebagian besar kontrol, fitur, dan fungsi WinUI 2. Dapatkan aplikasi dari Microsoft Store atau dapatkan kode sumber di GitHub.

Sebaiknya gunakan WinUI 2 terbaru untuk mendapatkan gaya, templat, dan fitur terbaru untuk semua kontrol. WinUI 2.2 atau yang lebih baru menyertakan templat baru untuk kontrol ini yang menggunakan sudut bulat. Untuk informasi selengkapnya, lihat radius sudut.

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:ProgressBar />
<muxc:ProgressRing />

Membuat kontrol kemajuan

• API Penting: Kelas ProgressBar, properti IsIndeterminate, kelas ProgressRing, properti IsActive

Buka aplikasi Galeri WinUI 3 dan lihat ProgressBar atau ProgressRing.

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

Kedua kontrol kemajuan agak sederhana; tetapi beberapa fitur visual kontrol tidak jelas untuk disesuaikan.

Mengukur ProgressRing

ProgressRing dapat berukuran sebesar yang Anda inginkan, tetapi hanya bisa sesingkat 20x20epx. Untuk mengubah ukuran ProgressRing, Anda harus mengatur tinggi dan lebarnya. Jika hanya tinggi atau lebar yang diatur, kontrol akan mengasumsikan ukuran minimum (20x20epx) – sebaliknya jika tinggi dan lebar diatur ke dua ukuran yang berbeda, ukuran yang lebih kecil akan diasumsikan. Untuk memastikan ProgressRing Anda benar untuk kebutuhan Anda, atur tinggi dan lebar ke nilai yang sama:

<ProgressRing Height="100" Width="100"/>

Untuk membuat ProgressRing Anda terlihat, dan menganimasikan, Anda harus mengatur properti IsActive ke true:

<ProgressRing IsActive="True" Height="100" Width="100"/>

progressRing.IsActive = true;

Mewarnai kontrol kemajuan

Secara default, pewarnaan utama kontrol kemajuan diatur ke warna aksen sistem. Untuk mengambil alih kuas ini, cukup ubah properti latar depan pada salah satu kontrol.

<ProgressRing IsActive="True" Height="100" Width="100" Foreground="Blue"/>
<ProgressBar Width="100" Foreground="Green"/>

Mengubah warna latar depan untuk ProgressRing akan mengubah warna isian cincin. Properti latar depan untuk ProgressBar akan mengubah warna isian bilah – untuk mengubah bagian bilah yang tidak terisi, cukup ambil alih properti latar belakang.

Memperlihatkan kursor tunggu

Terkadang yang terbaik adalah hanya menampilkan kursor tunggu singkat, ketika aplikasi atau operasi membutuhkan waktu untuk berpikir, dan Anda perlu menunjukkan kepada pengguna bahwa aplikasi atau area tempat kursor tunggu terlihat tidak boleh berinteraksi sampai kursor tunggu menghilang.

Window.Current.CoreWindow.PointerCursor = new Windows.UI.Core.CoreCursor(Windows.UI.Core.CoreCursorType.Wait, 10);

Mendapatkan kode sampel

• Sampel Galeri WinUI - Lihat semua kontrol XAML dalam format interaktif.

Artikel terkait

• Kelas ProgressBar
• Kelas ProgressRing