Kontrol kemajuan

  • Artikel

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 tugas yang diselesaikan. Ini harus digunakan selama operasi yang durasinya diketahui, tetapi kemajuannya tidak boleh memblokir interaksi pengguna dengan aplikasi.
  • Status yang 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 dapat dibaca dan tidak interaktif. Artinya pengguna tidak dapat memanggil atau menggunakan kontrol ini secara langsung.

Kontrol Tampilan
Bilah Kemajuan Tidak Ditentukan ProgressBar tidak ditentukan
Menentukan Bilah Kemajuan ProgresBar menentukan
Progres Yang Tidak Ditentukan Status ProgressRing tidak ditentukan
Menentukan KemajuanRing Menentukan status Kemajuan

Apakah ini kontrol yang tepat?

Tidak selalu jelas kontrol apa atau status apa (menentukan vs tidak ditentukan) untuk digunakan ketika 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 tidak 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:

    • Memuat...
    • Mengambil
    • Bekerja...

ProgressRing

  • 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, bukan 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 operasi kemajuan yang cocok dengan kata kunci ini; pertimbangkan untuk menggunakan ProgressRing:

    • Me-refresh
    • Sedang 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 adalah 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 menampilkan 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:

Bilah Kemajuan - Menentukan

Contoh penentukan ProgressBar

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

ProgressBar - Tidak ditentukan

Contoh ProgresBar 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

Contoh progres yang tidak ditentukan

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

ProgressRing - Menentukan

Contoh penentuan ProgressRing

Ketika durasi operasi diketahui dan visual cincin diinginkan, saat menginstal, mengunduh, menyiapkan, dll; Progres 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 Pustaka UI Windows 2. Untuk informasi selengkapnya, termasuk instruksi penginstalan, lihat Pustaka Windows UI. API untuk kontrol ini ada di namespace Windows.UI.Xaml.Controls dan Microsoft.UI.Xaml.Controls .

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

Buka aplikasi Galeri WinUI 3 dan lihat ProgressBar atau ProgressRing.

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

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 sudah 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 kedua 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);

Dapatkan kode sampel