Kontrol peringkat

Kontrol peringkat memungkinkan pengguna untuk melihat dan mengatur peringkat yang mencerminkan tingkat kepuasan dengan konten dan layanan. Pengguna dapat berinteraksi dengan kontrol peringkat dengan sentuhan, pena, mouse, gamepad, atau keyboard. Panduan berikut menunjukkan cara menggunakan fitur kontrol peringkat untuk memberikan fleksibilitas dan kustomisasi.

Contoh Kontrol Peringkat

Gambaran Umum

Kontrol peringkat dapat digunakan untuk memasukkan peringkat, atau dibuat baca-saja untuk menampilkan peringkat.

Peringkat yang dapat diedit dengan nilai tempat penampung

Mungkin cara paling umum untuk menggunakan kontrol peringkat adalah dengan menampilkan peringkat rata-rata sambil tetap memungkinkan pengguna untuk memasukkan nilai peringkat mereka sendiri. Dalam skenario ini, kontrol peringkat awalnya diatur untuk mencerminkan peringkat kepuasan rata-rata semua pengguna layanan atau jenis konten tertentu (seperti musik, video, buku, dll.). Ini tetap dalam status ini sampai pengguna berinteraksi dengan kontrol dengan tujuan memberi peringkat satu item secara individual. Interaksi ini mengubah status kontrol peringkat untuk mencerminkan peringkat kepuasan pribadi pengguna.

Status peringkat rata-rata awal

Status Peringkat Rata-Rata Awal

Representasi peringkat pengguna setelah ditetapkan

Representasi Peringkat Pengguna Sekali Ditetapkan

Mode peringkat baca-saja

Terkadang Anda perlu menampilkan peringkat konten sekunder, seperti yang ditampilkan dalam konten yang direkomendasikan atau saat menampilkan daftar komentar dan peringkat yang sesuai. Dalam hal ini, pengguna seharusnya tidak dapat mengedit peringkat, sehingga Anda dapat membuat kontrol baca-saja. Mode baca-saja juga merupakan cara yang disarankan untuk menggunakan kontrol peringkat ketika digunakan dalam daftar konten virtual yang sangat besar, baik untuk desain UI maupun alasan performa.

Daftar Panjang Baca-Saja

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.

RatingControl untuk aplikasi UWP disertakan sebagai bagian dari Windows UI Library 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.

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:RatingControl />

Membuat kontrol peringkat

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

Kontrol peringkat yang dapat diedit

Kode ini menunjukkan cara membuat kontrol peringkat yang dapat diedit dengan nilai tempat penampung.

<RatingControl x:Name="MyRating" ValueChanged="RatingChanged"/>
private void RatingChanged(RatingControl sender, object args)
{
    if (sender.Value == null)
    {
        MyRating.Caption = "(" + SomeWebService.HowManyPreviousRatings() + ")";
    }
    else
    {
        MyRating.Caption = "Your rating";
    }
}

Kontrol peringkat baca-saja

Kode ini menunjukkan cara membuat kontrol peringkat baca-saja.

<RatingControl IsReadOnly="True"/>

Fungsionalitas tambahan

Kontrol peringkat memiliki banyak fitur tambahan yang dapat digunakan. Detail untuk menggunakan fitur-fitur ini dapat ditemukan dalam dokumentasi referensi kami. Berikut adalah daftar fungsionalitas tambahan yang tidak komprehensif:

  • Performa daftar panjang yang bagus
  • Ukuran ringkas untuk skenario UI yang ketat
  • Pengisian dan peringkat nilai berkelanjutan
  • Penyesuaian spasi
  • Menonaktifkan animasi pertumbuhan
  • Kustomisasi jumlah bintang

Dapatkan kode sampel