Упражнение. Управление выбором с помощью модели представления

  • 10 мин

В нашем упражнении мы кратко оставим пример приложения для кадров. Вместо этого мы работаем с приложением, которое перечисляет фильмы. В приложении уже есть несколько страниц и моделей представлений с рядом основных привязок. Доступно две страницы — страница списка и страница сведений. Мы изменяем логику выбора, чтобы ListView страница сведений использовала то же свойство viewmodel.

Этот модуль использует пакет SDK для .NET 9.0. Убедитесь, что установлен .NET 9.0, выполнив следующую команду в предпочтительном терминале команд:

dotnet --list-sdks

Выходные данные, аналогичные следующему примеру, отображаются:

8.0.100 [C:\Program Files\dotnet\sdk]
9.0.100 [C:\Program Files\dotnet\sdk]

Убедитесь, что в списке есть версия, которая начинается с цифры 9. Если ни один из них отсутствует или команда не найдена, установите последний пакет SDK для .NET 9.0.

Открытие решения для начала работы

  1. Клонируйте или скачайте репозиторий упражнений.
  2. Перейдите в папку part4-exercise1 и откройте решение MovieCatalog.sln .
  3. Выполните сборку и запуск проекта, чтобы убедиться, что он работает. Вы увидите список фильмов, отображаемых на экране. Выберите один из фильмов в списке, а приложение перейдет на страницу сведений.

Изучение кода

Несколько минут, чтобы узнать, как структурированы модели представления и представления. Если вы знакомы с языком разметки расширяемых приложений (XAML) и привязкой данных, все должно выглядеть знакомо, но структура использует шаблон Model-ViewModel (MVVM).

Существует MovieListViewModel, которая играет двойную роль: как общая модель представления приложения и как модель представления для MoviesListPage. Эта модель представления содержит список фильмов, загруженных из модели, который является json-файлом , включенным в проект. Другая модель представления — MovieViewModelэто и представляет один фильм. Она также выполняет двойную задачу: предоставляет данные для строк на странице списка и является BindingContext для MovieDetailPage.

Добавление поддержки выбора

Первая MoviesListPage страница отображается при запуске приложения. На ListView странице привязана коллекция экземпляров, предоставляемых MovieViewModel общим представлением. MovieListViewModel При выборе одного из фильмов в представлении ItemTapped событие переходит к MovieDetailPageэлементу, передаваемому BindingContext элементу, который является фильмом, конструктору представления. Задает MovieDetailPage модель представления, переданную в качестве BindingContext страницы.

Вместо этого давайте обновим приложение, чтобы MovieDetailPage прочитать выбранный фильм из общего представления приложения.

  1. В окне обозревателя решений откройте файл ViewModels\MovieListViewModel.cs .

  2. Добавьте в класс MovieListViewModel следующий код.

    private MovieViewModel _selectedMovie;

public MovieViewModel SelectedMovie
{
    get => _selectedMovie;
    set => SetProperty(ref _selectedMovie, value);
}

  3. Затем откройте файл Views\MoviesListPage.xaml .

  4. ListView Найдите элемент и добавьте SelectedItem атрибут:

    <ListView ItemsSource="{Binding Movies}" SelectedItem="{Binding SelectedMovie, Mode=OneWayToSource}" Margin ... >

    Этот атрибут привязывает выбранный элемент списка к новому свойству в viewmodel.

  5. Откройте файл кода программной части представления , Views\MoviesListPage.xaml.cs.

  6. Замените код обработчика ListView_ItemTapped событий следующим кодом:

    private async void ListView_ItemTapped(object sender, ItemTappedEventArgs e)
{
    await Navigation.PushAsync(new Views.MovieDetailPage());
}

    Вместо этого новый MovieDetailPage конструктор не принимает фильм в конструкторе.

  7. Откройте файл Views\MovieDetailPage.xaml.cs и измените конструктор на следующий код:

    public MovieDetailPage()
{
    BindingContext = App.MainViewModel.SelectedMovie;
    InitializeComponent();
}

    Этот код задает контекст привязки представления выбранному фильму.

  8. Запустите приложение и убедитесь, что код работает должным образом.