Pengikatan dan daftar data

  • 10 menit

Tech logo of U W P and W P F. W P F appears dimmed.

Sejauh ini, Anda hanya menggunakan pengikatan data untuk menampilkan dan mengedit properti satu objek. Dalam pelajaran ini, Anda akan menerapkan konsep pengikatan data untuk menampilkan kumpulan objek. Untuk membuat hal-hal sederhana, objek-objek ini akan menjadi warna. Lebih khusus lagi, mereka akan menjadi beberapa instans ColorDescriptor kelas.

1. Buat ColorDescriptor kelas

Mari kita buat kelas untuk mewakili warna. DatabindingSample Klik kanan proyek di Penjelajah Solusi, pilih Tambahkan / Kelas, dan masukkan ColorDescriptor sebagai nama kelas. Pilih Tambahkan untuk membuat kelas.

ColorDescriptor berisi dua properti: warna itu sendiri sebagai Windows.UI.Color objek, dan nama warna. Ini juga memiliki konstruktor yang mengisi properti ini, ToString() metode yang menampilkan nama warna, dan nilai hex untuk komponen warna R, G, dan B. Berikut adalah seluruh ColorDescriptor kelas.

using Windows.UI;

namespace DatabindingSample
{
    public class ColorDescriptor : ObservableObject
    {
        public ColorDescriptor(Color color, string name)
        {
            Color = color;
            Name = name;
        }

        public Color Color { get; private set; }

        public string Name { get; private set; }

        public override string ToString()
        {
            return $"{Name} (#{Color.R:X2}{Color.G:X2}{Color.B:X2})";
        }
    }
}

Ganti konten default file ColorDescriptor.cs dengan kode sebelumnya.

2. Buat halaman ColorList.xaml

Untuk menampilkan daftar warna, kita akan menggunakan halaman XAML baru. DatabindingSample Klik kanan proyek di Penjelajah Solusi, dan pilih Tambahkan/ Item Baru. Pilih Halaman Kosong dari daftar item yang tersedia, lalu masukkan ColorList sebagai nama. Pilih Tambahkan untuk membuat halaman.

Screenshot that shows Blank Page selected under Visual C Sharp, in the Add New Item dialog box.

3. Atur halaman startup

Sekarang jika Anda meluncurkan aplikasi, aplikasi akan terbuka dengan halaman MainPage . Karena Anda akan bekerja dengan halaman ColorList.xaml yang baru dibuat, akan lebih baik untuk memilikinya sebagai halaman awal. Untuk melewatkannya, buka App.xaml.cs, dan temukan garis yang menavigasi ke MainPage.

rootFrame.Navigate(typeof(MainPage), e.Arguments);

Ganti MainPage dengan ColorList, dan verifikasi bahwa halaman ColorList diluncurkan saat Anda memulai aplikasi (tekan F5 atau pilih Debug / Mulai Debugging).

4. Buat logika untuk daftar warna

Kami akan melanjutkan praktik terbaik yang diperkenalkan sebelumnya untuk membuat logika terpisah untuk halaman baru. Jadi, lanjutkan dan buat kelas baru, yang disebut ColorListLogic.

DatabindingSample Klik kanan proyek di Penjelajah Solusi, pilih Tambahkan / Kelas, lalu masukkan ColorListLogic sebagai nama kelas. Pilih Tambahkan untuk membuat kelas, dan tempelkan yang berikut ini ke dalam file:

using System.Collections.Generic;
using System.Collections.ObjectModel;

using Windows.UI;

namespace DatabindingSample
{
    public class ColorListLogic : ObservableObject
    {
        public List<ColorDescriptor> LotsOfColors { get; private set; }

        public ColorListLogic()
        {
            LotsOfColors = new List<ColorDescriptor>
            {
               new ColorDescriptor(Colors.Red, "red"),
               new ColorDescriptor(Colors.White, "white"),
               new ColorDescriptor(Colors.Green, "green"),
               new ColorDescriptor(Colors.Yellow, "yellow"),
               new ColorDescriptor(Colors.Blue, "blue"),
               new ColorDescriptor(Colors.Black, "black")
            };

        }
    }
}

Kelas ColorListLogic ini sangat sederhana (untuk saat ini). Ini memiliki properti yang disebut LotsOfColors, yang merupakan ListColorDescriptor objek. Daftar diisi dengan beberapa warna di konstruktor kelas. Dan selesai.

5. Tampilkan warna dalam ListBox

Langkah selanjutnya adalah menampilkan warna di aplikasi kami. Pertama, mari kita buat yang ColorListLogic dapat diakses dari XAML. ColorList.xaml.csBuka , dan tambahkan ini ke ColorList kelas :

public ColorListLogic Logic { get; } = new ColorListLogic();

Kami menggunakan sintaks yang sama di sini seperti yang kami lakukan untuk MainPageLogic sebelumnya. Ini membuat properti get-only, dan menginisialisasi nilainya ke objek yang baru dibuat ColorListLogic .

Selanjutnya, buka ColorList.xaml dan tambahkan XAML berikut di Grid dalam elemen .

<ListBox ItemsSource="{x:Bind Logic.LotsOfColors}" 
         Margin="20" 
         Width="200"
         HorizontalAlignment="Left" 
         VerticalAlignment="Top"/>

Bagian yang menarik di sini adalah ItemsSource atributnya. Seperti namanya, ini menyediakan sumber item yang ditampilkan di ListBox. Dan itu hanya terikat ke ColorListLogicproperti .LotsOfColors

Jika Anda menjalankan aplikasi sekarang, aplikasi akan menampilkan warna dalam !ListBox Tapi tidak terlalu bagus untuk dilihat. tampaknya ListBox telah memanggil ToString() metode s yang ColorDescriptordisimpan dalam LotsOfColors daftar.

Screenshot that shows the Data binding Sample window, with yellow selected.

6. Tentukan templat untuk item

Akan lebih baik memiliki templat yang menunjukkan warna aktual yang disimpan dalam ColorDescriptor.Color properti, dan namanya. Sesuatu seperti ini:

Screenshot of template.

Untuk mengodekan ini di XAML, kita dapat menempatkan berwarna Rectangle dan a TextBlock dalam StackPanel.

<StackPanel Orientation="Horizontal">
    <Rectangle Width="80" Height="20">
        <Rectangle.Fill>
            <SolidColorBrush Color="Blue"/>
        </Rectangle.Fill>
    </Rectangle>
    <TextBlock Text="blue" Margin="20, 10, 0, 10"/>
</StackPanel>

Ini adalah salah satu kekuatan XAML dan pengikatan data. Hampir setiap visual kompleks didasarkan pada templat yang dapat Anda tentukan ulang. Untuk menggunakan yang sebelumnya StackPanel sebagai templat, kita perlu memasukkannya ke dalam DataTemplate. DataTemplate Kebutuhan untuk menentukan DataType, yang merupakan jenis data tempat templat dapat diterapkan. Dalam kasus kami, itu adalah ColorDescriptor kelas. Jadi, DataTemplate terlihat seperti ini:

<DataTemplate x:DataType="local:ColorDescriptor">
    <!-- template content comes here -->
</DataTemplate>

Bagaimana data dirender dalam (dan banyak kontrol lain) dikontrol ListBox oleh ItemTemplate, yang harus diatur ke DataTemplate. Ada beberapa cara untuk melakukan ini. Dalam pelajaran ini, kita hanya akan menentukan di DataTemplate dalam ListBox, dengan sintaks berikut:

<ListBox ...>
    <ListBox.ItemsSource>
        <DataTemplate ...>
            ...
        </DataTemplate>
    </ListBox.ItemsSource>
</ListBox>

Nantinya, Anda akan melihat bagaimana DataTemplate dapat digunakan kembali di beberapa tempat dengan menentukannya sebagai sumber daya.

Sekarang seluruh ListBox terlihat seperti ini (jika Anda belum mengikuti, ganti seluruh <ListBox> tag dengan XAML berikut):

<ListBox ItemsSource="{x:Bind Logic.LotsOfColors}" 
         Margin="20" 
         Width="200"
         HorizontalAlignment="Left" 
         VerticalAlignment="Top">
    <ListBox.ItemTemplate>
        <DataTemplate x:DataType="local:ColorDescriptor">
            <StackPanel Orientation="Horizontal">
                <Rectangle Width="80" 
                           Height="20">
                    <Rectangle.Fill>
                        <SolidColorBrush Color="{x:Bind Color}"/>
                    </Rectangle.Fill>
                </Rectangle>
                <TextBlock Text="{x:Bind Name}" 
                           Margin="20, 10, 0, 10"/>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Perhatikan bahwa karena setiap item dalam ListBox sesuai dengan ColorDescriptor objek, Anda hanya perlu menentukan pengikatan di dalam templat dalam konteks kelas ini. Pengkompilasi bahkan memeriksa bahwa Logic.LotsOfColors berisi ColorDescriptor objek, dan itu ColorDescriptor.Color dan ColorDescriptor.Name ada dan merupakan jenis yang tepat.

7. Jalankan aplikasi

Jalankan aplikasi sekarang dengan menekan F5 atau dengan memilih Debug / Mulai Debugging di menu. Anda akan melihat daftar warna dalam semua kemuliaannya.

Screenshot that shows the Data binding Sample window, with a list of six colors next to rectangles representing the color.

Jika Anda meluncurkan aplikasi XAML dalam mode debug, Anda dapat memanfaatkan pengeditan XAML langsung. Anda bahkan tidak perlu menghentikan aplikasi atau menekan simpan. Cukup ubah XAML, dan sebagian besar perubahan Anda langsung tercermin pada aplikasi yang sedang berjalan. Coba sekarang. Width Ubah dan Height dari Rectangle dalam templat data menjadi 30, sehingga mengubah persegi panjang warna menjadi kotak.

Screenshot that shows the Data binding Sample window, with a list of six colors next to squares representing the color.

Ini disebut XAML Hot Reload, dan dapat berguna untuk menyempurnakan tata letak dan animasi di aplikasi Anda.

Ringkasan

Pelajaran ini menunjukkan dasar-dasar menampilkan beberapa item dalam ListBox. Ada kontrol lain yang tersedia untuk tujuan serupa, seperti ItemsControl, ListView, dan GridView. Tetapi prinsip dasarnya sama: ikat daftar Anda (IEnumerable, List<>) objek ke ItemsSource properti , dan tentukan DataTemplates untuk mengontrol bagaimana item daftar individu ditampilkan dan berprilaku. Anda juga dapat menentukan ulang tata letak item ini, dan bahkan tampilan kontainer mengontrol diri mereka sendiri (meskipun ini di luar cakupan modul ini).

Perhatikan bahwa kode tidak pernah harus berurusan dengan itu ListBox sendiri. Ini baru saja membuat kumpulan objek bisnis (ColorDescriptor), dan runtime XAML mengurus perluasan templat untuk setiap item.

Pelajaran berikutnya menggambarkan bagaimana Anda dapat memilih item dari ListBox atau dropdown, dan mengubah konten daftar dari kode sehingga menambahkan dan menghapus elemen tercermin pada UI.

Tech logo of U W P and W P F. U W P appears dimmed.

Sejauh ini, Anda hanya menggunakan pengikatan data untuk menampilkan dan mengedit properti satu objek. Dalam pelajaran ini, Anda akan menerapkan konsep pengikatan data untuk menampilkan kumpulan objek. Untuk membuat hal-hal sederhana, objek-objek ini akan menjadi warna. Lebih khusus lagi, mereka akan menjadi beberapa instans ColorDescriptor kelas.

1. Buat ColorDescriptor kelas

Mari kita buat kelas untuk mewakili warna. DatabindingSampleWPF Klik kanan proyek di Penjelajah Solusi, pilih Tambahkan / Kelas, dan masukkan ColorDescriptor sebagai nama kelas. Pilih Tambahkan untuk membuat kelas.

ColorDescriptor berisi dua properti: warna itu sendiri sebagai System.Windows.Media.Color objek, dan nama warna. Ini juga memiliki konstruktor yang mengatur properti ini, ToString() metode yang menampilkan nama warna, dan nilai hex untuk komponen warna R, G, dan B. Berikut adalah seluruh ColorDescriptor kelas.

using System.Windows.Media;

namespace DatabindingSampleWPF
{
    public class ColorDescriptor : ObservableObject
    {
        public ColorDescriptor(Color color, string name)
        {
            Color = color;
            Name = name;
        }

        public Color Color { get; private set; }

        public string Name { get; private set; }

        public override string ToString()
        {
            return $"{Name} (#{Color.R:X2}{Color.G:X2}{Color.B:X2})";
        }
    }
}

Ganti konten ColorDescriptor.cs default file dengan kode sebelumnya.

2. Buat halaman ColorList.xaml

Untuk menampilkan daftar warna, kita akan menggunakan file XAML baru. DatabindingSampleWPF Klik kanan proyek di Penjelajah Solusi, dan pilih Tambahkan/ Item Baru. Pilih Jendela (WPF) dari daftar item yang tersedia, lalu masukkan ColorList sebagai nama. Pilih Tambahkan untuk membuat halaman.

Screenshot of Add New Item dialog box.

3. Atur file XAML startup

Sekarang jika Anda meluncurkan aplikasi, aplikasi akan terbuka dengan MainWindow. Karena Anda akan bekerja dengan yang baru dibuat ColorList.xaml, akan lebih baik untuk memiliki tampilan itu saat startup. Untuk menyatukannya, buka App.xaml, dan temukan StratupUri atribut elemen akar Application .

StartupUri="MainWindow.xaml"

Ganti MainWindow dengan ColorList, dan verifikasi bahwa Daftar Warna ditampilkan saat Anda memulai aplikasi (tekan F5 atau pilih Debug / Mulai Penelusuran Kesalahan).

Screenshot that shows an empty Color List window.

4. Buat DataContext untuk daftar warna

Kami akan melanjutkan praktik terbaik yang diperkenalkan sebelumnya untuk membuat kelas terpisah DataContext untuk jendela XAML baru. Jadi, kita akan melanjutkan dan membuat kelas baru, yang disebut ColorListDataContext.

DatabindingSample Klik kanan proyek di Penjelajah Solusi, pilih Tambahkan / Kelas, lalu masukkan ColorListDataContext sebagai nama kelas. Pilih Tambahkan untuk membuat kelas, dan tempelkan yang berikut ini ke dalam file:

using System.Collections.ObjectModel;
using System.Collections.Generic;
using System.Windows.Media;

namespace DatabindingSampleWPF
{
    public class ColorListDataContext: ObservableObject
    {
        public List<ColorDescriptor> LotsOfColors { get; private set; }

        public ColorListDataContext()
        {
            LotsOfColors = new List<ColorDescriptor>
            {
               new ColorDescriptor(Colors.Red, "red"),
               new ColorDescriptor(Colors.White, "white"),
               new ColorDescriptor(Colors.Green, "green"),
               new ColorDescriptor(Colors.Yellow, "yellow"),
               new ColorDescriptor(Colors.Blue, "blue"),
               new ColorDescriptor(Colors.Black, "black")
            };
        }
    }
}

Kelas ColorListDataContext ini sangat sederhana (untuk saat ini). Ini memiliki properti yang disebut LotsOfColors, yang merupakan ListColorDescriptor objek. Daftar diisi dengan beberapa warna di konstruktor kelas. Dan selesai.

5. Tampilkan warna dalam ListBox

Langkah selanjutnya adalah menampilkan warna di aplikasi kami. Seperti sebelumnya, kita perlu membuat instans ColorListDataContext kelas di ColorList.xaml, dan mengaturnya sebagai DataContext untuk seluruh jendela. ColorList.xamlBuka , dan tambahkan ini tepat setelah <Window ...> tag:

<Window.DataContext>
    <local:ColorListDataContext/>
</Window.DataContext>

Anda perlu mengkompilasi kode pada saat ini, sehingga perancang XAML dapat menyelesaikan kelas yang baru ditentukan ColorListDataContext .

Kemudian, salin markup XAML berikut di <Grid> dalam tag:

<ListBox ItemsSource="{Binding LotsOfColors}" 
         Margin="20" 
         Width="200"
         HorizontalAlignment="Left" 
         VerticalAlignment="Top"/>

Bagian yang menarik di sini adalah ItemsSource atributnya. Seperti namanya, ini menyediakan sumber item yang ditampilkan di ListBox. Dan itu hanya terikat ke ColorListDataContextproperti .LotsOfColors

Jika Anda menjalankan aplikasi sekarang, aplikasi akan menampilkan warna dalam !ListBox Tapi tidak terlalu bagus untuk dilihat. tampaknya ListBox telah memanggil ToString() metode s yang ColorDescriptordisimpan dalam LotsOfColors daftar.

Screenshot that shows the Color List window with six colors listed.

6. Tentukan templat untuk item

Akan lebih baik memiliki templat yang menunjukkan warna aktual yang disimpan dalam ColorDescriptor.Color properti dan namanya. Sesuatu seperti ini:

Screenshot fo template.

Untuk mengodekan ini di XAML, kita dapat menempatkan berwarna Rectangle dan a TextBlock dalam StackPanel.

<StackPanel Orientation="Horizontal">
    <Rectangle Width="80" Height="20">
        <Rectangle.Fill>
            <SolidColorBrush Color="Blue"/>
        </Rectangle.Fill>
    </Rectangle>
    <TextBlock Text="blue" Margin="20, 10, 0, 10"/>
</StackPanel>

Ini adalah salah satu kekuatan XAML dan pengikatan data. Hampir setiap visual kompleks didasarkan pada templat yang dapat Anda tentukan ulang. Untuk menggunakan di atas StackPanel sebagai templat, kita perlu memasukkannya ke dalam DataTemplate:

<DataTemplate>
    <!-- template content comes here -->
</DataTemplate>

Bagaimana data dirender dalam (dan banyak kontrol lain) dikontrol ListBox oleh ItemTemplate, yang harus diatur ke yang di DataTemplate atas. Ada beberapa cara untuk melakukan ini. Dalam pelajaran ini, kita hanya akan menentukan di DataTemplate dalam ListBox, dengan sintaks berikut:

<ListBox ...>
    <ListBox.ItemsSource>
        <DataTemplate ...>
            ...
        </DataTemplate>
    </ListBox.ItemsSource>
</ListBox>

Nantinya, Anda akan melihat bagaimana dapat DataTemplate digunakan kembali di beberapa tempat dengan menentukannya sebagai sumber daya.

Sekarang, markup untuk seluruh ListBox terlihat seperti ini (jika Anda belum mengikuti, ganti seluruh <ListBox> elemen dengan XAML berikut):

<ListBox ItemsSource="{Binding LotsOfColors}" 
         Margin="20" 
         Width="200"
         HorizontalAlignment="Left" 
         VerticalAlignment="Top">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <Rectangle Width="80" 
                           Height="20">
                    <Rectangle.Fill>
                        <SolidColorBrush Color="{Binding Color}"/>
                    </Rectangle.Fill>
                </Rectangle>
                <TextBlock Text="{Binding Name}" 
                           Margin="20, 10, 0, 10"/>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Perhatikan bahwa karena setiap item dalam ListBox sesuai dengan ColorDescriptor objek, Anda hanya perlu menentukan pengikatan di dalam templat dalam konteks kelas ini.

7. Jalankan aplikasi

Anda akan segera melihat daftar warna di Visual Studio. Hanya untuk memastikan, jalankan aplikasi sekarang dengan menekan F5 atau dengan memilih Debug / Mulai Debugging di menu.

Screenshot that shows the Color List window, with six colors listed next to rectangles representing the color.

Jika Anda meluncurkan aplikasi XAML dalam mode debug, Anda dapat memanfaatkan pengeditan XAML langsung. Anda bahkan tidak perlu menghentikan aplikasi atau menekan simpan. Cukup ubah XAML, dan sebagian besar perubahan Anda langsung tercermin pada aplikasi yang sedang berjalan. Coba sekarang. Width Ubah dan Height dari Rectangle dalam templat data menjadi 30, sehingga mengubah persegi panjang warna menjadi kotak.

Screenshot that shows the Color List window, with six colors listed next to squares representing the color.

Ini disebut XAML Hot Reload, dan dapat berguna untuk menyempurnakan tata letak dan animasi di aplikasi Anda.

Ringkasan

Pelajaran ini berjalan melalui dasar-dasar menampilkan beberapa item dalam ListBox. Ada kontrol lain yang tersedia untuk tujuan serupa, seperti ItemsControl, ListView, dan GridView. Tetapi prinsip dasarnya sama: ikat daftar Anda (IEnumerable, List<>) objek ke ItemsSource properti , dan tentukan DataTemplate untuk mengontrol bagaimana item daftar individu ditampilkan dan berprilaku. Anda juga dapat menentukan ulang tata letak item ini, dan bahkan tampilan kontainer mengontrol diri mereka sendiri (meskipun ini di luar cakupan modul ini).

Perhatikan bahwa kode logika tidak pernah memiliki pengetahuan tentang ListBox kontrol. Ini baru saja membuat kumpulan objek bisnis (ColorDescriptor), dan runtime XAML menangani penyajian templat untuk setiap item.

Pelajaran berikutnya menggambarkan bagaimana Anda dapat memilih item dari ListBox atau ComboBox, dan mengubah konten daftar dari kode sehingga menambahkan dan menghapus elemen tercermin pada UI.