이 내용은 2011년 6월 현재 Silverlight5 Beta를 기준으로 작성 되었으며 Silverlight5 공식버전(RTM) 발표까지 꾸준히 업데이트 예정입니다.
아울러, 현재 Beta버전이지만 강좌를 따라해 보시는데 아무 문제 없으실거에요. 도움 되시길 바랍니다.
==================================================================================================



지난 강좌까지는 실버라이트로 응용 프로그램을 만드는데 가장 필수적인 내용들에 대해서 다뤘습니다.

 

이제부터 진짜로 실버라이트의 장점이라고 할 수 있는 기능들에 대해서 설명해야 하는데… 실버라이트의 핵심 기능들은 서로 연관성이 많아서 여러 가지 기능들을 모두 이해하고 있어야만 현실 세계에서 사용할 수 있는 프로그램을 만들 수 있다는 것이 문제입니다.

 

어떤 것부터 설명해야 할지 고민이 많이 되었는데… 쉽고 간단한 것부터 설명해나가는 것이 어렵거나 지루하지 않을 것 같네요.

 

그래서, 이번 강좌에서는 실버라이트의 바인딩 기능 중 엘리먼트 바인딩에 대해서 설명해볼까 합니다.

 

 

 

 

바인딩이란?

 

바인딩(binding)은 한 마디로 어떤 것과 어떤 것을 묶는 작업입니다.

 

프로그래밍 분야에서 바인딩이라 하면 데이터와 UI를 바로 연결하여 코드의 도움 없이 데이터를 UI에 표시하는 것이라고 봐도 맞을 듯 합니다. 정확히 말하면 이와 같은 바인딩을 데이터 바인딩이라고 하죠. 윈폼이나 웹폼과 같은 .NET 프로그래밍을 해보셨다면 데이터 바인딩에 대해서 들어보셨거나 이미 알고 있으실 겁니다.

 

데이터 바인딩을 사용하면 데이터를 UI에 바로 연결함으로써 소위 말하는 코드 노가다를 좀 줄이고 뻔한 코드들을 없앰으로써 코드도 이쁘게 하고 기타 등등등.. 의 장점을 얻을 수 있습니다.

 

실버라이트도 윈폼이나 웹폼과 같이 데이터 바인딩이 지원이 됩니다. 하긴, .NET 관련 기술 중에서 데이터 바인딩이 지원 안되는 기술은 없군요^^;

 

 

 

 

그런데, 왜 이 절의 제목이 데이터 바인딩이 아니라 그냥 바인딩일까요?

 

네~ 실버라이트(WPF도 마찬가지)에서는 데이터만 바인딩하는 것 뿐만 아니라 각 컨트롤의 속성도 바인딩을 할 수 있기 때문에 보다 범용적인 의미로 바인딩이라는 용어를 사용했습니다.

 

실버라이트에서는 윈폼이나 웹폼보다 바인딩이라는 기능이 더욱 중요하고 자주 사용이 됩니다. 왜냐면… 실버라이트로 만드는 응용 프로그램을 윈폼과 같이 멋없게 만들 수는 없기 때문입니다^^;

 

다시 말하면, 실버라이트를 사용하는 가장 큰 이유 중 하나가 멋지고 사용성이 좋은 UI를 만드는 것이다 보니 프로그램 개발에서 디자인이 차지하는 비중이 크고, 따라서 디자인 변경의 용이성 및 디자인과 코드의 분리를 위해서는 바인딩을 적재 적소에 사용하는 것이 효과적이기 때문입니다.

 

 

실버라이트에서 바인딩은 크게 데이터 바인딩과 엘리먼트 바인딩이 있는데, 이 중에서 보다 간단한 엘리먼트 바인딩에 대해서 살펴보도록 하겠습니다.

 

 

 

 

엘리먼트 바인딩이란?

 

데이터 바인딩이 데이터와 UI 사이의 연결이라면 엘리먼트 바인딩은 컨트롤과 컨트롤 사이의 연결입니다. 실버라이트에서는 UI를 XML 기반의 XAML로 표시하기 때문에 엘리먼트와 엘리먼트 사이의 연결이라고도 할 수 있습니다.

 

 

좀 더 자세히 말하면, 엘리먼트 바인딩은 두 컨트롤 사이에 연결고리를 만들어서 한 쪽의 속성이 바뀔 때 다른 쪽의 속성도 같이 바뀌게 해주는 기능입니다.

 

image_14.png

 

 

 

 

 

엘리먼트 바인딩은 샘플을 보시면 바로 이해하실 수 있습니다.

 

다운로드 진행 상태를 보여주는 UI를 만든다고 생각해봅시다. 대부분의 프로그램들을 보면 프로그레스 바와 함께 진행 정도를 숫자로도 표시해주죠? 당연히 우리도 다음과 같이 ProgressBar와 TextBlock을 같이 사용해야 할 겁니다.

 

image_8.png

 

 

 

 

그런데, ProgressBar의 값이 바뀔 때 위쪽의 TextBlock의 텍스트도 같이 바뀌면 참 좋겠다는 생각이 드는군요.

 

 

예전의 우리라면 아마도 다음과 같이 ValueChanged 이벤트 핸들러에서 TextBlock의 값을 바꿔주는 코드를 넣을 것 같군요.

 

image_12.png

 

 

 

 

그런데, 이런 류의 코딩은 말 그대로 단순 노가다에 너무 뻔한 코드이지 않나요?

이 경우 엘리먼트 바인딩을 이용하면 다음과 같이 코드의 도움 없이 XAML 단에서 바로 처리할 수 있습니다.

 

image_20.png

 

 

 

 

TextBlock의 Text 값이 직접 지정되어 있지 않고 다음과 같이 DownloadProgress 컨트롤의 Value에 바인딩되어 있습니다.

Text="{Binding Value, Mode=OneWay, ElementName=DownloadProgress}"


 

 

다음과 같이 ProgressBar의 Value 값이 바뀌면 TextBlock의 값도 같이 바뀜을 확인하실 수 있습니다.

 

image_28.png

 

 

 

 

 

엘리먼트 바인딩 문법을 몰라도 대충 무슨 뜻인지 이해하시겠죠?  사실 엘리먼트 바인딩은 이게 다 입니다^^;

그래도 설명을 해보도록 하겠습니다.

 

1) 실버라이트의 모든 바인딩 문법은 {}로 묶여져야 합니다. 또한 각 바인딩 속성은 쉼표로 구분이 됩니다.

 

2) “Binding” 키워드 바로 뒤에 연결할 필드 명을 지정합니다. 위 경우에는 ProgressBar의 Value 속성이 바인딩 되었습니다.

 

3) Mode는 바인딩 모드를 의미하며 총 3가지가 있습니다.

OneTime 처음 한 번만 바인딩합니다. 그 뒤로 값이 바뀌어도 반영이 되지 않습니다.
OneWay 한 방향으로만 바인딩합니다. 위 경우 ProgressBar의 Value값이 바뀌면 TextBlock도 같이 바뀌지만, TextBlock값이 바뀔 때 ProgressBar의 Value가 바뀔 필요는 없으므로 OneWay로 지정했습니다.
TwoWay 양방향으로 바인딩합니다. 한쪽 컨트롤의 속성이 변경되면 연결된 다른 쪽의 컨트롤도 같이 바뀝니다.

 

 

4) ElementName에 바인딩 할 컨트롤의 이름을 지정합니다. 엘리먼트 바인딩을 하려면 반드시 소스 컨트롤에 이름을 지정해야겠죠?

 

 

 

 

여기서 잠깐

위의 예만 본다면 이렇게 말하실 분도 있을 지 모르겠습니다. “코드로 하나 엘리먼트 바인딩으로 하나 그게 그거네~”

뭐, 혼자서 프로그램을 다 만드는 경우에는 별 차이가 없을 수도 있겠죠^^;

 엘리먼트 바인딩의 핵심은 너무나 뻔한 UI 처리 같은 것은 디자인 단에서 해버릴 수 있다는 겁니다. 쉽게 말하면 개발자의 일을 디자이너에게 떠넘길 수 있다는 겁니다.^^ 엘리먼트 바인딩을 이용하여 아주 단순한 UI 처리는 XAML에서 바로 해결함으로써 불필요한 코드를 줄일 수 있으며, 디자인과 로직을 분리하는 데에도 도움이 됩니다.

게다가, ValueConverter라는 것을 붙이면 엘리먼트 바인딩에 날개를 달아줄 수도 있습니다.


 

 

 

 

 

엘리먼트 바인딩의 실제 활용 예를 좀더 살펴보도록 하죠.

 

 

위의 예에서는 바인딩 모드가 OneWay였는데, TwoWay의 예를 보도록 합시다.

 

SliderNumericUpDown을 연결해보도록 하죠.

 

image_30.png

 

 

위 예제를 보시면 Slider와 NumericUpDown 컨트롤이 코드 한 줄 없이 완벽하게 연동되어 있음을 보실 수 있습니다.

 

NumericUpDown의 MinimumMaximun은 각각 Slider의 MinimumMaximum에 엘리먼트 바인딩되어 있으며, OneWay 바인딩으로 충분하기 때문에 바인딩 모드는 OneWay로 되어 있습니다. 만약, Minimum이나 Maximum을 변경해야 하는 경우가 생긴다면 Slider쪽만 바꾸면 NumericUpDown은 자동으로 바뀌게 되죠.

 

NumericUpDown의 Value는 Slider의 ValueTwoWay 모드로 바인딩되어 있습니다. TwoWay이기 때문에 NumericUpDown이나 Slider 어느 쪽의 Value가 바뀌더라도 다른 쪽도 같이 변경이 됩니다.

 

 

 

 

여기서 잠깐

NumericUpDown은 Silverlight Toolkit에 들어있는 컨트롤입니다. 따라서 Silverlight Toolkit을 설치해야 사용할 수 있으며, 아직 Silverlight 5 Beta용 버전이 없는 관계로 프로젝트를 빌드할 때 타겟 실버라이트 버전을 Silverlight 4로 지정해야 작동합니다.


 

 

 

 

엘리먼트 바인딩은 다음과 같이 상황에 따라서 특정 UI를 막을 때에도 유용합니다.

 

아래 샘플에서는 TextBox의 IsReadOnly와 Button의 IsEnabled 속성을 CheckBox의 IsChecked에 바인딩함으로써 CheckBox의 체크 여부에 따라서 사용자 입력을 차단하고 있습니다.

 

image_32.png

 

 

 

 

이 예에서 CheckBox를 체크하면 다음과 같이 TextBox와 Button이 사용 가능 상태로 바뀝니다.

 

image_34.png

 

 

 

 

 

 

ValueConverter 이용하기

 

실버라이트에서 엘리먼트 바인딩을 할 때 적용하기 애매한 경우가 있습니다. 예를 들어서, CheckBox를 체크했을 때 특정 컨트롤이 화면에 나타나게 하고 싶은데, 실버라이트의 컨트롤의 Visibility는 Boolean 타입이 아니라 열거형이라서 그대로는 바인딩이 안됩니다. 이럴 때 ValueConverter라는 것을 이용하면 가능합니다.

 

 

ValueConverter는 어떤 값을 다른 값으로 바꿔주는 역할을 합니다. 예를 들어서 Boolean 타입을 Visibility 열거형으로 바꾼다던지, 문자열로 된 색상값을 Color 개체로 바꾼다던지 하는 것들을 할 수 있죠. 심지어는 파라미터까지 받아서 바꿔주는 것도 가능합니다.

 

 

 

위의 CheckBox 엘리먼트 바인딩 예에서 CheckBox의 체크 여부에 따라서 관련 컨트롤들을 숨기거나 보이게 하기 위해 Boolean 타입을 Visibiliy 열거형으로 바꿔주는 BoolVisibilityConverter Class를 만듭니다.

 

    

using System;

using System.Windows.Data;

using System.Globalization;

namespace ElementBindingSample

{

    public class BoolVisibilityConverter: IValueConverter

    {

        public object  Convert(object value, Type targetType, object parameter, CultureInfo culture)

        {

            if ((bool) value == true)

            {

                return System.Windows.Visibility.Visible;

            }

            else

            {

                return System.Windows.Visibility.Collapsed;

            }

        }

        public object  ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)

        {

            if ((System.Windows.Visibility) value == System.Windows.Visibility.Visible)

            {

                return true;

            }

            else

            {

                return false;

            }

        }

    }

}


 

 

사용자 정의 ValueConverter를 만드려면 IValueConverter 인터페이스를 구현하면 됩니다. IValueConverter 인터페이스에는 ConvertConvertBack 2개의 메서드가 있는데, Convert만 구현하면 OneWay로만 사용할 수 있고, ConvertBack까지 구현하면 TwoWay로도 사용할 수 있습니다.

 

 

 

 

이렇게 정의한 ValueConverter를 XAML에서 사용하려면 XAML에 Resource로 등록해야 합니다.

 

다음과 같이 현재 어셈블리에 대한 네임스페이스를 정의한 후  BoolVisibilityConverter 타입의 리소스를 하나 등록합니다.

x:Key는 Resource Dictionary에 등록하기 위한 키입니다.

 

image_36.png

 

 

 

여기서 잠깐

XAML내에서 우리가 정의한 클래스를 사용하기 위해서는 반드시 Resource로 등록해야 합니다. 그런데 아쉽게 Visual Stuio와 Expression Blend 모두 IDE애서 몇 번의 클릭만으로 리소스로 등록해주는 기능이 없습니다. 따라서 ValueConverter를 사용해야 할 때는 위와 같이 직접 입력해줘야 합니다.


 

 

 

한꺼번에 관련 UI를 보이거나 숨기기 위해서 부모 StackPanel의 Visibility에 CheckBox의 IsChecked 속성을 바인딩했습니다.

 

image_38.png

 

 

 

 

 

CheckBox의 IsChecked 속성을 false로 설정하니 StackPanel이 화면에서 사라졌네요.

 

image_40.png

 

 

 

 

 

 

 

엘리먼트 바인딩은 WPF에는 원래 있었으나 실버라이트에서는 버전 4에서야 추가가 된 기능인데, 실제로 사용해보면 매우 유용합니다.  다음 강좌에서는 데이터 바인딩에 대해서 살펴보도록 하겠습니다.

 

Silverlight5 시리즈 강좌 리스트
[Silverlight5강좌] 1. 실버라이트, 어디에 쓰는 물건인가요?
[Silverlight5강좌] 2. 실버라이트로 Hello World 만들기
[Silverlight5강좌] 3. 레이아웃 시스템 이해하기 #1 - 레이아웃 시스템 개념 이해하기
[Silverlight5강좌] 4. 레이아웃 시스템 이해하기 #2 - 레이아웃 시스템의 꽃 Grid 살펴보기
[Silverlight5강좌] 5. 이것만은 꼭! - 간단한 Expression Blend 사용법
[Silverlight5강좌] 6. 유저 인터페이스를 만들어봅시다 - 기본 컨트롤 사용하기
[Silverlight5강좌] 7. 나에게 더 많은 컨트롤을 줘! - Silverlight Toolkit
[Silverlight5강좌] 8. 컨트롤 사이의 연결 고리 - Element Binding
[Silverlight5강좌] 9. 데이터 바인딩 #1 - DataContext
[Silverlight5강좌] 10. 좀더 깊은 곳으로 - 의존 속성(Dependency Property) 이해하기
[Silverlight5강좌] 11. 애니메이션 시스템 이해하기 #1 - Render Transform
[Silverlight5강좌] 12. 애니메이션 시스템 이해하기 #2 - Perspective 3D
[Silverlight5강좌] 13. 애니메이션 시스템 이해하기 #3 - Storyboard
[Silverlight5강좌] 14. 한 방에 편리하게 모양 바꾸기 - Style
[Silverlight5강좌] 15. 컨트롤 모양을 내 마음대로 - ControlTemplate
[Silverlight5강좌] 16. 나만의 컨트롤 만들기 - User Control
[Silverlight5강좌] 17. 실버라이트의 최고 장점! 미디어 제어하기 - MediaElement
[Silverlight5강좌] 18. 손쉽게 다중 페이지 UI 만들기 - Navigation Framework
[Silverlight5강좌] 19. 실버라이트로 데스크탑 응용 프로그램 만들기
[Silverlight5강좌] 20. 실버라이트 응용 프로그램 배포하기
 


Silverlight5 동영상 강좌 리스트

[Silverlight5 동영상 강좌] 2. 실버라이트로 Hello World 만들기
[Silverlight5 동영상 강좌] 3. 레이아웃 시스템 이해하기 #1 - 레이아웃 시스템 개념 이해하기
[Silverlight5 동영상 강좌] 4. 레이아웃 시스템 이해하기 #2 - 레이아웃 시스템의 꽃 Grid 살펴보기
[Silverlight5 동영상 강좌] 5. 이것만은 꼭! - 간단한 Expression Blend 사용법
[Silverlight5 동영상 강좌] 6. 유저 인터페이스를 만들어봅시다 - 기본 컨트롤 사용하기
[Silverlight5 동영상 강좌] 7. 나에게 더 많은 컨트롤을 줘! - Silverlight Toolkit
[Silverlight5 동영상 강좌] 8. 컨트롤 사이의 연결 고리 - Element Binding
[Silverlight5 동영상 강좌] 9. 데이터 바인딩 #1 - DataContext
[Silverlight5 동영상 강좌] 10. 좀더 깊은 곳으로 - 의존 속성(Dependency Property) 이해하기
[Silverlight5 동영상 강좌] 11. 애니메이션 시스템 이해하기 #1 - Render Transform
[Silverlight5 동영상 강좌] 12. 애니메이션 시스템 이해하기 #2 - Perspective 3D
[Silverlight5 동영상 강좌] 13. 애니메이션 시스템 이해하기 #3 - Storyboard
[Silverlight5 동영상 강좌] 14. 한 방에 편리하게 모양 바꾸기 - Style
[Silverlight5 동영상 강좌] 15. 컨트롤 모양을 내 마음대로 - ControlTemplate
[Silverlight5 동영상 강좌] 16. 나만의 컨트롤 만들기 - User Control
[Silverlight5 동영상 강좌] 17. 실버라이트의 최고 장점! 미디어 제어하기 - MediaElement
[Silverlight5 동영상 강좌] 18. 손쉽게 다중 페이지 UI 만들기 - Navigation Framework
[Silverlight5 동영상 강좌] 19. 실버라이트로 데스크탑 응용 프로그램 만들기
[Silverlight5 동영상 강좌] 20. 실버라이트 응용 프로그램 배포하기






profile