Pemilihan templat data: Menata item berdasarkan propertinya

Desain kontrol koleksi yang disesuaikan dikelola oleh DataTemplate. Templat data menentukan bagaimana setiap item harus ditata dan ditata, dan markup tersebut diterapkan ke setiap item dalam koleksi. Artikel ini menjelaskan cara menggunakan DataTemplateSelector untuk menerapkan templat data yang berbeda pada koleksi dan memilih templat data mana yang akan digunakan, berdasarkan properti item atau nilai tertentu yang Anda pilih.

API Penting: DataTemplateSelector, DataTemplate

DataTemplateSelector adalah kelas yang memungkinkan logika pemilihan templat kustom. Ini memungkinkan Anda menentukan aturan yang menentukan templat data mana yang akan digunakan untuk item tertentu dalam koleksi. Untuk mengimplementasikan logika ini, Anda membuat subkelas DataTemplateSelector di code-behind Anda dan menentukan logika yang menentukan templat data mana yang akan digunakan untuk kategori item mana (misalnya, item jenis atau item tertentu dengan nilai properti tertentu, dll). Anda mendeklarasikan instans kelas ini di bagian Sumber Daya file XAML Anda, bersama dengan definisi templat data yang akan Anda gunakan. Anda mengidentifikasi sumber daya ini dengan x:Key nilai, yang memungkinkan Anda mereferensikannya di XAML Anda.

Prasyarat

• Cara menggunakan dan membuat kontrol koleksi, seperti ListView atau GridView.
• Cara mengkustomisasi tampilan item Anda menggunakan DataTemplate.

Kapan tidak menggunakan DataTemplateSelector

Umumnya, Anda tidak boleh memberikan setiap item dalam ListView atau GridView tata letak/gaya yang sama sekali berbeda - ini akan menjadi penggunaan dataTemplateSelector yang buruk, dan berdampak negatif pada performa.

Elemen tertentu dari tampilan visual item daftar dapat dikontrol hanya dengan menggunakan satu templat data, melalui pengikatan properti tertentu. Misalnya, item masing-masing dapat memiliki ikon yang berbeda dengan mengikat properti sumber ikon di templat data, dan memberi setiap item nilai yang berbeda untuk properti sumber ikon tersebut. Ini akan mencapai performa yang lebih baik daripada menggunakan DataTemplateSelector.

Kapan menggunakan DataTemplateSelector

Anda harus membuat DataTemplateSelector saat Anda ingin menggunakan beberapa templat data dalam satu kontrol koleksi. A DataTemplateSelector memberi Anda fleksibilitas untuk membuat item tertentu menonjol, sambil tetap menyimpan item dalam tata letak yang sama. Ada banyak kasus penggunaan di mana DataTemplateSelector sangat membantu, dan beberapa skenario di mana lebih baik untuk memikirkan kembali kontrol dan strategi yang Anda gunakan.

Kontrol koleksi biasanya terikat ke kumpulan item yang semuanya merupakan satu jenis. Namun, meskipun item mungkin memiliki jenis yang sama, item mungkin memiliki nilai yang berbeda untuk properti tertentu atau mewakili arti yang berbeda. Item tertentu juga mungkin lebih penting daripada yang lain, atau satu item mungkin sangat penting atau berbeda dan memiliki kebutuhan untuk menonjol secara visual. Dalam situasi ini, DataTemplateSelector akan sangat membantu.

Anda juga dapat mengikat koleksi yang berisi berbagai jenis item - koleksi terikat dapat memiliki campuran string, ints, objek kelas kustom, dan banyak lagi. Ini membuat DataTemplateSelector sangat berguna karena dapat menetapkan templat data yang berbeda berdasarkan jenis objek item.

Berikut adalah beberapa contoh kapan Anda mungkin menggunakan pemilih templat data:

• Mewakili berbagai tingkat karyawan dalam ListView - setiap jenis/tingkat karyawan mungkin memerlukan latar belakang warna yang berbeda agar mudah dibedakan.
• Mewakili item penjualan di galeri produk yang menggunakan GridView - item penjualan mungkin memerlukan latar belakang merah, atau font warna yang berbeda untuk membuatnya menonjol dari item dengan harga reguler.
• Menampilkan foto pemenang/teratas dalam galeri foto menggunakan FlipView.
• Perlu mewakili angka negatif/positif dalam ListView secara berbeda, atau string pendek/string panjang.

Membuat DataTemplateSelector

Saat Anda membuat pemilih templat data, Anda menentukan logika pemilihan templat dalam kode Anda, dan Anda menentukan templat data di XAML Anda.

Komponen code-behind

Untuk menggunakan pemilih templat data, Anda terlebih dahulu membuat subkelas DataTemplateSelector (kelas yang berasal darinya) di code-behind Anda. Di kelas, Anda mendeklarasikan setiap templat sebagai properti kelas. Kemudian, Anda mengambil alih metode SelectTemplateCore untuk menyertakan logika pemilihan templat Anda sendiri.

Berikut adalah contoh subkelas sederhana DataTemplateSelector yang disebut MyDataTemplateSelector.

public class MyDataTemplateSelector : DataTemplateSelector
{
    public DataTemplate Normal { get; set; }
    public DataTemplate Accent { get; set; }

    protected override DataTemplate SelectTemplateCore(object item)
    {
        if ((int)item % 2 == 0)
        {
            return Normal;
        }
        else
        {
            return Accent;
        }
    }
}

Kelas MyDataTemplateSelector diturunkan dari kelas DataTemplateSelector dan pertama mendefinisikan dua objek DataTemplate: Normal dan Accent. Ini adalah deklarasi kosong untuk saat ini, tetapi akan "diisi" dengan markup dalam file XAML.

Metode SelectTemplateCore ini mengambil objek item (yaitu setiap item koleksi), dan memiliki aturan yang menggantikan untuk menentukan DataTemplate yang akan dikembalikan dalam kondisi tertentu. Dalam hal ini, jika item adalah angka ganjil, item menerima Accent templat data, sementara jika berupa angka genap, item menerima Normal templat data.

Komponen XAML

Kedua, Anda harus membuat instans kelas baru MyDataTemplateSelector ini di bagian Sumber Daya file XAML Anda. Semua sumber daya memerlukan x:Key, yang Anda gunakan untuk mengikatnya ke ItemTemplateSelector properti kontrol koleksi Anda (di langkah selanjutnya). Anda juga membuat dua instans DataTemplate objek dan menentukan tata letaknya di bagian sumber daya. Anda menetapkan templat data ini ke properti Accent dan Normal yang Anda deklarasikan di kelas MyDataTemplateSelector.

Berikut adalah contoh sumber daya XAML dan markup yang diperlukan:

<Page.Resources>

<DataTemplate x:Key="NormalItemTemplate" x:DataType="x:Int32">
    <Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="{ThemeResource SystemChromeLowColor}">
        <TextBlock Text="{x:Bind}" />
    </Button>
</DataTemplate>

<DataTemplate x:Key="AccentItemTemplate" x:DataType="x:Int32">
    <Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="{ThemeResource SystemAccentColor}">
        <TextBlock Text="{x:Bind}" />
    </Button>
</DataTemplate>

<l:MyDataTemplateSelector x:Key="MyDataTemplateSelector"
    Normal="{StaticResource NormalItemTemplate}"
    Accent="{StaticResource AccentItemTemplate}"/>

</Page.Resources>

Seperti yang Anda lihat di atas, dua templat data dan Normal didefinisikan - keduanya menampilkan item sebagai tombol, namun Accent templat data menggunakan kuas warna aksen untuk latar belakang, sementara Accent templat data menggunakan kuas warna abu-abu (Normal).SystemChromeLowColor Kedua templat data ini kemudian ditetapkan ke objek DataTemplate Normal dan Accent, yang menjadi atribut dari kelas MyDataTemplateSelector, dibuat di kode-di-balik C#.

Langkah terakhir adalah mengikat DataTemplateSelector Anda ke properti ItemTemplateSelector dari kontrol koleksi Anda (dalam hal ini, ListView). Ini menggantikan kebutuhan untuk menetapkan nilai ke ItemTemplate properti .

<ListView x:Name = "TestListView"
          ItemsSource = "{x:Bind NumbersList}"
          ItemTemplateSelector = "{StaticResource MyDataTemplateSelector}">
</ListView>

Setelah kode Anda dikompilasi, setiap item koleksi akan berjalan melalui metode SelectTemplateCore yang di-override dalam MyDataTemplateSelector, dan akan dirender dengan DataTemplate yang sesuai.

Penting

Saat menggunakan DataTemplateSelector dengan ItemsRepeater, Anda mengikat DataTemplateSelector ke properti ItemTemplate. ItemsRepeater tidak memiliki ItemTemplateSelector properti.

Pertimbangan performa DataTemplateSelector

Saat Anda menggunakan ListView atau GridView dengan kumpulan data yang besar, kinerja gulir dan panning bisa menjadi perhatian. Agar koleksi besar tetap berkinerja baik, ada beberapa langkah yang dapat Anda lakukan untuk meningkatkan performa templat data Anda. Ini dijelaskan secara lebih rinci dalam pengoptimalan UI ListView dan GridView.

• Pengurangan elemen per item - Pertahankan jumlah elemen UI dalam templat data seminimal mungkin.
• Daur ulang kontainer dengan koleksi heterogen
  • Gunakan event ChoosingItemContainer - Event ini adalah cara yang efisien untuk menggunakan template data yang berbeda untuk item yang berbeda. Untuk kinerja terbaik, Anda harus mengoptimalkan caching dan memilih templat data yang sesuai dengan data spesifik Anda.
  • Gunakan pemilih templat item - Pemilih templat item (DataTemplateSelector) harus dihindari dalam beberapa kasus karena dampaknya pada kinerja.