[23기 박기현]WPF DataBinding 기술문서

[23기 박기현]

데이터 바인딩

데이터 바인딩이란? 응용 프로그램에서 데이터를 표시하고 데이터와 상호 작용하는 간단하고 편리한 방법입니다. 다양한 데이터 소스에서 CLR 개체 및 XML 의 형태로 데이터에 요소를 바인딩 할 수 있습니다. WPF의 데이터 바인딩 기능에는 데이터 바인딩을 지원하는 다양한 속성, 데이터의 유연한 UI 표현 및 비즈니스 논리와 UI의 명확한 분리와 같은 기존 모델보다 향상된 여러 가지 기능.

데이터 바인딩의 정의

데이터 바인딩은 응용 프로그램 UI와 비즈니스 논리를 서로 연결하는 프로세스입니다. 바인딩 설정이 올바르고 데이터가 적절한 알림을 제공하는 경우에는 데이터의 값이 변경될 때 데이터에 바인딩 된 요소에 변경 내용이 자동으로 반영됩니다. 또한 요소에서 데이터의 외부 표현이 변경되면 내부 데이터가 자동으로 업데이트되어 변경 내용이 반영됩니다. 예를 들어 사용자가 TextBox 요소의 값을 편집하면 해당 변경에 따라 내부 데이터 값이 자동으로 업데이트 됩니다.

일반적인 용도

-       서버

-       로컬 구성 데이터

-       폼

-       기타 UI 컨트롤에 배치

WPF에서는 이 개념이 더욱 확장되어 다양한 속성을 여러가지 데이터 소스에 바인딩 할 수 있게 되었습니다. WPF에서는 요소의 종속성 속성을 CLR 개체 및 XML 데이터에 바인딩할 수 있습니다.

기본 데이터 바인딩 개념

바인딩하려는 요소 및 데이터 소스의 특성에 관계없이 각 바인딩은 항상 다음 그림에 나타나는 모델을 따릅니다.

 데이터 바인딩은 기본적으로 바인딩 대상과 바인딩 소스사이의 다리 역할을 합니다. 그림에서는 다음 기본 WPF 데이터 바인딩 개념을 보여줍니다.

-       일반적으로 각 바인딩에는 4가지 구성 요소인 바인딩 대상 개체, 대상 속성, 바인딩 소스 및 사용할 바인딩 소스값에 대한 경로가 있습니다. 예를 들면 TextBox 가 있으면 대상 개체는 TextBox 가 되고 대상 속성은 Text 속성이 됩니다.

-       대상 속성은 종속성 속성이어야 합니다. UIElement 속성 대부분은 종속성 속성이며 읽기 전용 속성을 제외한 대부분의 종속성 속성은 기본적으로 데이터 바인딩을 지원합니다. DependencyObject 형식만 종속성 속성을 정의할 수 있으며 모든 UIElemnet는 DependencyObject에서 파생됩니다.

DependencyObject 종속성 속성 시스템에 참가하는 개체 ( 의존 속성 )

속성 시스템의 기본 기능은 속성 값을 계산하고 변경된 값에 대한 시스템 알림을 제공하는 것입니다. 속성 시스템에 참가하는 다른 주요 클래스는 DependencyProperty입니다. DependencyProperty 는 속성 시스템에 종속성 속성을 등록할 수 있도록 하며 각 종속성 속성에 대한 ID 및 정보를 제공합니다. 여기서 DependencyProperty는 스타일 지정, 데이터 바인딩, 애니메이션 및 상속과 같은 방법을 통해 설정할 수 있는 속성을 나타냅니다.

 DependencyProperty기능

1)     스타일에서 속성을 설정할 수 있습니다.

2)     데이터 바인딩을 통해 속성을 설정할 수 있습니다.

3)     동적 리소스 참조를 사용하여 속성을 설정할 수 있습니다.

4)     속성에 애니메이션을 적용할 수 있습니다.

5)     이 속성은 속성의 이전 값이 변경되고 속성 값이 강제로 변환될 때 보고할 수 있습니다.

6)     속성은 WPF Designer for visual studio에서 지원을 받습니다.

-       그림에는 지정되어 있지 않지만 바인딩 소스 개체는 사용자 지정 CLR 개체로 제한되지 않습니다. WPF 데이터 바인딩에서는 CLR 개체 및 XML 형식의 데이터를 지원합니다.

다른 software development kit (SDK) 항목을 읽을 때 바인딩을 설정하는 것은 곧 바인딩 대상을 바인딩 소스에 바인딩하는 것임을 기억하세요. 바인딩을 설정하려면 바인딩 개체를 사용해야 합니다. 이 항목의 나머지 부분에서는 바인딩 개체의 사용법과 몇 가지 속성 및 여러 가지 관련 개념을 설명합니다.

-> 데이터 흐름의 방향

바인딩의 데이터 흐름은 바인딩 대상에서 바인딩 소스로 흐르거나 바인딩 소스가 적절한 알림을 제공하는 경우에는 바인딩 소스에서 바인딩 대상으로 흐를 수 있습니다. 예를 들면 바인딩 소스가 변경되면 TextBox 내용이 업데이트 된다.

 사용자가 응용 프로그램에서 데이터를 변경했을 때 이 변경 내용이 소스 개체로 전파되어야 할 수 있습니다. 또는 사용자가 소스 데이터를 업데이트하지 못하도록 해야 할 수 있습니다. 바인딩 개체의 Mode 속성을 설정하여 이를 제어할 수 있습니다. 다음 그림에서는 여러 가지 형태의 데이터 흐름을 보여줍니다.

 

-       OneWay 바인딩 – 소스 속성이 변경된 경우 대상 속성이 자동으로 업데이트 되지만 대사 속성이 변경된 경우에는 변경 내용이 소스 속성으로 전파되지 않습니다. 이 형식의 바인딩은 바인딩되는 컨트롤이 암시적으로 읽기 적용인 경우 적합합니다. 대상 속성의 변경 내용을 모니터링할 필요가 없는 경우 OneWay 바인딩 모드를 사용하면 TwoWay 바인딩 모드의 오버헤드를 줄일 수 있습니다.

-       TwoWay 바인딩 – 소스 속성이 변경되면 자동으로 대상 속성이 업데이트 되고, 대상 속성이 변경되면 자동으로 소스 속성이 업데이트됩니다. 이 형식의 바인딩은 편집 가능한 폼이나 기타 완전 대화형 UI 시나리오에 적합합니다. 대부분의 속성은 OneWay 바인딩을 기본값으로 사용하지만 일부 종속성 속성은 TwoWay바인딩을 기본값으로 사용합니다.

(확인법 GetMetadata 를 사용하여 속성 메타 데이터 가져온 다음 BindsTwoWayByDefault 속성의 Boolean 값을 확인 양방향 바인딩시 true 이고 그렇지 않으면 false 기본값은 false)

-       OneWayToSource 는 OneWay 바인딩의 반대입니다. 즉 대상 속성이 변경될 때 소스 속성을 업데이트합니다. 이에 대한 한 가지 예제 시나리오는 UI에서 소스 값을 다시 확인하기만 하면 되는 경우입니다.

-       그림에서는 없지만 OneTime 바인딩의 경우에는 소스 속성이 대상 속성을 초기화하지만 이후 변경은 전파되지 않습니다. 즉, 데이터 컨텍스트가 변경되고 있거나 데이터 컨텍스트의 개체가 변경된 경우에도 변경이 대상 속성에 반영되지 않는다는 것을 의미합니다. 이 형식의 바인딩은 현재 상태의 스냅숏이 사용하기에 적합하거나 데이터가 정적인 상황에서 데이터를 사용하는 경우 적합합니다.

->소스 업데이트를 트리거하는 항목

 TwoWay 또는 OneWayToSource인 바인딩은 대상 속성의 변경 내용을 수신하고 해당 변경 내용을 다시 소스로 전파합니다. 이 과정을 소스 업데이트라고 합니다. 하지만 텍스트를 편집하고 있을 때나 텍스트 편집을 마치고 마우스를 TextBox 외부로 움직였을 때 소스 값이 업데이트 될까요? 소스 업데이트를 트리거할 항목은 바인딩의 UpdateSourceTrigger 속성에 따라 결정됩니다.

UpdateSourceTrigger 값이 PropertyChanged이면 대상 속성이 변경되는 즉시 OneWayToSource 바인딩 또는 TwoWay 바인딩의 오른쪽 화살표가 가리키는 값이 업데이트 됩니다. 하지만 UpdateSourceTrigger 값이 LostFocus이면 대상 속성이 포커스를 잃었을 때에만 해당 값이 새 값으로 업데이트됩니다.

(UpdateSourceTrigger은 기본값은 대상 종속성 속성의 기본값을 반환하는 Default 입니다. 그러나 Text 속성의 기본값은 lostFocus이지만, 대부분의 종속성 속성의 기본값은 PropertyChanged입니다. 값을 확인하기 위해서는 GetMetadata 를 사용하여 메타 데이터를 가져온 다음 DefaultupdateSourceTrigger 속성의 값을 확인하는 것입니다.)

TextBox 에 대한 UpdateSourceTrigger 값에 대한 예제 시나리오

pdateSourceTrigger 값	소스 값이 업데이트될 때	TextBox에 대한 예제 시나리오
LostFocus(TextBox.Text의 기본값)	TextBox 컨트롤이 포커스를 잃을 때	유효성 검사 논리와 연결된TextBox(데이터 유효성 검사 단원 참조)
PropertyChanged	TextBox에 입력할 때	채팅방 창의 TextBox 컨트롤
Explicit	응용 프로그램에서UpdateSource를 호출할 때	편집 가능한 폼의 TextBox 컨트롤(사용자가 제출 단추를 클릭할 때만 소스 값 업데이트)

UpdateSoruceTrigger TextBox 각 속성 예제

바인딩 만들기

Binding 개체를 사용하여 바인딩을 만들며 각 바인딩에는 일반적으로 바인딩 대상, 대상 속성, 바인딩 소스 및 사용할 소스 값에 대한 경로의 네 구성 요소가 있습니다. 이 단원에서는 바인딩을 설정하는 방법을 설명합니다.

<DockPanel

  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  xmlns:c="clr-namespace:SDKSample">

  <DockPanel.Resources>

    <c:MyData x:Key="myDataSource"/>

  </DockPanel.Resources>

  <DockPanel.DataContext>

    <Binding Source="{StaticResource myDataSource}"/>

  </DockPanel.DataContext>

  <Button Background="{Binding Path=ColorName}"

          Width="150" Height="30">I am bound to be RED!</Button>

</DockPanel>

OneWay 방식

바인딩 선언 구문에 대한 자세한 설명과 코드에서 바인딩을 설정하는 방법에 대한 예제는 바인딩 선언 개요 를 참조하세요

e  바인딩 소스 지정

위 예제에서 DockPanel 요소에 DataContext 속성을 설정하여 바인딩 소스를 지정합니다. 그러면 Button은 부모 요소인 DockPanel 에서 DataContext 값을 상속합니다. 바인딩 소스 개체는 바인딩의 네 가지 필수 구성 요소 중 하나입니다. 따라서 바인딩 소스 개체를 지정하지 않으면 바인딩은 아무 작업도 수행할 수 없습니다.

-       여러 속성을 같은 소스에 바인딩할 때는 부모 요소에 DataContext 속성 사용

-       개별 바인딩 선언에서 바인딩 소스를 지정하는 것이 더 적합할 경우

위의 예제의 경우 DataContext 속성을 사용하는 대신 다음 예제에서처럼 단추의 바인딩 선언에 직접 Source 속성을 설정하여 바인딩 소스를 지정할 수 있습니다.

<DockPanel.Resources>

  <c:MyData x:Key="myDataSource"/>

</DockPanel.Resources>

<Button Width="150" Height="30"

        Background="{Binding Source={StaticResource myDataSource},

                             Path=ColorName}">I am bound to be RED!</Button>

요소에 직접 DataContext 속성을 설정하고, 상위에서 DataContext 값을 상속하고 , Binding에 Source 속성을 설정하여 바인딩 소스를 명시적으로 지정하는 방법이외에도, ElementName 속성 또는 RelativeSource 속성을 사용하여 단추 너비를 조정하는 경우처럼 응용 프로그램의 다른 요소에 바인딩할 때 유용합니다. RelativeSource 속성은 컨트롤 템플릿 또는 스타일에서 바인딩을 지정할 때 유용합니다.

-       Source

-       RelativeSource

-       DataContext

e  값에 대한 경로 지정

바인딩 소스가 개체일 때는 Path 속성을 사용하여 바인딩에 사용할 값을 지정합니다.

XML 데이터에 바인딩할 때는 XPath 속성을 사용하여 값을 지정합니다. 경우에 따라서는 데이터가 XML일 경우에도 Path속성을 사용하는 것이 적절할 수 있다.

<ListBox ItemsSource="{Binding}"

         IsSynchronizedWithCurrentItem="true"/>

위의 예제에서는 빈 바인딩 구문 {Binding} 를 사용합니다. 이 경우 ListBox 는 부모 DockPanel 요소에서 DataContext를 상속합니다. 경로를 지정하지 않으면 기본적으로 전체 개체에 바인딩합니다. 이 예제에서는 ItemsSource 속성을 전체 개체에 바인딩하고 있으므로 경로를 비워둔 것입니다.

이 시나리오는 컬렉션에 대한 바인딩 이외에 개체의 단일 속성만이 아니라 전체 개체에 바인딩할 때도 유용합니다. 소스 개체가 문자열 형식일 때 문자열 자체에만 바인딩하려는 경우를 예로 들 수 있습니다.

e  Binding 및 BindingExpression‎

Binding 클래스는 바인딩 선언의 고급 클래스입니다. 즉, Binding 클래스는 바인딩의 특성을 지정할 수 있는 여러 속성을 제공합니다. 관련 클래스인 BindingExpression‎ 은 소스와 대상 사이의 연결을 유지 관리하는 기본 개체입니다. 바인딩에는 여러 바인딩 식에서 공유될 수 있는 모든 정보가 포함됩니다. BindingExpression‎ 은 공유할 수 없으며 Binding의 모든 인스턴스 정보를 포함하는 인스턴스 식입니다.

컬렉션에 바인딩

 바인딩 소스 개체는 속성에서 데이터를 포함하는 단일 개체 또는 함께 그룹화되는 경우가 많은 다형성 개체의 데이터 컬렉션으로 취급될 수 있습니다. 예를 들어 ListBox, ListView 또는 TreeView 등의 ItemsControl을 사용하여 데이터 바인딩의 정의 단원에 소개된 응용 프로그램 등에서 데이터 컬렉션을 표시합니다.

(여기서 ItemsControl 클래스의 경우 컬렉션을 나타내는 데 사용되는 컨트롤을 의미.)

ItemsControl 을 컬렉션 개체에 바인딩하려면 ItemsSource 속성을 사용해야 합니다. ItemsSource 속성은 ItemsControl 의 내용이라고 생각할 수 있습니다. 기본적으로 OneWay 바인딩을 기본적으로 지원하기 때문에 바인딩은 OneWay 라는 점에 유의합니다.

e  컬렉션 구현 방법

컬렉션에서 삽입이나 삭제를 수행할 때 UI가 자동으로 업데이트되도록 동적 바인딩을 설정하려면 컬렉션에서 INotifyCollecti[안내]태그제한으로등록되지않습니다-xxonChanged 인터페이스를 구현해야 합니다. 이 인터페이스는 내부 컬렉션이 변경될 때마다 발생해야 하는 이벤트를 노출합니다.

(INotifyCollecti[안내]태그제한으로등록되지않습니다-xxonChanged 항목이 추가 및 제거되거나 전체 목록이 새로 고쳐진 경우와 같은 동적 변경 내용을 수신기에 알립니다.)

WPF에서는 INOtifyCollecti[안내]태그제한으로등록되지않습니다-xxonChanged 인터페이스를 노출하는 데이터 컬렉션에 대한 기본 제공 구현인 ObservableCollection(Of T) 클래스를 제공합니다. 데이터 값을 소스 개체에서 대상으로 전송하는 것을 완전하게 지원하려면 바인딩 가능한 속성을 지원하는 컬렉션의 각 개체도 INOtifyPropertyChanged 인터페이스를 구현해야 합니다.

(INotifyPropertyChanged 속성값이 변경 됬었음을 알리는 인터페이스)

컬렉션을 직접 구현하는 대신 ObservableCollection(Of T)를 사용하거나 List(Of T), Collection(Of T) 및 BindingList(Of T)를 비롯한 기존 컬렉션 클래스 중 하나를 사용하는 것이 좋습니다.

e  컬렉션 뷰

ItemsControl 을 데이터 컬렉션에 바인딩한 뒤에는 데이터를 정렬하거나, 필터링하거나, 그룹화할 수 있습니다. 이렇게 하려면 ICollectionView 인터페이스를 구현하는 클래스인 컬렉션 뷰를 사용합니다.

->컬렉션 뷰 정의

기본 소스 컬렉션 자체를 변경할 필요 없이 정렬, 필터 및 그룹화 쿼리를 기반으로 소스 컬렉션을 탐색하고 표시하는 데 사용할 수 있는 바인딩 소스 컬렉션의 최상위 계층입니다.

->기본 뷰 사용

컬렉션 뷰를 바인딩 소스로 지정하는 것은 컬렉션 뷰를 만들고 사용하는 다양한 방법 중 하나에 불과합니다. WPF에서는 바인딩 소스로 사용되는 모든 컬렉션에 대해 기본 컬렉션 뷰를 만듭니다. WPF 에서 컬렉션에 직접 바인딩하면 컬렉션의 기본 뷰에 바인딩됩니다. 이 기본 뷰는 동일 컬렉션에 대한 모든 바인딩에서 공유하므로 바인딩 된 컨트롤이나 코드 중 하나에 의해 기본 뷰가 변경되면 동일 컬렉션에 대한 모든 바인딩에 해당 변경 내용이 반영됩니다. 기본 뷰를 가져오려면 GetDefaultView 메서드를 사용합니다.

->ADO.NET DataTable이 포함된 컬렉션 뷰

ADO.NET DataTable 또는 DataView 개체에 대한 컬렉션 뷰는 정렬 및 필터링을 DataView에 위임합니다. 이렇게 하면 정렬 및 필터링이 데이터 소스의 모든 컬렉션 뷰에서 공유됩니다. 각 컬렉션 뷰를 독립적으로 정렬 및 필터링하려면 각 컬렉션 뷰의 DataView 개체를 사용하여 컬렉션 뷰를 초기화 합니다.

->정렬

뷰를 사용하면 기본 컬렉션을 변경하거나 컬렉션 내용을 다시 쿼리하지 않고 사용자가 중심의 정렬을 적용할 수 있습니다.

->필터링

컬렉션에 한 항목이 있어도 이 특정 뷰는 전체 컬렉션의 특정 하위 집합만 표시할 수 있습니다.

->그룹화

컬렉션을 표시하는 내부 클래스를 제외한 모든 컬렉션 뷰는 그룹화 기능을 지원하며, 이를 통해 사용자는 컬렉션 뷰의 컬렉션을 논리 그룹으로 나눌 수 있습니다.

->현재 항목 포인터

컬렉션 뷰에서 개체를 탐색할 수 있습니다. 탐색할 때 항목 포인터를 이동하여 컬렉션의 특정 위치에 있는 개체를 검색할 수 있습니다.

 WPF에서는 뷰를 사용해서만 컬렉션에 바인딩하므로 컬렉션에 대한 모든 바인딩에는 현재 항목 포인터가 있습니다. 뷰에 바인딩하는 경우 Path 값에서 슬래시 (“/”) 문자를 사용하여 뷰의 현재 항목을 지정합니다.

<Button Content="{Binding }" />

<Button Content="{Binding Path=/}" />

<Button Content="{Binding Path=/Description}" /> 

첫 번째 – 컬렉션에 바인딩

두 번째 – 컬렉션의 현재 항목에 바인딩

세 번째 – 컬렉션에 있는 현재 항목의 Description 속성에 바인딩

->마스터-세부 바인딩 시나리오

둘 이상의 컨트롤을 같은 뷰에 바인딩하면 마스터-세부 시나리오를 간단하게 구현할 수 있습니다.

데이터 유효성 검사

 사용자 입력을 받는 대부분의 응용 프로그램에는 사용자가 올바른 정보를 입력했는지 확인하기 위한 유효성 검사 논리가 필요합니다. 유효성 검사는 형식, 범위, 서식 또는 기타 응용 프로그램별 요구 사항을 기반으로 할 수 있습니다.

e  유효성 검사 규칙을 바인딩과 연결

ValidationRules를 Binding 개체와 연결할 수 잇습니다.

ValidationRule 개체는 속성 값이 유효한지 여부를 확인합니다.

n  ExceptionValidationRule 은 바인딩 소스 속성의 업데이트 도중 throw된 예외를 검사합니다.

n  DataErrorValidationRule 개체는 IDataErrorInfo 인터페이스를 구현하는 개체에 의해 발생하는 오류를 검사합니다.

e  시각적 피드백 제공

사용자가 잘못된 값을 입력하는 경우 응용 프로그램 UI에서 오류에 대한 몇 가지 피드백을 제공할 수 있습니다. 이러한 피드백을 제공하는 한가지 방법은 Validation.ErrorTemplate 연결된 속성을 사용자 지정 ControlTemplate으로 설정하는 것입니다.

e  유효성 검사 프로세스

유효성 검사는 대개 대상의 값이 바인딩 소스 속성으로 전송될 때 수행합니다. 이는 TwoWay 및 OneWayToSource 바인딩에서 발생합니다