데이터 처리 개요

데이터는 모든 사용자 인터페이스에서 핵심적인 역할을 하는 요소입니다. 일반적으로 사용자 인터페이스를 사용하면, 호텔 예약에서 주식 시장 시각화에 이르기까지 매우 다양한 데이터 내용을 불문하고 일정 형태의 데이터를 시각화하여 상호 작용할 수 있습니다. 사용자 인터페이스 구성 요소를 선택하고 유용한 워크플로를 구현하도록 해당 구성 요소를 배치하는 방식을 선택하는 데는 사용할 데이터의 특성이 상당한 영향을 미칩니다.

데이터 원본

사용자가 양식에 입력한 특정 숫자를 이용하여 계산을 수행하는 경우처럼, 응용 프로그램에서 내부 데이터 원본만 사용할 수 있습니다. 직접 만들어 사용하는 여타의 응용 프로그램에서는 데이터베이스, 웹 피드, 웹 서비스, 정보가 들어 있는 로컬 파일 등의 외부 데이터 원본에 액세스해야 할 경우가 있습니다. 경우에 따라서는 응용 프로그램에서 내부 데이터 원본과 외부 데이터 원본에 모두 액세스해야 할 수 있습니다. Microsoft Expression Blend는 현재 XML 개체와 CLR 개체라는 두 가지 형식의 외부 데이터 원본을 지원합니다.

• XML 데이터 원본 - 응용 프로그램에 XML 형식의 데이터를 제공할 수 있는 로컬 또는 원격 XML 파일입니다. 프로젝트에 추가한 XML 파일을 사용하거나 웹 사이트에 있는 XML 파일의 URL로 데이터 원본을 설정할 수 있습니다.

  [!참고]

  Silverlight 2에서는 XML 데이터 원본을 사용할 수 없습니다. 그러나 MSDN의 Silverlight에서 XML 데이터 구문 분석에서 XML 데이터 작업에 대한 자세한 내용을 찾을 수 있습니다.

• CLR(공용 언어 런타임) 개체 데이터 원본 - 대상 속성을 바인딩할 수 있는 공용 속성, 하위 속성 및 인덱서가 들어 있는 개체입니다. WPF 응용 프로그램의 경우 데이터베이스의 데이터를 ObservableCollection으로 변환하는 Microsoft .NET Framework 클래스 라이브러리를 사용할 수 있습니다. 자세한 내용은 실습 정보: CLR 개체 데이터 원본 만들기를 참조하거나, MSDN에서 데이터 바인딩 개요 항목을 참조하십시오. Silverlight 2 응용 프로그램의 경우 MSDN의 Silverlight 2 데이터 바인딩을 참조하십시오.

  [!참고]

  Microsoft Expression Blend는 생성자에 매개 변수가 들어 있는 CLR 개체 데이터 원본 클래스를 지원하지 않습니다.

Expression Blend에서 연 WPF 프로젝트의 프로젝트 패널에 있는 데이터 원본 목록

Expression Blend에서 사용 중인 문서에 연결된 외부 데이터 원본은 프로젝트 패널의 데이터 아래 나열됩니다. 단추 을 사용하여 데이터 원본을 추가하고 제거하며 데이터 항목 를 아트보드로 끌어 해당 항목에 데이터 바인딩된 컨트롤을 만들 수 있습니다. 설정된 데이터 원본이 없는 경우 프로젝트 패널의 데이터에는 데이터 원본을 만드는 데 사용되는 단추만 표시됩니다.

맨 위로 이동

데이터 바인딩

데이터 바인딩은 데이터 원본의 항목을 사용자 인터페이스 구성 요소(컨트롤)에 연결하는 프로세스입니다. 즉, 데이터가 변경될 때마다 인터페이스 구성 요소에 해당 변경 내용이 선택적으로 반영되며 그 반대로도 적용됩니다. 데이터 바인딩의 가장 간단한 예는 사각형의 너비에 내부적으로 바인딩되는 슬라이더 막대 컨트롤입니다. 슬라이더 막대를 이동하면 사각형의 비율 크기가 더 커지거나 작아집니다.

Expression Blend는 응용 프로그램의 요소를 다양한 데이터 원본에 바인딩하며, 데이터를 표시하고 수정하는 요소를 구성하는 간단하면서도 일관된 방법을 제공합니다. 바인딩은 기본적으로 원본과 대상 간에 이루어집니다. 일반적으로 원본은 데이터 원본이나 다른 컨트롤이고 대상은 컨트롤입니다. 슬라이더 막대 예에서 원본은 슬라이더 막대 컨트롤의 Value 속성이고 대상은 사각형의 Width 속성입니다.

속성 패널의 속성과 연결된 고급 속성 옵션 단추를 사용하거나 프로젝트 패널의 데이터 아래에서 항목을 아트보드로 끌어 바인딩을 만들 수 있습니다. 자세한 내용은 속성 또는 요소에 데이터 바인딩을 참조하십시오. 두 경우 모두 데이터 바인딩 만들기 대화 상자가 열려 컨트롤(대상)과 데이터 필드나 다른 컨트롤(원본) 간에 바인딩 연결을 만들 수 있습니다.

고급 옵션 섹션이 확장된 데이터 바인딩 만들기 대화 상자

데이터 바인딩 만들기 대화 상자에서는 데이터 원본을 선택할 수 있는 다음과 같은 세 가지 기본 옵션과 고급 옵션이 제공됩니다.

• 데이터 필드 - 이 옵션에는 프로젝트 및 해당 프로젝트에 연결된 필드에 만들어진 XML 및 CLR 개체 데이터 원본이 표시됩니다. 새 XML 데이터 원본 또는 CLR 개체 데이터 원본을 추가하거나 이미 만들어진 기존 연결을 사용할 수 있습니다. 바인딩할 필드를 선택하려면 데이터 원본에서 항목을 선택한 다음 필드에서 데이터 항목을 선택합니다. 적용할 수 있는 값 변환기가 없는 경우 데이터 항목의 형식은 바인딩될 속성의 형식과 일치해야 합니다. 이 항목의 뒷부분에 나오는 "고급 옵션"을 참조하십시오. 데이터 바인딩을 만든 다음에는 대상의 속성 값이 데이터 항목으로 채워집니다.

• 요소 속성 - 이 옵션을 사용하면 선택한 요소의 속성을 같은 XAML(eXtensible Application Markup Language) 파일에 있는 다른 요소의 속성에 바인딩할 수 있으며, 이 항목의 앞부분에서 설명한 예에서 슬라이더 막대의 Value 속성에 사각형의 Width 속성을 바인딩하는 경우와 유사합니다. 이러한 바인딩을 만들려면 속성 패널에서 대상 속성(이 경우 사각형의 Width 속성)을 찾고 고급 속성 옵션  단추를 클릭한 다음 데이터 바인딩을 클릭합니다. 요소 속성 탭을 클릭하고 왼쪽 창의 요소를 탐색하여 슬라이더 막대(원본 요소)를 찾은 다음 오른쪽 창의 속성 목록을 탐색하여 Value 속성을 찾습니다.

  [!참고]

  Silverlight 2에서는 요소 간 바인딩을 사용할 수 없습니다.

• 명시적 데이터 컨텍스트 - 이 옵션을 사용하면 현재 요소 또는 부모 요소 중 하나에 지정되는 컨텍스트 내의 데이터 원본에 바인딩할 수 있습니다. 데이터 컨텍스트를 이용하면, 데이터 바인딩된 모든 속성이 공용 원본을 상속하는 범위를 설정하여 여러 컨트롤 간에 간편하게 데이터를 공유할 수 있습니다. 예를 들어 ListBox 개체와 TextBlock 개체가 들어 있는 모눈 개체에 데이터 컨텍스트를 지정하고 동일한 컨텍스트 내에 있는 다른 데이터 항목에 두 개체의 속성을 바인딩할 수 있습니다. 이 방법은 목록(마스터 창)의 항목을 클릭하면 해당 항목에 대한 정보가 다른 개체(세부 정보 창)에 나타나는 마스터 세부 정보 디자인을 만들려는 경우에 유용합니다. 명시적 데이터 컨텍스트 탭의 필드 창에는 상속된 데이터 컨텍스트에서 사용할 수 있는 데이터 연결 필드 목록이 표시되며, 여기에서 대상 속성에 적합한 필드를 선택할 수 있습니다.

  [!참고]

  위에서 설명한 세 가지 옵션에서 모두 데이터 바인딩에 사용자 지정 경로 또는 XPath(XML 경로 언어) 식을 사용하도록 선택할 수 있습니다. XPath는 필드에서 선택하는 항목의 경로를 사용하여 자동으로 채워집니다. 그러나 XML 데이터에서 배열의 한 항목 같이 원하는 특정 노드를 식별하는 등의 방식으로 경로에 추가하면 데이터 원본에서 가져오는 데이터의 범위를 좁힐 수 있습니다. XPath를 사용하는 방법에 대한 자세한 내용은 MSDN에서 XPath 구문 및 방법: XMLData Provider 및 XPath 쿼리를 사용하여 XML 데이터에 바인딩 항목을 참조하십시오.

• 고급 옵션 - 대화 상자에서 아래쪽 확장기 를 클릭하여 액세스할 수 있는 고급 섹션에서는 데이터 흐름의 방향(아래의 데이터 흐름 참조), 대상 속성의 기본값, 값 변환기 및 변환기 매개 변수와 같은 고급 옵션을 설정할 수 있습니다. 값 변환기는 값의 형식을 변환하는 데 사용되는 .NET Framework 클래스 메서드이며 원본과 대상 속성의 형식이 일치하지 않을 때 필요합니다. 값 변환기 상자 옆에 있는 "…" 단추를 클릭한 다음 값 변환기 추가 대화 상자에서 값 변환기를 선택하여 추가할 수 있습니다. 변환기 매개 변수를 지정할 수도 있습니다. 예를 들어 double에서 decimal로 변환하려면 소수점 다음에 표시할 자릿수에 대한 값을 지정해야 할 수 있습니다. 실습 정보: 값 변환기 만들기 및 적용에서 값 변환기에 대한 예를 참조하십시오.

맨 위로 이동

데이터 흐름

데이터 흐름은 원본과 대상 간에 데이터가 흐르는 방향으로 정의됩니다. 사각형의 크기를 조정하는 슬라이더 막대의 경우 슬라이더 막대(원본)에서 사각형(대상)으로 연결되는 단방향 바인딩만 필요합니다. 데이터 흐름에 다음과 같은 바인딩 구성을 사용할 수 있습니다.

• Default - TwoWay 데이터 흐름과 동일합니다.

• OneWay - 원본을 변경하면 대상이 자동으로 업데이트되지만 대상을 변경하면 원본이 업데이트되지 않습니다.

• TwoWay - 원본을 변경하면 대상이 자동으로 업데이트되고 반대의 경우도 마찬가지입니다.

• OneWayToSource - OneWay와 반대되는 구성으로, 대상을 변경하면 원본이 자동으로 업데이트됩니다. 대상 속성이 속성 패널에 표시되지 않는 특수한 경우(대상 속성이 종속성 속성이 아닌 경우)에 유용한 구성입니다. OneWayToSource 바인딩을 사용하면 대상에 데이터 바인딩을 설정할 수 있습니다.

• OneTime - 원본에서 대상으로 초기화가 한 번 수행되지만 이후에는 원본을 변경해도 대상이 업데이트되지 않습니다.

데이터 흐름을 실제로 확인하기 위해, Slider 컨트롤(원본)과 TextBox 컨트롤(대상)이 들어 있는 다음과 같은 사용자 인터페이스 예를 가정해 보겠습니다.

바인딩 형식을 통해 데이터 흐름 표시

위의 그림에서 바인딩은 다음과 같은 절차를 사용하여 텍스트 상자(대상)에 설정됩니다.

1. 속성 패널의 공용 속성 아래에서 TextBox의 Text 속성과 연결된 고급 속성 옵션  단추를 클릭한 다음 데이터 바인딩을 클릭합니다.

2. 데이터 바인딩 만들기 대화 상자가 나타나면 요소 속성 탭에서 Slider 노드의 Value 속성을 선택합니다.

다음 표에서 바인딩 형식에 따라 달라지는 이 예의 바인딩 동작에 대해 설명합니다.

맨 위로 이동

외부 데이터 원본에 바인딩하는 방법

워크플로 1: 원본에서 대상으로 바인딩

외부 데이터 원본을 만든 다음에는 사용자 인터페이스 컨트롤에 해당 데이터 원본을 바인딩할 수 있습니다. 다음과 같은 두 가지 방법으로 바인딩을 수행할 수 있습니다.

• 기존 컨트롤에 바인딩   문서에 컨트롤이 이미 있으면 프로젝트 패널의 데이터 아래에서 데이터 노드를 컨트롤로 끈 다음 기존 컨트롤에 바인딩 아래에 표시되는 목록에서 컨트롤 이름(control에 property 바인딩)을 선택하여 데이터에 바인딩할 수 있습니다.

• 새 컨트롤 만들기   또는 프로젝트 패널의 데이터 아래에서 문서로 데이터 노드를 끈 다음 이 데이터 필드를 나타낼 컨트롤 선택 섹션 아래에 나타나는 목록에서 컨트롤을 선택할 수 있습니다. 이 옵션을 선택하면 문서에 새 컨트롤이 삽입됩니다.

기존 컨트롤을 바인딩할지 새 컨트롤을 만들지에 관계없이 데이터 바인딩 만들기 대화 상자가 열리므로 데이터 원본에 바인딩할 필드를 선택할 수 있습니다. 예를 들어 문자열인 데이터 항목을 TextBox로 끌어 바인딩을 만들면 이 노드의 Text 필드(기본적으로 선택되어 있음)에 바인딩할 수 있습니다. 대화 상자에서 확장기 를 클릭하여 추가 바인딩 설정을 지정할 수도 있습니다. 확인을 클릭하여 대화 상자를 닫고 바인딩을 만듭니다. 디자인 타임에 데이터를 사용할 수 있으면 선택한 필드의 값으로 컨트롤이 업데이트됩니다. 자세한 내용은 속성 또는 요소에 데이터 바인딩을 참조하십시오.

데이터 항목이 항목의 컬렉션(배열)이거나 데이터 항목이 대상 형식과 정확히 일치하지 않는 경우 데이터 템플릿 만들기 대화 상자가 열리므로 데이터를 표시할 특정 컨트롤을 선택할 수 있습니다. 자세한 내용은 이 항목의 뒷부분에서 데이터 템플릿을 참조하십시오.

워크플로 2: 대상에서 원본으로 바인딩

위에서 설명한 워크플로는 항상 데이터 원본에서 시작하여 대상 컨트롤에서 끝나지만 컨트롤을 이미 만든 경우 데이터 원본 또는 다른 컨트롤의 속성에 바인딩하려는 속성을 알고 있으면 이 프로세스를 반대로 실행할 수 있습니다. 이 워크플로는 요소 간 바인딩에 특히 유용합니다.

속성 패널의 각 속성 값 편집기 옆에는 데이터 바인딩을 비롯한 고급 속성 옵션을 설정할 수 있는 고급 속성 옵션  단추가 있습니다. 고급 옵션 메뉴에서 데이터 바인딩을 클릭하면 위 워크플로 1에서 설명한 것과 동일한 데이터 바인딩 만들기 대화 상자가 열립니다.

맨 위로 이동

데이터 템플릿

종종 데이터 원본의 항목 목록을 표시해야 하는 경우가 생깁니다. 항목 목록이 포함된 데이터 항목은 항목 이름에 추가된 "(배열)"로 식별할 수 있습니다. 프로젝트 패널의 데이터에서 문서로 목록 노드를 끌고 바인딩할 컨트롤을 선택할 수 있는 목록에서 ListBox를 선택하면 데이터 템플릿을 디자인할 수 있는 데이터 템플릿 만들기 대화 상자가 추가로 표시됩니다. 이 대화 상자는 문자열인 데이터 항목에 텍스트 컨트롤을 바인딩할 때도 열립니다.

데이터 템플릿은 데이터를 표시할 구조와 형식을 정의합니다. 예를 들어 데이터 원본의 연락처 노드 목록에 ListBox 컨트롤의 ItemsSource 필드를 바인딩하려는 경우 데이터 템플릿을 사용하면 이 목록에서 포함할 필드 및 각 필드에 할당할 컨트롤을 지정할 수 있습니다. 이름을 TextBlock으로 나타내거나, 그림을 Image로 나타내거나, IsCurrentMember와 같은 Boolean 필드를 CheckBox로 나타낼 수 있습니다. 데이터 템플릿을 만들면 연결 노드의 데이터가 원하는 표시 형식으로 변환됩니다. 템플릿을 사용하면 임의 데이터가 컨트롤에 표시되는 방식을 보다 세부적으로 제어할 수 있습니다.

[!참고]

Content 및 ItemsSource 속성만 데이터 템플릿을 지원합니다.

데이터 템플릿 만들기 대화 상자에는 다음 중 하나를 수행할 수 있는 옵션이 있습니다.

• 컨트롤의 기본 스타일을 사용합니다. 항목 목록에 바인딩하는 경우 기본 스타일은 대부분 일련의 텍스트 상자입니다. 자세한 내용은 MSDN에서 데이터 템플릿 개요를 참조하십시오. 컨트롤에 기본 템플릿이 없는 경우에는 이 옵션을 사용할 수 없습니다.

• 프로젝트의 현재 데이터 템플릿이나 미리 정의된 데이터 템플릿을 사용합니다. 컨트롤에 적합한 데이터 템플릿 리소스가 없는 경우에는 이 옵션을 사용할 수 없습니다.

• 새 데이터 템플릿을 지정하고 필드를 표시합니다. 이 옵션을 사용하면 템플릿에 포함할 데이터 필드를 선택하고 각 데이터 필드에 할당할 컨트롤의 형식을 선택할 수 있습니다. 또한 최상위 항목에 대해 나열되는 컨트롤 옆의 드롭다운 화살표를 클릭하여 모든 필드 주위에서 래핑되는 컨테이너 요소의 형식을 선택할 수 있습니다. 아래의 그림 예에서 item 옆에 있는 StackPanel의 드롭다운 화살표를 클릭한 다음 Grid를 선택하면 데이터 템플릿에서 StackPanel 대신 Grid를 항목의 컨테이너로 사용합니다. 화살표 단추를 사용하여 데이터 필드를 표시할 순서를 지정합니다. 사용 중인 데이터 바인딩이 없으면 예제 데이터 생성 확인란을 선택하여 아트보드에서 예제 데이터를 사용하는 컨트롤을 보고 템플릿의 모양이 마음에 드는지 확인할 수 있습니다.

미리 보기 창을 사용하여 템플릿의 모양이 마음에 드는지 확인합니다.

데이터 템플릿 만들기 대화 상자

데이터 템플릿은 리소스로 저장됩니다. 기존 데이터 템플릿을 수정하려면 리소스 패널의 데이터 템플릿 옆에 있는 리소스 편집 단추를 클릭할 수 있습니다. Expression Blend에서 템플릿 편집 모드가 시작되고 개체 및 타임라인 아래에 템플릿의 구조가 표시됩니다. 이 편집 모드에서 템플릿에 컨트롤을 추가하고 속성 패널에서 데이터 바인딩을 사용하여 데이터 원본의 새 항목에 해당 컨트롤의 속성을 바인딩할 수 있습니다.

맨 위로 이동