Udostępnij za pomocą


Kontrolki elementów XAML; wiązanie z kolekcją C++/WinRT

Kolekcja, która może być skutecznie powiązana z kontrolką elementów XAML, jest znana jako zauważalna kolekcja. Ten pomysł opiera się na wzorcu projektowania oprogramowania znanym jako wzorzec obserwatora. W tym temacie pokazano, jak zaimplementować obserwowalne kolekcje w C++/WinRToraz jak powiązać je z kontrolkami elementów XAML (w celu uzyskania dodatkowych informacji zobacz powiązanie danych).

Jeśli chcesz śledzić ten temat, zalecamy najpierw utworzenie projektu opisanego w kontrolkach XAML; powiązać z właściwością C++/WinRT. W tym temacie dodano więcej kodu do tego projektu i rozwija pojęcia opisane w tym temacie.

Ważne

Aby zapoznać się z podstawowymi pojęciami i terminami wspierającymi zrozumienie sposobu konsumpcji i tworzenia klas środowiska uruchomieniowego w C++/WinRT, zobacz Korzystanie z API w C++/WinRT i Tworzenie API w C++/WinRT.

Co zauważalne oznacza dla kolekcji?

Jeśli klasa środowiska uruchomieniowego reprezentująca kolekcję wybierze wywołanie zdarzenia IObservableVector<T>::VectorChanged za każdym razem, gdy element zostanie do niej dodany lub z niej usunięty, to klasa ta jest obserwowalną kolekcją. Kontrolka elementów XAML może wiązać się z tymi zdarzeniami i obsługiwać je, pobierając zaktualizowaną kolekcję, a następnie aktualizując się w celu wyświetlenia bieżących elementów.

Uwaga / Notatka

Aby uzyskać informacje na temat instalowania i używania rozszerzenia C++/WinRT Visual Studio (VSIX) i pakietu NuGet (które razem zapewniają obsługę szablonu projektu i kompilacji), zobacz obsługa programu Visual Studio dla języka C++/WinRT.

Dodaj kolekcję BookSkus do BookstoreViewModel

W kontrolkach XAML , powiązaliśmy z właściwością C++/WinRT, dodaliśmy właściwość typu BookSku do naszego głównego modelu widoku. W tym kroku użyjemy szablonu funkcji winrt::single_threaded_observable_vector factory, aby pomóc nam zaimplementować zauważalną kolekcję BookSku w tym samym modelu widoku.

Zadeklaruj nową właściwość w BookstoreViewModel.idl.

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

Ważne

Powiązanie z kolekcją za pomocą języka C++/WinRT jest nieco bardziej zniuansowane niż w języku C#. W powyższej liście MIDL 3.0 zwróć uwagę, że właściwość BookSkus ma typ IObservableVector z BookSku. W następnej sekcji tego tematu będziemy wiązać źródło elementów ListBox do BookSkus. Pole listy to kontrolka elementów i aby poprawnie ustawić właściwość ItemsControl.ItemsSource , należy ustawić ją na wartość typu IObservableVector lub IVector lub typu współdziałania, takiego jak IBindableObservableVector. {x:Bind} W przeciwnym razie wygeneruje E_INVALIDARG i {Binding} nie powiedzie się w trybie dyskretnym.

Ostrzeżenie

Kod przedstawiony w tym temacie dotyczy języka C++/WinRT w wersji 2.0.190530.8 lub nowszej. Jeśli używasz starszej wersji, musisz wprowadzić drobne poprawki do pokazanego kodu. Na powyższej liście MIDL 3.0 zmień właściwość BookSkus na IObservableVectorIInspectable. A następnie również użyj IInspectable (zamiast BookSku) w implementacji.

Zapisz i skompiluj. Skopiuj szablony metod dostępowych z BookstoreViewModel.h i BookstoreViewModel.cpp do folderu \Bookstore\Bookstore\Generated Files\sources (więcej informacji znajdziesz w poprzednim temacie: kontrolki XAML; powiąż z właściwością C++/WinRT). Zaimplementuj takie wycinki dostępu.

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

Wiązanie kontrolki ListBox z właściwością BookSkus

Otwórz MainPage.xaml, który zawiera znaczniki XAML dla naszej głównej strony interfejsu użytkownika. Dodaj następujący znacznik wewnątrz tej samej StackPanel co przycisk .

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

W MainPage.cppdodaj wiersz kodu do programu obsługi zdarzeń Kliknij, aby dołączyć książkę do kolekcji.

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

Teraz skompiluj i uruchom projekt. Kliknij przycisk, aby wykonać program obsługi zdarzeń Click. Zobaczyliśmy, że implementacja Append zgłasza zdarzenie, aby poinformować interfejs użytkownika o zmianie kolekcji; i ListBox ponownie wysyła zapytanie do kolekcji, aby zaktualizować własną wartość Items. Tak jak wcześniej, tytuł jednej z książek się zmienia; i ta zmiana tytułu jest odzwierciedlana zarówno na przycisku, jak i w polu listy.

Ważne interfejsy API