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

10분

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

샘플 다운로드 및 실행

참고 항목

Windows에서 Android의 .NET MAUI 앱을 실행하고 디버깅할 계획이라면 최대 경로 길이를 초과하는 빌드 생성 파일을 방지하기 위해 C:\dev\와 같은 짧은 폴더 경로에 연습 콘텐츠를 복제하거나 다운로드하는 것이 가장 좋습니다.

이 연습 모듈을 시작하려면 영화 목록 샘플 프로젝트를 다운로드합니다. 이 프로젝트는 영화 목록을 표시합니다. 영화를 클릭하면 영화에 대한 자세한 정보가 포함된 세부 정보 페이지로 이동합니다.

영화 목록 샘플 프로젝트를 다운로드하여 임시 폴더로 추출합니다.
part4-exercise1 폴더로 이동하여 MovieCatalog.sln 솔루션을 엽니다.
프로젝트를 빌드하고 실행하여 작동하는지 확인합니다. 화면이 표시되면 영화 목록이 표시됩니다. 나열된 영화 중 하나를 선택하면 앱이 세부 정보 페이지로 이동합니다.

코드 검사

뷰모델과 뷰의 구조가 어떻게 구성되는지 몇 분 정도 살펴보세요. 데이터 바인딩과 XAML을 잘 알고 있다면 모두 친숙해 보일 수 있지만 MVVM 패턴을 사용하여 구조화되어 있습니다.

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

선택 항목 지원 추가

MoviesListPage는 앱이 실행되면 처음 표시되는 페이지입니다. 페이지의 ListView는 전체 뷰모델, MovieListViewModel에서 제공된 MovieViewModel 인스턴스의 컬렉션에 바인딩됩니다. 보기에서 영화 중 하나를 선택하면 ItemTapped 이벤트가 MovieDetailPage로 이동하여 영화인 항목의 BindingContext를 보기의 생성자에 전달합니다. MovieDetailPage는 페이지의 BindingContext로 전달된 뷰모델을 설정합니다.

대신, MovieDetailPage가 전체 앱의 뷰모델에서 선택한 영화를 읽도록 앱을 업데이트해 보겠습니다.

솔루션 탐색기 창에서 ViewModels\MovieListViewModel.cs 파일을 엽니다.

다음 코드를 MovieListViewModel 클래스에 추가합니다.

private MovieViewModel _selectedMovie;

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

다음으로 Views\MoviesListPage.xaml 파일을 엽니다.
ListView 요소를 찾아 SelectedItem 특성을 추가합니다.
```
<ListView ItemsSource="{Binding Movies}" SelectedItem="{Binding SelectedMovie, Mode=OneWayToSource}" Margin ... >
```
이 특성은 목록의 선택한 항목을 뷰모델의 새 속성에 바인딩합니다.
뷰의 코드 숨김 파일인 Views\MoviesListPage.xaml.cs를 엽니다.
ListView_ItemTapped 이벤트 처리기 코드를 다음 코드로 바꿉다.
```
private async void ListView_ItemTapped(object sender, ItemTappedEventArgs e)
{
    await Navigation.PushAsync(new Views.MovieDetailPage());
}
```
MovieDetailPage에서 더 이상 생성자의 동영상을 허용하지 않고, 대신 새 생성자가 앱의 기본 뷰모델을 읽습니다.
Views\MovieDetailPage.xaml.cs 파일을 열고 생성자를 다음 코드로 변경합니다.
```
public MovieDetailPage()
{
	BindingContext = App.MainViewModel.SelectedMovie;
	InitializeComponent();
}
```
이 코드는 뷰의 바인딩 컨텍스트를 선택한 동영상으로 설정합니다.
앱을 실행하고 코드가 의도한 대로 작동하는지 확인합니다.

계속

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

샘플 다운로드 및 실행

코드 검사

선택 항목 지원 추가

피드백