연습 - viewmodel을 사용하여 선택 관리

  • 10분

연습에서는 인사 앱에 대한 예제를 사용하지 않습니다. 대신, 영화를 나열하는 애플리케이션을 사용하겠습니다. 앱에는 기본 바인딩이 포함된 두 페이지와 viewmodel이 이미 있습니다. 두 페이지는 목록 페이지와 세부 정보 페이지입니다. CollectionView과(와) 세부 정보 페이지가 동일한 viewmodel 속성을 사용하도록 선택 논리를 수정하겠습니다.

이 모듈에서는 .NET 10.0 SDK를 사용합니다. 기본 명령 터미널에서 다음 명령을 실행하여 .NET 10.0이 설치되어 있는지 확인합니다.

dotnet --list-sdks

다음 예제와 유사한 출력이 표시됩니다.

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

10으로 시작하는 버전이 나열되어 있는지 확인합니다. 나열되지 않았거나 명령을 찾을 수 없는 경우 최신 .NET 10.0 SDK를 설치합니다.

시작 솔루션 열기

  1. 연습 리포지토리를 복제하거나 다운로드합니다.
  2. part4-exercise1 폴더로 이동하여 MovieCatalog.sln 솔루션을 엽니다.
  3. 프로젝트를 빌드하고 실행하여 작동하는지 확인합니다. 화면에 표시되는 영화 목록이 표시됩니다. 나열된 영화 중 하나를 선택하면 앱이 세부 정보 페이지로 이동합니다.

코드 검사

뷰모델과 뷰의 구조가 어떻게 구성되는지 몇 분 정도 살펴보세요. XAML(Extensible Application Markup Language) 및 데이터 바인딩에 익숙한 경우 모두 익숙해 보이지만 구조는 MVVM(Model-View-ViewModel) 패턴을 사용합니다.

앱의 전반적인 viewmodel과 MovieListViewModel에 대한 viewmodel이라는 두 가지 임무를 수행하는 MoviesListPage이 있습니다. 이 뷰모델에는 프로젝트에 포함된 json 파일인 모델에서 로드된 영화 목록이 포함되어 있습니다. 다른 뷰모델은 MovieViewModel이며, 하나의 영화를 나타냅니다. 이 역시 두 가지 임무를 수행합니다. 즉, 목록 페이지의 행에 데이터를 제공하며, BindingContext의 MovieDetailPage로 작동합니다.

선택 항목 지원 추가

앱이 실행되면 첫 번째 페이지(MoviesListPage)가 표시됩니다. 페이지의 CollectionView는 전체 뷰모델, MovieViewModel에서 제공된 MovieListViewModel 인스턴스의 컬렉션에 바인딩됩니다. 보기에서 영화 중 하나를 선택하면 SelectionChanged 이벤트가 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. CollectionView 요소를 찾아 특성을 추가 SelectedItem 합니다. 다음으로 설정되어 있는지 SelectionMode 확인하십시오 Single.

    <CollectionView ItemsSource="{Binding Movies}" 
                SelectedItem="{Binding SelectedMovie, Mode=OneWayToSource}" 
                Margin="10" 
                SelectionMode="Single"
                SelectionChanged="CollectionView_SelectionChanged">

    이 특성은 목록의 선택한 항목을 뷰모델의 새 속성에 바인딩합니다.

  5. 뷰의 코드 숨김 파일인 Views\MoviesListPage.xaml.cs를 엽니다.

  6. CollectionView_SelectionChanged 이벤트 처리기를 찾습니다. 다음 코드로 바꿉다.

    private async void CollectionView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    if (e.CurrentSelection.Count == 0)
        return;

    await Navigation.PushAsync(new Views.MovieDetailPage());

    // Deselect
    ((CollectionView)sender).SelectedItem = null;
}

    MovieDetailPage에서 더 이상 생성자의 동영상을 허용하지 않고, 대신 새 생성자가 앱의 기본 뷰모델을 읽습니다.

  7. Views\MovieDetailPage.xaml.cs 파일을 열고 생성자를 다음 코드로 변경합니다.

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

    이 코드는 뷰의 바인딩 컨텍스트를 선택한 동영상으로 설정합니다.

  8. 앱을 실행하고 코드가 의도한 대로 작동하는지 확인합니다.