Bagikan melalui

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.

Pengendalian Display
Bilah Kemajuan Yang Tidak Ditentukan ProgressBar tidak ditentukan
Menentukan Bilah Kemajuan ProgressBar menentukan
ProgressRing Tidak Ditentukan Status ProgressRing tidak ditentukan
Menentukan Cincin Progres Menentukan status ProgressRing

Apakah ini kontrol yang tepat?

Tidak selalu jelas pengendalian atau status apa (tertentu vs tidak tertentu) yang harus digunakan saat mencoba menunjukkan bahwa sesuatu sedang 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.

Bilah Kemajuan

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

    Gunakan ProgressBar yang deterministik, kemudian 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 kembali
    • Bekerja...

Cincin 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 deterministik jika Anda ingin visual menjadi cincin daripada bilah, dan perbarui nilai atau persentase 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 yang berjalan di latar belakang yang tidak memblokir aktivitas pengguna dan memiliki ketertarikan minimal (tetapi tetap memiliki ketertarikan) 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 pengendalian kemajuan

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

ProgressBar - Menentukan

Contoh penentuan ProgressBar

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

ProgressBar - Tidak ditentukan

Contoh ProgressBar yang tidak ditentukan

Ketika tidak diketahui berapa lama operasi akan berlangsung, gunakan ProgressBar yang tidak ditentukan. ProgressBar yang tidak pasti juga baik saat mengisi daftar yang tervirtualisasi, serta menciptakan transisi visual yang mulus antara ProgressBar yang tidak pasti ke ProgressBar yang pasti.

  • Apakah operasi dalam koleksi yang tervirtualisasi?

    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 ProgressRing yang 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

Contoh penggunaan ProgressRing dengan nilai pasti

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

Membuat pengendalian kemajuan

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 cukup sederhana; namun beberapa fitur visual kontrol sulit untuk disesuaikan.

Pengaturan Ukuran ProgressRing

ProgressRing dapat berukuran sebesa keinginan Anda, tetapi hanya bisa sekecil 20x20px. 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.

Menampilkan 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);

UWP dan WinUI 2

Penting

Informasi dan contoh dalam artikel ini dioptimalkan untuk aplikasi yang menggunakan Windows App SDK 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 .

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 />
  • Last updated on