Bagikan melalui

Kontrol item XAML; ikat ke koleksi C++/WinRT

Koleksi yang dapat secara efektif terikat ke kontrol item XAML dikenal sebagai koleksi yang dapat diamati. Ide ini didasarkan pada pola desain perangkat lunak yang dikenal sebagai pola pengamat . Topik ini menunjukkan cara menerapkan koleksi yang dapat diamati diC++/WinRT , dan cara mengikat kontrol item XAML ke koleksi tersebut (untuk info latar belakang, lihat Pengikatan data).

Jika Anda ingin mengikuti topik ini, kami sarankan Anda terlebih dahulu membuat proyek yang dijelaskan dalam kontrol XAML ; ikat ke properti C++/WinRT. Topik ini menambahkan lebih banyak kode ke proyek tersebut, dan menambahkan ke konsep yang dijelaskan dalam topik tersebut.

Penting

Untuk konsep dan istilah penting yang mendukung pemahaman Anda tentang cara menggunakan dan membuat kelas runtime dengan C++/WinRT, lihat Menggunakan API dengan C++/WinRT dan Membuat API dengan C++/WinRT.

Apa arti yang dapat diamati untuk koleksi?

Jika kelas runtime yang mewakili koleksi memilih untuk menaikkan peristiwa IObservableVector<T>::VectorChanged setiap kali elemen ditambahkan ke dalamnya atau dihapus darinya, maka kelas runtime adalah koleksi yang dapat diamati. Kontrol item XAML dapat mengikat dan menangani peristiwa ini dengan mengambil koleksi yang sudah diperbarui, lalu memperbarui dirinya sendiri untuk menampilkan elemen terbaru.

Nota

Untuk informasi tentang menginstal dan menggunakan C++/WinRT Visual Studio Extension (VSIX) dan paket NuGet (yang bersama-sama menyediakan templat proyek dan dukungan build), lihat dukungan Visual Studio untuk C++/WinRT.

Tambahkan koleksi BookSkus ke BookstoreViewModel

Dalam kontrol XAML ; mengikat ke properti C++/WinRT, kami menambahkan properti jenis BookSku ke model tampilan utama kami. Di langkah ini, kita akan memanfaatkan templat fungsi pabrik winrt::single_threaded_observable_vector untuk membantu kami menerapkan koleksi BookSku yang bisa diamati pada model tampilan yang sama.

Deklarasikan properti baru di BookstoreViewModel.idl.

// BookstoreViewModel.idl
...
runtimeclass BookstoreViewModel
{
    BookSku BookSku{ get; };
    Windows.Foundation.Collections.IObservableVector<BookSku> BookSkus{ get; };
}
...

Penting

Pengikatan ke koleksi dengan C++/WinRT sedikit lebih bernuansa daripada dengan C#. Dalam daftar MIDL 3.0 di atas, perhatikan bahwa jenis properti BookSkus IObservableVector BookSku. Di bagian berikutnya dari topik ini, kita akan mengikat sumber item ListBox ke BookSkus. Kotak daftar adalah kontrol item, dan untuk mengatur properti ItemsControl.ItemsSource dengan benar, Anda perlu mengaturnya ke nilai jenis IObservableVector, atau IVector, atau jenis interoperabilitas seperti IBindableObservableVector. Jika tidak, {x:Bind} akan menghasilkan E_INVALIDARG, dan {Binding} akan gagal diam-diam.

Peringatan

Kode yang ditampilkan dalam topik ini berlaku untuk C++/WinRT versi 2.0.190530.8 atau yang lebih baru. Jika Anda menggunakan versi yang lebih lama, maka Anda harus membuat beberapa tweak kecil pada kode yang ditampilkan. Dalam daftar MIDL 3.0 di atas, ubah properti BookSkus menjadi IObservableVector dari IInspectable. Kemudian, gunakan IInspectable (bukan BookSku) dalam implementasi Anda, juga.

Simpan dan membangun. Salin stub aksesor dari BookstoreViewModel.h dan BookstoreViewModel.cpp di folder \Bookstore\Bookstore\Generated Files\sources (untuk detail selengkapnya, lihat topik sebelumnya, kontrol XAML; ikat ke properti C++/WinRT). Terapkan stub aksesor seperti ini.

// BookstoreViewModel.h
...
struct BookstoreViewModel : BookstoreViewModelT<BookstoreViewModel>
{
    BookstoreViewModel();

    Bookstore::BookSku BookSku();

    Windows::Foundation::Collections::IObservableVector<Bookstore::BookSku> BookSkus();

private:
    Bookstore::BookSku m_bookSku{ nullptr };
    Windows::Foundation::Collections::IObservableVector<Bookstore::BookSku> m_bookSkus;
};
...

// BookstoreViewModel.cpp
...
BookstoreViewModel::BookstoreViewModel()
{
    m_bookSku = winrt::make<Bookstore::implementation::BookSku>(L"Atticus");
    m_bookSkus = winrt::single_threaded_observable_vector<Bookstore::BookSku>();
    m_bookSkus.Append(m_bookSku);
}

Bookstore::BookSku BookstoreViewModel::BookSku()
{
    return m_bookSku;
}

Windows::Foundation::Collections::IObservableVector<Bookstore::BookSku> BookstoreViewModel::BookSkus()
{
    return m_bookSkus;
}
...

Mengikat ListBox ke properti BookSkus

Buka MainPage.xaml, yang berisi markup XAML untuk halaman UI utama kami. Tambahkan markup berikut ke dalam StackPanel yang sama dengan tombol.

<ListBox ItemsSource="{x:Bind MainViewModel.BookSkus}">
    <ItemsControl.ItemTemplate>
        <DataTemplate x:DataType="local:BookSku">
            <TextBlock Text="{x:Bind Title, Mode=OneWay}"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ListBox>

Di MainPage.cpp, tambahkan baris kode di penanganan aktivitas klik untuk menambahkan buku ke koleksi.

// MainPage.cpp
...
void MainPage::ClickHandler(IInspectable const&, RoutedEventArgs const&)
{
    MainViewModel().BookSku().Title(L"To Kill a Mockingbird");
    MainViewModel().BookSkus().Append(winrt::make<Bookstore::implementation::BookSku>(L"Moby Dick"));
}
...

Sekarang bangun dan jalankan proyek. Klik tombol untuk menjalankan pengolah kejadian Klik. Kami melihat bahwa implementasi Tambahkan menimbulkan peristiwa untuk memberi tahu UI bahwa koleksi telah berubah; dan ListBox mengkueri ulang koleksi untuk memperbarui nilai Item sendiri. Sama seperti sebelumnya, judul salah satu buku berubah; dan perubahan judul tersebut tercermin baik pada tombol maupun di kotak daftar.

API penting

  • Last updated on