Freigeben über

XAML-Steuerelemente; An eine C++/WinRT-Sammlung binden

Eine Auflistung, die effektiv an eine XAML-Elementsteuerung gebunden werden kann, wird als beobachtbare-Auflistung bezeichnet. Diese Idee basiert auf dem Softwaredesignmuster, das als Beobachtermusterbezeichnet wird. In diesem Thema wird gezeigt, wie Observable-Auflistungen in C++/WinRT-implementiert werden und wie XAML-Elementsteuerelemente an diese gebunden werden (informationen zu Hintergrundinformationen finden Sie unter Datenbindung).

Wenn Sie diesem Thema folgen möchten, empfehlen wir, dass Sie zuerst das Projekt erstellen, das in XAML-Steuerelementen beschrieben wird, und es mit einer C++/WinRT-Eigenschaftverknüpfen. In diesem Thema wird dem Projekt weiterer Code hinzugefügt, und es baut auf den in diesem Thema erläuterten Konzepten auf.

Von Bedeutung

Wichtige Konzepte und Begriffe, die Ihr Verständnis bei der Nutzung und Erstellung von Laufzeitklassen mit C++/WinRT unterstützen, finden Sie unter Nutzen von APIs mit C++/WinRT und Erstellen von APIs mit C++/WinRT.

Was bedeutet observable für eine Sammlung?

Wenn eine Laufzeitklasse, die eine Auflistung darstellt, das IObservableVector<T>::VectorChanged-Ereignis auslöst, wann immer ein Element hinzugefügt oder entfernt wird, ist die Laufzeitklasse eine beobachtbare Auflistung. Ein XAML-Elementsteuerelement kann sich an diese Ereignisse binden und sie verarbeiten, indem es die aktualisierte Auflistung abruft und sich dann selbst aktualisiert, um die aktuellen Elemente anzuzeigen.

Hinweis

Informationen zum Installieren und Verwenden der C++/WinRT Visual Studio Extension (VSIX) und des NuGet-Pakets (die zusammen Projektvorlage und Buildunterstützung bereitstellen), finden Sie unter Visual Studio-Unterstützung für C++/WinRT.

Fügen Sie eine BookSkus-Auflistung zu BookstoreViewModel hinzu.

In XAML-Steuerelementen binden wir an eine C++/WinRT-Eigenschaftund fügten unserem Hauptansichtsmodell eine Eigenschaft vom Typ BookSku hinzu. In diesem Schritt verwenden wir die Vorlage winrt::single_threaded_observable_vector Factoryfunktion, um eine beobachtbare Sammlung von BookSku- auf demselben Ansichtsmodell zu implementieren.

Deklarieren Sie eine neue Eigenschaft in BookstoreViewModel.idl.

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

Von Bedeutung

Die Bindung an eine Sammlung mit C++/WinRT ist etwas differenzierter als bei C#. Beachten Sie in der oben aufgeführten MIDL 3.0-Auflistung, dass der Typ der BookSkus--Eigenschaft IObservableVector von BookSku-ist. Im nächsten Abschnitt dieses Themas werden wir die Elementequelle eines -ListBox-- an -BookSkus-binden. Ein Listenfeld ist ein Elementsteuerelement, und um die ItemsControl.ItemsSource-Eigenschaft korrekt festzulegen, müssen Sie sie auf einen Wert vom Typ IObservableVector, oder IVector, oder eines Interoperabilitätstyps wie IBindableObservableVectorfestlegen. {x:Bind} Andernfalls wird E_INVALIDARG generiert und {Binding} schlägt im Hintergrund fehl.

Warnung

Der in diesem Thema gezeigte Code gilt für C++/WinRT, Version 2.0.190530.8 oder höher. Wenn Sie eine frühere Version verwenden, müssen Sie einige kleinere Optimierungen an dem angezeigten Code vornehmen. Ändern Sie in der oben aufgeführten MIDL 3.0-Auflistung die BookSkus-eigenschaft in IObservableVector- von IInspectable. Und dann verwenden Sie in Ihrer Implementierung ebenfalls IInspectable (anstelle von BookSku).

Speichern und Erstellen. Kopieren Sie die Accessor-Stubs aus BookstoreViewModel.h und BookstoreViewModel.cpp im Ordner \Bookstore\Bookstore\Generated Files\sources (weitere Details finden Sie im vorherigen Thema, XAML-Steuerelemente; Binden an eine C++/WinRT-Eigenschaft). Implementieren Sie diese Accessor-Stubs wie folgt.

// 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;
}
...

Eine ListBox an die BookSkus--Eigenschaft binden

Öffnen Sie MainPage.xaml, die das XAML-Markup für unsere Haupt-UI-Seite enthält. Fügen Sie das folgende Markup in dasselbe StackPanel wie den Button ein.

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

Fügen Sie in MainPage.cppdem Click-Ereignishandler eine Codezeile hinzu, um ein Buch an die Auflistung anzufügen.

// 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"));
}
...

Erstellen Sie nun das Projekt, und führen Sie es aus. Klicken Sie auf die Schaltfläche, um den Click Ereignishandler auszuführen. Wir haben gesehen, dass die Implementierung von Append ein Ereignis auslöst, um die Benutzeroberfläche darüber zu informieren, dass die Sammlung geändert wurde; und die ListBox die Auflistung erneut abfragt, um ihren eigenen Wert der Items zu aktualisieren. Wie zuvor ändert sich der Titel eines der Bücher; und diese Titeländerung wird sowohl auf der Schaltfläche als auch im Listenfeld widerspiegelt.

Wichtige APIs

  • Last updated on