ListView 데이터 원본
A Xamarin.FormsListView
는 데이터 목록을 표시하는 데 사용됩니다. 이 문서에서는 데이터로 채우는 ListView
방법과 선택한 항목에 데이터를 바인딩하는 방법을 설명합니다.
ItemsSource
A ListView
는 구현하는 모든 컬렉션을 허용할 수 있는 속성을 사용하여 ItemsSource
데이터로 채워집니다 IEnumerable
. 가장 간단한 채우기 방법은 ListView
문자열 배열을 사용하는 것입니다.
<ListView>
<ListView.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>mono</x:String>
<x:String>monodroid</x:String>
<x:String>monotouch</x:String>
<x:String>monorail</x:String>
<x:String>monodevelop</x:String>
<x:String>monotone</x:String>
<x:String>monopoly</x:String>
<x:String>monomodal</x:String>
<x:String>mononucleosis</x:String>
</x:Array>
</ListView.ItemsSource>
</ListView>
해당하는 C# 코드는 다음과 같습니다.
var listView = new ListView();
listView.ItemsSource = new string[]
{
"mono",
"monodroid",
"monotouch",
"monorail",
"monodevelop",
"monotone",
"monopoly",
"monomodal",
"mononucleosis"
};
이 방법은 문자열 목록으로 채웁 ListView
니다. 기본적으로 ListView
각 행에 TextCell
대한 결과를 호출 ToString
하고 표시합니다. 데이터가 표시되는 방식을 사용자 지정하려면 셀 모양을 참조 하세요.
배열로 전송되었으므로 ItemsSource
기본 목록 또는 배열이 변경되면 콘텐츠가 업데이트되지 않습니다. 기본 목록에서 항목이 추가, 제거 및 변경될 때 ListView가 자동으로 업데이트되도록 하려면 다음을 사용해야 ObservableCollection
합니다. ObservableCollection
는 다음과 같이 정의 System.Collections.ObjectModel
되며 변경 내용을 알릴 ListView
수 있다는 점을 제외하면 다음과 같습니다List
.
ObservableCollection<Employee> employees = new ObservableCollection<Employee>();
listView.ItemsSource = employees;
//Mr. Mono will be added to the ListView because it uses an ObservableCollection
employees.Add(new Employee(){ DisplayName="Mr. Mono"});
데이터 바인딩
데이터 바인딩은 사용자 인터페이스 개체의 속성을 viewmodel의 클래스와 같은 일부 CLR 개체의 속성에 바인딩하는 "glue"입니다. 데이터 바인딩은 지루한 상용구 코드를 많이 대체하여 사용자 인터페이스 개발을 간소화하기 때문에 유용합니다.
데이터 바인딩은 바인딩된 값이 변경됨에 따라 개체를 동기화 상태로 유지하여 작동합니다. 컨트롤의 값이 변경 될 때마다 이벤트 처리기를 작성 하는 대신 바인딩을 설정 하 고 viewmodel에서 바인딩을 사용 하도록 설정 합니다.
데이터 바인딩에 대한 자세한 내용은 XAML 기본 문서 시리즈의 4 Xamarin.Forms 부인 데이터 바인딩 기본 사항을 참조하세요.
셀 바인딩
셀의 속성(및 셀의 자식)은 에 있는 개체의 속성에 ItemsSource
바인딩할 수 있습니다. 예를 들어 ListView
직원 목록을 표시하는 데 사용할 수 있습니다.
직원 클래스:
public class Employee
{
public string DisplayName {get; set;}
}
이 ObservableCollection<Employee>
만들어지고, 로 설정 ListView
ItemsSource
되고, 목록이 데이터로 채워집니다.
ObservableCollection<Employee> employees = new ObservableCollection<Employee>();
public ObservableCollection<Employee> Employees { get { return employees; }}
public EmployeeListPage()
{
EmployeeView.ItemsSource = employees;
// ObservableCollection allows items to be added after ItemsSource
// is set and the UI will react to changes
employees.Add(new Employee{ DisplayName="Rob Finnerty"});
employees.Add(new Employee{ DisplayName="Bill Wrestler"});
employees.Add(new Employee{ DisplayName="Dr. Geri-Beth Hooper"});
employees.Add(new Employee{ DisplayName="Dr. Keith Joyce-Purdy"});
employees.Add(new Employee{ DisplayName="Sheri Spruce"});
employees.Add(new Employee{ DisplayName="Burt Indybrick"});
}
Warning
A ListView
는 내부 ObservableCollection
변경 내용에 따라 업데이트되지만 다른 ListView
ObservableCollection
인스턴스가 원래 ObservableCollection
참조(예: employees = otherObservableCollection;
)에 할당된 경우 업데이트되지 않습니다.
다음 코드 조각은 직원 목록에 바인딩된 것을 보여 ListView
줍니다.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:constants="clr-namespace:XamarinFormsSample;assembly=XamarinFormsXamlSample"
x:Class="XamarinFormsXamlSample.Views.EmployeeListPage"
Title="Employee List">
<ListView x:Name="EmployeeView"
ItemsSource="{Binding Employees}">
<ListView.ItemTemplate>
<DataTemplate>
<TextCell Text="{Binding DisplayName}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage>
이 XAML 예제에서는 ContentPage
ListView
. ListView
의 데이터 원본은 ItemsSource
특성를 통해 설정됩니다. ItemsSource
에서 각 행의 레이아웃은 ListView.ItemTemplate
요소 내에 정의됩니다. 그러면 다음 스크린샷이 표시됩니다.
Warning
ObservableCollection
가 스레드로부터 안전하지 않습니다. 수정하면 ObservableCollection
수정을 수행한 동일한 스레드에서 UI 업데이트가 발생합니다. 스레드가 기본 UI 스레드가 아니면 예외가 발생합니다.
SelectedItem 바인딩
이벤트 처리기를 사용하여 변경 내용에 응답하는 대신 선택한 항목 ListView
에 바인딩하는 경우가 많습니다. XAML에서 이 작업을 수행하려면 속성을 바인딩합니다 SelectedItem
.
<ListView x:Name="listView"
SelectedItem="{Binding Source={x:Reference SomeLabel},
Path=Text}">
…
</ListView>
's가 문자열 SomeLabel
목록이라고 가정listView
하면 해당 Text
속성이 .에 바인딩SelectedItem
됩니다.ItemsSource