Menampilkan pelanggan dalam daftar

Menampilkan dan memanipulasi data nyata di UI sangat penting untuk fungsionalitas banyak aplikasi. Artikel ini akan menunjukkan kepada Anda apa yang perlu Anda ketahui untuk menampilkan kumpulan objek Pelanggan dalam daftar.

Ini bukan tutorial. Jika Anda menginginkannya, lihat tutorial pengikatan data kami, yang akan memberi Anda pengalaman terpandu langkah demi langkah.

Kita akan mulai dengan diskusi cepat tentang pengikatan data - apa itu dan cara kerjanya. Kemudian kita akan menambahkan ListView ke UI, menambahkan pengikatan data, dan menyesuaikan pengikatan data dengan fitur tambahan.

Apa yang perlu Anda ketahui?

Pengikatan data adalah cara untuk menampilkan data aplikasi di antarmuka penggunanya. Ini memungkinkan pemisahan masalah di aplikasi Anda, menjaga UI Anda terpisah dari kode Anda yang lain. Ini menciptakan model konseptual yang lebih bersih yang lebih mudah dibaca dan dirawat.

Setiap pengikatan data memiliki dua bagian:

• Sumber yang menyediakan data untuk diikat.
• Target di UI tempat data ditampilkan.

Untuk menerapkan pengikatan data, Anda harus menambahkan kode ke sumber Yang menyediakan data ke pengikatan. Anda juga harus menambahkan salah satu dari dua ekstensi markup ke XAML Anda untuk menentukan properti sumber data. Berikut adalah perbedaan utama antara keduanya:

• x:Bind sangat ditik, dan menghasilkan kode pada waktu kompilasi untuk performa yang lebih baik. x:Ikat default ke pengikatan satu kali, yang mengoptimalkan tampilan cepat data baca-saja yang tidak berubah.
• Pengikatan diketik dengan lemah dan dirakit saat runtime. Ini menghasilkan performa yang lebih buruk daripada dengan x:Bind. Dalam hampir semua kasus, Anda harus menggunakan x:Bind alih-alih Pengikatan. Namun, Anda mungkin akan menemukannya dalam kode yang lebih lama. Mengikat default ke transfer data satu arah, yang mengoptimalkan data baca-saja yang dapat berubah di sumbernya.

Kami sarankan Anda menggunakan x:Bind jika memungkinkan, dan kami akan menampilkannya dalam cuplikan dalam artikel ini. Untuk informasi selengkapnya tentang perbedaannya, lihat {x:Bind} dan perbandingan fitur {Binding}.

Membuat sumber data

Pertama, Anda memerlukan kelas untuk mewakili data Pelanggan Anda. Untuk memberi Anda titik referensi, kami akan menunjukkan proses pada contoh tulang kosong ini:

public class Customer
{
    public string Name { get; set; }
}

Buat daftar

Sebelum dapat menampilkan pelanggan apa pun, Anda perlu membuat daftar untuk menahannya. Tampilan Daftar adalah kontrol XAML dasar yang ideal untuk tugas ini. ListView Anda saat ini memerlukan posisi di halaman, dan akan segera memerlukan nilai untuk properti ItemSource-nya.

<ListView ItemsSource=""
    HorizontalAlignment="Center"
    VerticalAlignment="Center"/>

Setelah Anda mengikat data ke ListView, kami mendorong Anda untuk kembali ke dokumentasi, dan bereksperimen dengan menyesuaikan tampilan dan tata letaknya agar paling sesuai dengan kebutuhan Anda.

Mengikat data ke daftar Anda

Sekarang setelah Anda membuat UI dasar untuk menahan pengikatan, Anda perlu mengonfigurasi sumber Anda untuk menyediakannya. Berikut adalah contoh bagaimana hal ini dapat dilakukan:

public sealed partial class MainPage : Page
{
    public ObservableCollection<Customer> Customers { get; }
        = new ObservableCollection<Customer>();

    public MainPage()
    {
        this.InitializeComponent();
          // Add some customers
        this.Customers.Add(new Customer() { Name = "NAME1"});
        this.Customers.Add(new Customer() { Name = "NAME2"});
        this.Customers.Add(new Customer() { Name = "NAME3"});
    }
}

<ListView ItemsSource="{x:Bind Customers}"
    HorizontalAlignment="Center"
    VerticalAlignment="Center">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="local:Customer">
            <TextBlock Text="{x:Bind Name}"/>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Gambaran umum Pengikatan Data memancang Anda melalui masalah serupa, di bagiannya tentang mengikat kumpulan item. Contoh kami di sini menunjukkan langkah-langkah penting berikut:

• Di kode belakang UI Anda, buat properti jenis ObservableCollection<T> untuk menyimpan objek Pelanggan Anda.
• Ikat ItemSource ListView Anda ke properti tersebut.
• Berikan ItemTemplate dasar untuk ListView, yang akan mengonfigurasi bagaimana setiap item dalam daftar ditampilkan.

Jangan ragu untuk melihat kembali dokumen Tampilan Daftar jika Anda ingin menyesuaikan tata letak, menambahkan pilihan item, atau mengubah DataTemplate yang baru saja Anda buat. Tapi bagaimana jika Anda ingin mengedit Pelanggan Anda?

Mengedit Pelanggan Anda melalui UI

Anda telah menampilkan pelanggan dalam daftar, tetapi pengikatan data memungkinkan Anda melakukan lebih banyak hal. Bagaimana jika Anda dapat mengedit data langsung dari UI? Untuk melakukan ini, mari kita bicarakan terlebih dahulu tentang tiga mode pengikatan data:

• Satu Kali: Pengikatan data ini hanya diaktifkan sekali, dan tidak bereaksi terhadap perubahan.
• Satu Arah: Pengikatan data ini akan memperbarui UI dengan perubahan apa pun yang dilakukan pada sumber data.
• Dua Arah: Pengikatan data ini akan memperbarui UI dengan perubahan apa pun yang dilakukan pada sumber data, dan juga memperbarui data dengan perubahan apa pun yang dibuat dalam UI.

Jika Anda telah mengikuti cuplikan kode dari sebelumnya, pengikatan yang Anda buat menggunakan x:Bind dan tidak menentukan mode, menjadikannya pengikatan Satu Kali. Jika Anda ingin mengedit Pelanggan langsung dari UI, Anda harus mengubahnya menjadi pengikatan Dua Arah, sehingga perubahan dari data akan diteruskan kembali ke objek Pelanggan. Pengikatan data secara mendalam memiliki informasi lebih lanjut .

Pengikatan dua arah juga akan memperbarui UI jika sumber data diubah. Agar ini berfungsi, Anda harus menerapkan INotifyPropertyChanged pada sumber dan memastikan setter propertinya meningkatkan peristiwa PropertyChanged. Praktik umumnya adalah meminta mereka memanggil metode pembantu seperti metode OnPropertyChanged , seperti yang ditunjukkan di bawah ini:

public class Customer : INotifyPropertyChanged
{
    private string _name;
    public string Name
    {
        get => _name;
        set
        {
            if (_name != value)
                {
                    _name = value;
                    this.OnPropertyChanged();
                }
        }
    }
    public event PropertyChangedEventHandler PropertyChanged;

    public void OnPropertyChanged([CallerMemberName] string propertyName = null) =>
        this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}

Kemudian buat teks di ListView Anda dapat diedit dengan menggunakan TextBox alih-alih TextBlock, dan pastikan Anda mengatur Mode pada pengikatan data Anda ke TwoWay.

<ListView ItemsSource="{x:Bind Customers}"
    HorizontalAlignment="Center"
    VerticalAlignment="Center">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="local:Customer">
            <TextBox Text="{x:Bind Name, Mode=TwoWay}"/>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Cara cepat untuk memastikan bahwa ini berfungsi adalah dengan menambahkan ListView kedua dengan kontrol TextBox dan pengikatan OneWay. Nilai dalam daftar kedua akan berubah secara otomatis saat Anda mengedit yang pertama.

Catatan

Mengedit langsung di dalam ListView adalah cara sederhana untuk menunjukkan pengikatan Dua Arah dalam tindakan, tetapi dapat menyebabkan komplikasi kegunaan. Jika Anda ingin memajukan aplikasi, pertimbangkan untuk menggunakan kontrol XAML lainnya untuk mengedit data Anda, dan simpan ListView Anda sebagai hanya tampilan.

Melangkah Lebih Jauh

Sekarang setelah Anda membuat daftar pelanggan dengan pengikatan dua arah, jangan ragu untuk kembali melalui dokumen yang telah kami tautkan dan bereksperimen. Anda juga dapat melihat tutorial pengikatan data kami jika Anda menginginkan panduan langkah demi langkah tentang pengikatan dasar dan lanjutan, atau menyelidiki kontrol seperti pola daftar/detail untuk membuat UI yang lebih kuat.

API dan dokumen yang berguna

Berikut adalah ringkasan singkat API dan dokumentasi berguna lainnya untuk membantu Anda mulai bekerja dengan Pengikatan Data.

API yang Berguna

API	Deskripsi
Templat data	Menjelaskan struktur visual objek data, yang memungkinkan tampilan elemen tertentu di UI.
x:Ikatan	Dokumentasi tentang ekstensi markup x:Bind yang direkomendasikan.
Pengikatan	Dokumentasi tentang ekstensi markup Pengikatan yang lebih lama.
ListView	Kontrol UI yang menampilkan item data dalam tumpukan vertikal.
Textbox	Kontrol teks dasar untuk menampilkan data teks yang dapat diedit di UI.
INotifyPropertyChanged	Antarmuka untuk membuat data dapat diamati, menyediakannya ke pengikatan data.
ItemControl	Properti ItemsSource dari kelas ini memungkinkan ListView untuk mengikat ke sumber data.

Dokumen yang berguna

Topik	Deskripsi
Pengikatan data secara mendalam	Gambaran umum dasar prinsip pengikatan data
Gambaran umum Pengikatan Data	Informasi konseptual terperinci tentang pengikatan data.
Tampilan Daftar	Informasi tentang membuat dan mengonfigurasi ListView, termasuk implementasi DataTemplate

Sampel kode yang berguna

Sampel kode	Deskripsi
Tutorial pengikatan data	Pengalaman terpandu langkah demi langkah melalui dasar-dasar pengikatan data.
ListView dan GridView	Jelajahi ListViews yang lebih urai dengan pengikatan data.
QuizGame	Lihat pengikatan data dalam tindakan, termasuk kelas BindableBase (di folder "Umum") untuk implementasi standar INotifyPropertyChanged.