19장의 요약 정보입니다. 컬렉션 뷰

  • 아티클

Download Sample 샘플 다운로드

참고 항목

이 책은 2016년 봄에 출간되었으며, 그 후로 업데이트되지 않았습니다. 이 책의 많은 내용이 지금까지도 무척 유용하나, 일부 내용은 오래되었고 올바르지 않거나 완전하지 않은 주제도 있습니다.

Xamarin.Forms는 컬렉션을 유지 관리하고 해당 요소를 표시하는 다음 세 가지 뷰를 정의합니다.

  • Picker는 사용자가 하나를 선택할 수 있는 비교적 짧은 문자열 항목 목록입니다.
  • ListView는 일반적으로 형식과 서식이 동일한 긴 항목 목록으로, 마찬가지로 사용자가 하나를 선택할 수 있습니다.
  • TableView는 데이터를 표시하거나 사용자 입력을 관리하는 (일반적으로 형식과 모양이 다양한) 셀 컬렉션입니다.

MVVM 애플리케이션에는 ListView를 사용하여 선택 가능한 개체 컬렉션을 표시하는 것이 일반적입니다.

선택기가 포함된 프로그램 옵션

사용자가 비교적 짧은 string 항목 목록 중에서 옵션을 선택할 수 있도록 해야 하는 경우 Picker를 선택하는 것이 좋습니다.

선택기 및 이벤트 처리

PickerDemo 샘플에서는 XAML을 사용하여 속성을 설정하고 컬렉션에 PickerTitle 항목을 Items 추가하는 string 방법을 보여 줍니다. 사용자가 Picker를 선택하면 플랫폼에 종속된 방식으로 Items 컬렉션의 항목이 표시됩니다.

SelectedIndexChanged 이벤트는 사용자가 항목을 선택한 시간을 나타냅니다. 그러면 0부터 시작하는 SelectedIndex 속성은 사용자가 선택한 항목을 나타냅니다. 선택한 SelectedIndex 항목이 없으면 –1입니다.

SelectedIndex를 사용하여 선택된 항목을 초기화할 수도 있지만, Items 컬렉션이 채워진 후에 설정해야 합니다. XAML에서는 속성 요소를 사용하여 SelectedIndex를 설정하는 것을 의미합니다.

선택기 데이터 바인딩

SelectedIndex 속성은 바인딩 가능한 속성에서 지원되지만 Items는 지원되지 않으므로 Picker에서 데이터 바인딩을 사용하기 어렵습니다. 한 가지 해결 방법은 Xamarin.FormsBook.Toolkit 라이브러리에 있는 것처럼 Picker를 ObjectToIndexConverter와 함께 사용하는 것입니다. PickerBinding은 이 방법이 어떻게 작동하는지 보여줍니다.

참고 항목

Xamarin.FormsPicker 이제 데이터 바인딩을 지원하는 속성 및 SelectedItem 포함 ItemsSource 됩니다. 선택기를 참조하세요.

ListView를 사용하여 데이터 렌더링

ListView는 ItemsView<TVisual>에서 파생되는 유일한 클래스이며, ItemsSource 및 ItemTemplate 속성을 상속합니다.

ItemsSource는 IEnumerable 형식이지만 기본적으로 null이며 데이터 바인딩을 통해 명시적으로 초기화하거나 (보다 일반적으로) 컬렉션으로 설정해야 합니다. 이 컬렉션의 항목은 어떤 형식이어도 상관 없습니다.

ListView는 SelectedItem 속성을 정의합니다. 이 속성은 ItemsSource 컬렉션의 항목 중 하나로 설정되거나 항목이 선택되지 않은 경우 null로 설정됩니다. ListView는 새 항목이 선택되면 ItemSelected 이벤트를 실행합니다.

컬렉션 및 선택

ListViewList 샘플은 List<Color> 컬렉션의 17개 Color 값으로 ListView를 채웁니다. 항목은 선택 가능하지만, 기본적으로 보기에 좋지 않은 ToString 표현으로 표시됩니다. 이 챕터의 여러 예제는 이러한 디스플레이를 수정하여 원하는 대로 예쁘게 만드는 방법을 보여줍니다.

행 구분 기호

iOS 및 Android 디스플레이에서는 얇은 선이 행을 구분합니다. SeparatorVisibility 및 SeparatorColor 속성을 사용하여 이 선을 제어할 수 있습니다. SeparatorVisibility 속성은 SeparatorVisibility 형식이며, 다음 두 멤버가 있는 열거형입니다.

선택한 항목의 데이터 바인딩

SelectedItem 속성은 바인딩 가능한 속성에서 지원되므로 데이터 바인딩의 원본이 될 수도 있고 대상이 될 수도 있습니다. 기본 BindingMode는 OneWayToSource이지만, 일반적으로 양방향 데이터 바인딩의 대상이며 MVVM 시나리오에서 특히 그렇습니다. ListViewArray 샘플은 이러한 형식의 바인딩을 보여줍니다.

ObservableCollection의 차이점

ListViewLogger 샘플은 ListView의 ItemsSource 속성을 List<DateTime> 컬렉션으로 설정한 다음, 타이머를 사용하여 매초마다 새 DateTime 개체를 컬렉션에 추가합니다.

그러나 List<T> 컬렉션에는 컬렉션에 항목이 추가 또는 제거될 때 알려주는 알림 메커니즘이 없기 때문에 ListView가 자동으로 업데이트되지 않습니다.

이러한 시나리오에 사용할 수 있는 훨씬 효율적인 클래스는 System.Collections.ObjectModel 네임스페이스에 정의된 ObservableCollection<T>입니다. 이 클래스는 INotifyCollectionChanged 인터페이스를 구현합니다. 그리고 그 결과로 컬렉션에 항목이 추가 또는 제거되거나 컬렉션 내에서 항목이 대체 또는 이동될 때 CollectionChanged 이벤트를 실행합니다. ListView는 INotifyCollectionChanged를 구현하는 클래스가 ItemsSource 속성으로 설정된 것을 내부에서 감지하면 CollectionChanged 이벤트에 처리기를 연결하고 컬렉션이 변경될 때 디스플레이를 업데이트합니다.

ObservableLogger 샘플은 ObservableCollection 바인딩 사용 방법을 보여줍니다.

템플릿 및 셀

기본적으로 ListView는 각 항목의 ToString 메서드를 사용하여 컬렉션의 항목을 표시합니다. 보다 효율적인 방법은 항목을 표시하는 템플릿을 정의하는 것입니다.

이 기능을 실험하려면 Xamarin.FormsBook.Toolkit 라이브러리의 NamedColor 클래스를 사용하면 됩니다. 이 클래스는 Color 구조체의 퍼블릭 필드에 해당하는 141개 NamedColor 개체를 포함하고 있는 IList<NamedColor> 형식의 정적 All 속성을 정의합니다.

NaiveNamedColorList 샘플은 ListView의 ItemsSource를 이 NamedColor.All 속성으로 설정하지만, NamedColor 개체의 정규화된 클래스 이름만 표시됩니다.

ListView는 이러한 항목을 표시하기 위한 템플릿이 필요합니다. 코드에서는 Cell 클래스의 파생 클래스를 참조하는 DataTemplate 생성자를 사용하여 ItemsView<TVisual>에서 정의되는 ItemTemplate 속성을 DataTemplate 개체로 설정할 수 있습니다. Cell에는 다음과 같은 5개의 파생 항목이 있습니다.

  • TextCell — 두 개의 Label 뷰(개념적으로 말하기)를 포함합니다.
  • ImageCell - 뷰를 Image 에 추가합니다. TextCell
  • EntryCell — 가 있는 Entry 뷰를 포함합니다. Label
  • SwitchCell— with a를 포함합니다.SwitchLabel
  • ViewCell — (자식이 있을 수 있는) 임의의 View 것일 수 있습니다.

그 후 DataTemplate 개체에서 SetValue 및 SetBinding을 호출하여 값을 Cell 속성에 연결하거나, ItemsSource 컬렉션의 항목 속성을 참조하는 Cell 속성에서 데이터 바인딩을 설정합니다. 이 내용은 TextCellListCode 샘플에 설명되어 있습니다.

ListView가 각 항목을 표시할 때마다 작은 시각적 트리가 템플릿에서 생성되고, 이 시각적 트리에 있는 요소의 속성과 항목 사이에 데이터 바인딩이 설정됩니다. ListView의 ItemAppearing 및 ItemDisappearing 이벤트용 처리기를 설치하거나, 항목의 시각적 트리를 만들어야 할 때마다 호출되는 함수를 사용하는 대체 DataTemplate 생성자를 사용해 보면 이 프로세스를 이해할 수 있습니다.

TextCellListXaml은 기능적으로 완전히 동일한 XAML의 프로그램을 보여줍니다. DataTemplate 태그는 ListView의 ItemTemplate 속성으로 설정되고, TextCell은 DataTemplate으로 설정됩니다. 컬렉션에 있는 항목의 속성에 대한 바인딩은 TextCell의 Text 및 Detail 속성에서 직접 설정됩니다.

사용자 지정 셀

XAML에서는 ViewCell을 DataTemplate으로 설정한 다음, 사용자 지정 시각적 트리를 ViewCell의 View 속성으로 정의할 수 있습니다. (View태그가 필요하지 않도록 하는 콘텐츠 속성 ViewCell.ViewViewCell 입니다.) CustomNamedColorList 샘플은 다음 기술을 보여 줍니다.

Triple screenshot of Custom Named Color List

모든 플랫폼에 적합한 크기로 조정하는 것은 어려운 일일 수 있습니다. RowHeight 속성은 유용하지만, 경우에 따라 효율성이 떨어지지만 ListView에서 행의 크기를 조정하도록 강제하는 HasUnevenRows 속성을 사용할 때도 있습니다. iOS 및 Android의 경우 이러한 두 속성 중 하나를 사용하여 행 크기를 적절하게 조정해야 합니다.

ListView 항목 그룹화

ListView는 항목을 그룹화하고 그룹 간에 이동하는 것을 지원합니다. 속성은 ItemsSource 컬렉션 컬렉션으로 설정해야 합니다. 이 개체는 ItemsSource 구현 IEnumerable해야 하며 컬렉션의 각 항목도 구현 IEnumerable해야 합니다. 각 그룹에는 두 가지 속성, 즉, 그룹의 텍스트 설명과 3자 약어가 포함되어야 합니다.

Xamarin.FormsBook.Toolkit 라이브러리의 NamedColorGroup 클래스는 NamedColor 개체 그룹을 7개 만듭니다. ColorGroupList 샘플은 이러한 그룹을 true로 설정된 ListView의 IsGroupingEnabled 속성과 각 그룹의 속성에 바인딩된 GroupDisplayBinding 및 GroupShortNameBinding 속성에 사용하는 방법을 보여줍니다.

사용자 지정 그룹 헤더

GroupDisplayBinding 속성을 헤더의 템플릿을 정의하는 GroupHeaderTemplate으로 바꿔서 ListView 그룹의 사용자 지정 헤더를 만들 수 있습니다.

ListView 및 대화형 작업

일반적으로 애플리케이션은 ItemSelected 또는 ItemTapped 이벤트에 처리기를 연결하거나 SelectedItem 속성에서 데이터 바인딩을 설정하여 ListView와의 사용자 상호 작용을 달성합니다. 그러나 일부 셀 형식(EntryCell 및 SwitchCell)은 사용자 상호 작용을 허용하며, 사용자와 직접 상호 작용하는 사용자 지정 셀을 만들 수 있습니다. InteractiveListView는 ColorViewModel 인스턴스 100개를 만들고, 사용자가 3개 Slider 요소를 사용하여 각 색을 변경할 수 있도록 허용합니다. 또한 이 프로그램은 Xamarin.FormsBook.Toolkit에서 ColorToContrastColorConverter를 사용합니다.

ListView 및 MVVM

ListView는 MVVM 시나리오에서 중요한 역할을 합니다. ViewModel에 IEnumerable 컬렉션이 있을 때마다 종종 ListView에 바인딩됩니다. 또한 컬렉션의 항목은 종종 템플릿에서 속성을 사용하여 바인딩할 INotifyPropertyChanged를 구현합니다.

ViewModels 컬렉션

이 컬렉션을 살펴보기 위해 SchoolOfFineArts 라이브러리는 XML 데이터 파일을 기반으로 여러 클래스를 만들고 이 가상 학교의 가상 학생 이미지를 만듭니다.

Student 클래스는 ViewModelBase에서 파생됩니다. StudentBody 클래스는 Student 개체의 컬렉션이며 마찬가지로 ViewModelBase에서 파생됩니다. SchoolViewModel은 XML 파일을 다운로드하고 모든 개체를 어셈블합니다.

StudentList 프로그램은 ImageCell을 사용하여 학생과 학생의 이미지를 ListView에 표시합니다.

Triple screenshot of Student List

ListViewHeader 샘플은 Header 속성을 추가하지만 Android에만 표시됩니다.

선택 영역 및 바인딩 텍스트

SelectedStudentDetail 프로그램은 StackLayout의 BindingContext를 ListView의 SelectedItem 속성에 바인딩합니다. 이렇게 하면 선택된 학생에 대한 구체적인 정보를 프로그램에서 표시할 수 있습니다.

상황에 맞는 메뉴

셀은 플랫폼별 방법으로 구현되는 바로 가기 메뉴를 정의할 수 있습니다. 이 메뉴를 만들려면 MenuItem 개체를 Cell의 ContextActions 속성에 추가합니다.

MenuItem은 다음과 같은 5개 속성을 정의합니다.

Command 및 CommandParameter 속성은 각 항목의 ViewModel에 원하는 메뉴 명령을 수행하는 메서드가 포함되어 있음을 의미합니다. 비-MVVM 시나리오에서 MenuItem은 Clicked 이벤트도 정의합니다.

CellContextMenu는 이 기술을 보여줍니다. 각 MenuItem의 Command 속성은 Student 클래스에 있는 ICommand 형식의 속성에 바인딩됩니다. MenuItem의 IsDestructive 속성을 선택한 개체를 제거 또는 삭제하는 true로 설정합니다.

시각적 개체 변경

속성에 따라 ListView에 있는 항목의 시각적 개체를 약간 변경하고 싶은 경우가 있습니다. 예를 들어 학생의 평균 성적이 2.0 미만으로 떨어지면 ColorCodedStudents 샘플은 해당 학생 이름을 빨간색으로 표시합니다. 이 작업은 Xamarin.FormsBook.Toolkit 라이브러리의 바인딩 값 변환기 ThresholdToObjectConverter를 사용하여 수행됩니다.

콘텐츠 새로 고침

ListView는 데이터를 새로 고치는 풀 다운 제스처를 지원합니다. 이 제스처를 사용하려면 프로그램에서 IsPullToRefresh 속성을 true로 설정해야 합니다. ListView는 IsRefreshing 속성을 true로 설정하고, Refreshing 이벤트를 실행하고(MVVM 시나리오의 경우) RefreshCommand 속성의 Execute 메서드를 호출하여 풀 다운 제스처에 응답합니다.

Refresh 이벤트 또는 RefreshCommand를 처리하는 코드는 ListView에서 표시하는 데이터를 업데이트하고 IsRefreshing을 다시 false로 설정합니다.

RssFeed 샘플은 데이터 바인딩을 위한 RefreshCommand 및 IsRefreshing 속성을 구현하는 RssFeedViewModel을 사용하는 방법을 보여줍니다.

TableView 및 해당 의도

ListView는 일반적으로 동일한 형식의 여러 인스턴스를 표시하는 반면, TableView는 일반적으로 다양한 형식의 여러 속성에 대한 사용자 인터페이스를 제공하는 데 집중합니다. 각 항목은 속성을 표시하거나 속성에 대한 사용자 인터페이스를 제공하기 위해 파생된 자체 Cell과 연결됩니다.

속성 및 계층 구조

TableView는 다음 네 가지 속성만 정의합니다.

TableIntent 열거형은 TableView를 어떻게 사용할 것인지 의도를 나타냅니다.

이러한 멤버는 TableView의 사용 방법도 제안합니다.

테이블을 정의할 때 다음과 같은 여러 가지 다른 클래스가 개입됩니다.

  • TableSectionBase는 BindableObject에서 파생되고 Title 속성을 정의하는 추상 클래스입니다.

  • TableSectionBase<T>는 TableSectionBase에서 파생되고 IList<T> 및 INotifyCollectionChanged를 구현하는 추상 클래스입니다.

  • TableSection은 TableSectionBase<Cell>에서 파생됩니다.

  • TableRoot은 TableSectionBase<TableSection>에서 파생됩니다.

간단히 말해서, TableView에는 TableRoot 개체로 설정하는 Root 속성이 있습니다.이 속성은 TableSection 개체의 컬렉션이고, 각 개체는 Cell 개체의 컬렉션입니다. 테이블에는 여러 섹션이 있으며, 각 섹션에는 여러 셀이 있습니다. 테이블 자체는 제목을 가질 수 있으며, 각 섹션은 제목을 가질 수 있습니다. TableView는 Cell 파생 항목을 사용하지만 DataTemplate을 사용 하지는 않습니다.

평범한 양식

EntryForm 샘플은 PersonalInformation 보기 모델을 정의합니다. 이 인스턴스는 TableView의 BindingContext가 됩니다. TableSection에서 파생된 각 Cell에는 PersonalInformation 클래스의 속성에 대한 바인딩이 있을 수 있습니다.

사용자 지정 셀

ConditionalCells 샘플은 EntryForm에서 확장됩니다. ProgrammerInformation 클래스에는 두 가지 추가 속성의 적용 가능성을 제어하는 부울 속성이 포함되어 있습니다. 이러한 두 가지 추가 속성과 관련하여, 프로그램에서는 Xamarin.FormsBook.Toolkit 라이브러리의 PickerCell.xaml 및 PickerCell.xaml.cs를 기반으로 하는 사용자 지정 PickerCell을 사용합니다.

두 PickerCell 요소의 IsEnabled 속성이 ProgrammerInformation의 부울 속성에 바인딩되는 것으로 보아 이 기술이 작동하지 않는 것 같습니다. 따라서 다음 샘플을 살펴보겠습니다.

조건부 섹션

ConditionalSection 샘플은 부울 항목의 선택에 대한 조건에 해당하는 두 항목을 별도의 TableSection에 배치합니다. 코드 숨김 파일은 TableView에서 이 섹션을 제거하거나 부울 속성을 기반으로 다시 추가합니다.

TableView 메뉴

TableView의 또 다른 용도는 메뉴입니다. MenuCommands 샘플은 화면 주위에서 BoxView를 약간 이동할 수 있는 메뉴를 보여줍니다.