다음을 통해 공유

목록에 고객 표시

UI에서 실제 데이터를 표시하고 조작하는 것은 많은 앱의 기능에 매우 중요합니다. 이 문서에서는 목록에 Customer 개체 컬렉션을 표시하기 위해 알아야 할 내용을 보여줍니다.

자습서가 아닙니다. 튜토리얼이 필요하신 경우, 단계별로 안내하는 환경을 제공하는 데이터 바인딩 자습서을 참조하세요.

데이터 바인딩의 개념과 작동 방식에 대한 빠른 논의부터 시작하겠습니다. 그런 다음 UI에 ListView 를 추가하고, 데이터 바인딩을 추가하고, 추가 기능을 사용하여 데이터 바인딩을 사용자 지정합니다.

알아야 할 사항

데이터 바인딩은 앱의 데이터를 UI에 표시하는 방법입니다. 이렇게 하면 앱에서 관심사의 분리를 통해, UI를 다른 코드와 분리할 수 있습니다. 이렇게 하면 더 쉽게 읽고 유지 관리할 수 있는 보다 명확한 개념적 모델이 만들어집니다.

모든 데이터 바인딩에는 다음 두 가지가 있습니다.

  • 바인딩할 데이터를 제공하는 원본입니다.
  • 데이터가 표시되는 UI의 대상입니다.

데이터 바인딩을 구현하려면 바인딩에 데이터를 제공하는 코드를 소스에 추가해야 합니다. 또한 데이터 원본 속성을 지정하려면 XAML에 두 개의 태그 확장 중 하나를 추가해야 합니다. 이 두 가지의 주요 차이점은 다음과 같습니다.

  • x:Bind 강력한 형식이며, 더 나은 성능을 위해 컴파일 시간에 코드를 생성합니다. x:Bind는 기본적으로 일회용 바인딩으로 설정되며, 이는 변경되지 않는 읽기 전용 데이터의 빠른 표시에 최적화됩니다.
  • 바인딩은 런타임에 약하게 타이핑되어 어셈블됩니다. 이로 인해 x:Bind보다 성능이 저하됩니다. 거의 모든 경우에 바인딩 대신 x:Bind를 사용해야 합니다. 그러나 이전 코드에서 발생할 가능성이 높습니다. 바인딩은 기본적으로 단방향 데이터 전송으로 설정되며, 원본에서 변경할 수 있는 읽기 전용 데이터에 최적화됩니다.

가능하면 x:Bind을 사용하는 것을 추천합니다. 이 문서의 코드 조각에서 이를 보여드리겠습니다. 차이점에 대한 자세한 내용은 {x:Bind} 및 {Binding} 기능 비교를 참조하세요.

데이터 원본 만들기

먼저 고객 데이터를 나타내는 클래스가 필요합니다. 참조점을 제공하기 위해 이 기본 예제를 통해 과정을 보여드리겠습니다.

public class Customer
{
    public string Name { get; set; }
}

목록 만들기

고객을 표시하려면 해당 고객을 보관할 목록을 만들어야 합니다. 목록 보기는 이 작업에 적합한 기본 XAML 컨트롤입니다. ListView에는 현재 페이지의 위치가 필요하며 곧 ItemSource 속성에 대한 값이 필요합니다.

<ListView ItemsSource=""
    HorizontalAlignment="Center"
    VerticalAlignment="Center"/>

ListView에 데이터를 바인딩한 후에는 설명서로 돌아가 필요에 가장 적합한 모양과 레이아웃을 사용자 지정하는 것이 좋습니다.

목록에 데이터 바인딩

바인딩을 저장할 기본 UI를 만들었으므로 이제 바인딩을 제공하도록 원본을 구성해야 합니다. 이 작업을 수행하는 방법의 예는 다음과 같습니다.

public sealed partial class MainPage : Page
{
    public ObservableCollection<Customer> Customers { get; }
        = new ObservableCollection<Customer>();

    public MainPage()
    {
        this.InitializeComponent();
          // Add some customers
        this.Customers.Add(new Customer() { Name = "NAME1"});
        this.Customers.Add(new Customer() { Name = "NAME2"});
        this.Customers.Add(new Customer() { Name = "NAME3"});
    }
}

<ListView ItemsSource="{x:Bind Customers}"
    HorizontalAlignment="Center"
    VerticalAlignment="Center">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="local:Customer">
            <TextBlock Text="{x:Bind Name}"/>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

데이터 바인딩 개요의 항목 컬렉션에 바인딩하는 방법에 대한 섹션에서는 유사한 문제를 단계별로 설명합니다. 이 예제에서는 다음과 같은 중요한 단계를 보여줍니다.

  • UI의 코드 숨김 파일에서 Customer 개체를 저장하기 위해 ObservableCollection<T> 형식의 속성을 만드세요.
  • ListView의 ItemSource 를 해당 속성에 바인딩합니다.
  • 목록의 각 항목이 표시되는 방식을 구성하는 ListView에 대한 기본 ItemTemplate 을 제공합니다.

레이아웃을 사용자 지정하거나, 항목 선택을 추가하거나, 방금 만든 DataTemplate을 조정하려는 경우 목록 보기 문서를 다시 살펴볼 수 있습니다. 하지만 고객을 편집하려면 어떻게 해야 할까요?

UI를 통해 고객 정보를 수정하세요

목록에 고객을 표시했지만 데이터 바인딩을 통해 더 많은 작업을 수행할 수 있습니다. UI에서 직접 데이터를 편집할 수 있다면 어떻게 해야 할까요? 이렇게 하려면 먼저 데이터 바인딩의 세 가지 모드에 대해 살펴보겠습니다.

  • 일회성: 이 데이터 바인딩은 한 번만 활성화되며 변경 내용에 반응하지 않습니다.
  • 단방향: 이 데이터 바인딩은 데이터 원본에 대한 변경 내용으로 UI를 업데이트합니다.
  • 양방향: 이 데이터 바인딩은 데이터 원본의 변경 사항을 UI에 반영하고, UI 내의 변경 사항을 데이터에 반영합니다.

앞에서 만든 코드 조각을 따른 경우 만든 바인딩은 x:Bind를 사용하고 모드를 지정하지 않으므로 One-Time 바인딩이 됩니다. UI에서 직접 고객을 편집하려면 데이터 변경 내용이 고객 개체로 다시 전달되도록 Two-Way 바인딩으로 변경해야 합니다. 데이터 바인딩의 심층 분석에 더 많은 정보가 있습니다.

양방향 바인딩은 데이터 원본이 변경된 경우에도 UI를 업데이트합니다. 이 작업을 수행하려면 원본에서 INotifyPropertyChanged를 구현하고, 속성 setter가 PropertyChanged 이벤트를 발생시켜야 합니다. 일반적인 방법은 아래와 같이 OnPropertyChanged 메서드와 같은 도우미 메서드를 호출하도록 하는 것입니다.

public class Customer : INotifyPropertyChanged
{
    private string _name;
    public string Name
    {
        get => _name;
        set
        {
            if (_name != value)
                {
                    _name = value;
                    this.OnPropertyChanged();
                }
        }
    }
    public event PropertyChangedEventHandler PropertyChanged;

    public void OnPropertyChanged([CallerMemberName] string propertyName = null) =>
        this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}

그런 다음 TextBlock대신 TextBox 사용하여 ListView의 텍스트를 편집할 수 있도록 하고 데이터 바인딩의 모드TwoWay설정해야 합니다.

<ListView ItemsSource="{x:Bind Customers}"
    HorizontalAlignment="Center"
    VerticalAlignment="Center">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="local:Customer">
            <TextBox Text="{x:Bind Name, Mode=TwoWay}"/>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

이 작업이 작동하는지 확인하는 빠른 방법은 TextBox 컨트롤 및 OneWay 바인딩을 사용하여 두 번째 ListView를 추가하는 것입니다. 첫 번째 목록을 편집하면 두 번째 목록의 값이 자동으로 변경됩니다.

비고

ListView 내에서 직접 편집하는 것은 Two-Way 바인딩을 표시하는 간단한 방법이지만 유용성 복잡성이 발생할 수 있습니다. 앱의 기능을 확장하고자 한다면 다른 XAML 컨트롤을 사용하여 데이터를 편집하는 데 활용하고, ListView는 표시 전용으로 유지하는 것이 좋습니다.

더 나아가기

이제 양방향 바인딩을 사용하여 고객 목록을 만들었으므로, 연결된 문서를 자유롭게 다시 살펴보고 실험해 보세요. 기본 및 고급 바인딩의 단계별 연습을 원하는 경우 데이터 바인딩 자습서 를 확인하거나 목록/세부 정보 패턴 과 같은 컨트롤을 조사하여 보다 강력한 UI를 만들 수도 있습니다.

유용한 API 및 문서

다음은 데이터 바인딩 작업을 시작하는 데 도움이 되는 API 및 기타 유용한 설명서의 빠른 요약입니다.

유용한 API

응용 프로그램 인터페이스 (API) 설명
데이터 템플릿 UI에서 특정 요소를 표시할 수 있도록 하는 데이터 개체의 시각적 구조를 설명합니다.
x:Bind 권장되는 x:Bind 태그 확장에 대한 설명서입니다.
바인딩 이전 바인딩 태그 확장에 대한 설명서입니다.
ListView 세로 스택에 데이터 항목을 표시하는 UI 컨트롤입니다.
텍스트박스 편집 가능한 텍스트 데이터를 UI에 표시하기 위한 기본 텍스트 컨트롤입니다.
INotifyPropertyChanged 데이터를 관찰 가능하게 만들어서 데이터 바인드에 활용하는 인터페이스입니다.
ItemsControl 이 클래스의 ItemsSource 속성을 사용하면 ListView가 데이터 원본에 바인딩할 수 있습니다.

유용한 문서

주제 설명
데이터 바인딩의 심층 이해 데이터 바인딩 원칙의 기본 개요
데이터 바인딩 개요 데이터 바인딩에 대한 자세한 개념 정보입니다.
목록 보기 DataTemplate 구현을 포함하여 ListView 만들기 및 구성에 대한 정보

유용한 코드 샘플

코드 샘플 설명
데이터 바인딩 자습서 데이터 바인딩의 기초를 이해하는 데 도움이 되는 단계별 체험 안내서입니다.
ListView 및 GridView 데이터 바인딩을 사용하여 보다 정교한 ListView를 살펴봅니다.
QuizGame "실행 중인 데이터 바인딩을 확인해 보세요. 여기에는 표준 구현 예인 BindableBase 클래스("Common" 폴더 포함)가 INotifyPropertyChanged을 위해 포함되어 있습니다."
  • Last updated on