[C#] WPF에 대해서 알아보자 #2 Binding 기본 개념 및 예제 , 변환기 Converter

 

WPF 는 DataBinding을 제공하는데, DataBinding 이란
UI요소와(.xaml) 소스코드(.xaml.cs)의 데이터를 서로 연결하는 것이다. 
DataBinding을 적용한 후 Binding한 값이 변경되는 경우 바인딩된 컨트롤 요소가 자동으로 업데이트된다.

 

기본 개념

바인딩할 요소 및 데이터소스의 특성에 관계없이 각 바인딩은 항상 다음 모델을 따른다.

바인딩은 바인딩 대상과 바인딩 소스를 연결한다.

바인딩의 기본 구성요소

바인딩 대상 개체 / 대상 속성 / 바인딩 소스 / 사용할 바인딩 

설정	값
대상	TextBox
대상 속성	Text
원본 개체	Employee
원본 개체 값 경로	Name

 으로 구성된다.

 

 

하나의 예를 들어보자

class Car{
    string speed;
    string name;
}

WPF에서 TextBox에 Car 클래스(데이터 객체)의 speed를 출력해주는 코드를 작성할때 

TextBox의 Text 속성의 초기에 speed가 할당되면 Text속성의 모든 변경이 데이터 객체의 speed에 속성에 할당되게 하기 위해선 하나의 xaml 라인만 작성하면 된다. 

<!-- 첫번째 구문
 텍스트 속성을 speed 속성에 연결
-->
<TextBox Text="{Binding speed, ElementName=c}"/>


<!-- 두번째 구문
가장 간단한 방법 
원본 데이터 객체는 현재 데이터 컨텍스트에서 검색된다. 
-->
<TextBox Text="{Binding speed}"/>

<!-- 세번째 구문 
세번째 구문과 두번째 구문은 동일하다 -->
<TextBox Text="{Binding Path=speed}"/>

<!-- 네번째 구문 
someList컨트롤의 높이가 TextBox 컨트롤의 실제 높이로 표현되고, 
TextBox 컨트롤에 새 값을 입력하면 someList컨트롤의 높이가 변경된다.
-->
<TextBox Text = "{Binding Source={StaticResource someList},Path=Height}"/>

첫번째 구문에서 원본 데이터 객체 c가 x:Name 속성을 가진 또다른 컨트롤인 상태를 나타내는 ElementName 속성을 사용하는 상태인 것을 알수 있다. (*ElementName속성은 체크박스의 체크상태에 따라 신속하게 패널을 표시하거나 숨길때 유용)

 

두번째 구문처럼 Path= 구문을 생략할 경우 path속성에 바인딩 할 속성(지금은 speed)이 처음으로 표시되어야 한다. 

 

네번째 구문은 자주 접하게 되는 또다른 속성으로 원본 데이터 객체가 리소스로 정의돼 있음을 명시하는 속성이다.

 

 

바인딩 예제

 

하나의 예를 들어보자

<StackPanel>
    <Slider Maximum="100" Value="10" x:Name="slider"/>
    <ProgressBar Value="{Binding Value, ElementName=slider}"/>
    <TextBox Text="{Binding Value, ElementName=slider}"/>
</StackPanel>

위의 예제를 보면 Slider의 Value에 Progressbar의 Value와 TextBox의 Text속성을 연결하여 사용했다. 

 

아래 코드를 예상해보자. 

<StackPanel  Background="{Binding Text, ElementName=color}">
    <TextBox Text="Yellow" x:Name="color"/>
</StackPanel>

Brush 속성까지 진짜 별게다된다.. 

 

 

바인딩 모드

바인딩의 종류는 총 4가지로 구분된다.

Dafault 속성은 사용자 입력을 허용하는 컨트롤은 TwoWay 다른 컨트롤은 OneWay이다.

Mode 속성을 사용해 바인딩 옵션을 재정의 할 수 있다.

업데이트 시
모드	대상 변경	값 변경
TwoWay	Y	Y
OneWay	N	Y
OneWayToSource	Y	N
OneTime	N	N

*OneWayToSource와 OneTime은 거의 사용되지 않는다.

 

 

추가속성

• UpdateSourceTrigger : 입력 컨트롤을 사용해 소스 속성이 업데이트 되는 시기를 지정할 수 있다.
    예를들어 TextBox컨트롤에서 UpdateSourceTrigger = Property Canged 를 설정하면 포커스를 잃어버릴 때 뿐만 아니라 모든 변경사항 발생시 원본 속성을 업데이트 할 수 있다.
• TargetNullValue : null로 해석될 때마다 원본 특성 값 대신 사용해야 하는 값을 지정.
• FallbackValue : 문제가 발생할 때마다 사용해야 하는 값을 지정.
• StringFormat : 대상 컨트롤에 제공하기 전, 원본 속성의 값에 양식을 적용. 변환기는 해당 기능과 읽기가 가능.

 

---

변환기

 

XAML 엔진은 위의 예제중 Text를 Double로, Brush로 변경하는 것처럼 데이터 바인딩 시 객체 유형을 변환한다. 

변환 시스템은 변환기(Converters)를 사용해 확장할 수 있다. 

변환기는 IValueConverter 인터페이스를 상속해 구현한 클래스다. 

IValueConverter는 표준 함수 Convert()와 양방향 데이터 변환함수 ConvertBack() 메소드를 구현해야 한다. 

변환기의 사용법은 변환기를 인스턴스화한 후 데이터 바인딩 표현식에 인스턴스를 참조하면 된다.

 

다음 예제를 참고하자

 

코드 비하인드

namespace Sample
{
    public class converterSample : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return (int.Parse(value.ToString()) * 2).ToString();
            throw new NotImplementedException();
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}

XAML

<StackPanel >
    <TextBox Text="10" x:Name="num"/>
    <TextBlock Background="Yellow" Text="{Binding Text, ElementName=num ,Converter={StaticResource myConv}}" />
</StackPanel>

 

 

Converter에 의해 2배의 값으로 출력되는 것을 볼 수 있다.