데이터 표시

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

데이터 원본

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

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

  자세한 내용은 라이브 XML 데이터 원본 사용을 참조하십시오.

  [!참고]

  Microsoft Silverlight는 XML 데이터 원본을 지원하지 않습니다. XML 데이터를 사용하는 방법에 대한 자세한 내용은 MSDN의 Parsing XML Data in Silverlight(Silverlight에서의 XML 데이터 구문 분석) 를 참조하십시오.

• 개체 데이터 원본 - 대상 속성을 바인딩할 수 있는 공용 속성이 들어 있는 개체입니다. WPF 응용 프로그램의 경우 데이터베이스의 데이터를 ObservableCollection으로 변환하는 Microsoft .NET Framework 클래스 라이브러리를 사용할 수 있습니다.

  자세한 내용은 개체 데이터 원본을 사용하여 데이터베이스에 연결 및 실습 정보: 예제 SQL 데이터베이스의 데이터 표시를 참조하거나 MSDN의 데이터 바인딩 개요 를 참조하십시오. Silverlight 응용 프로그램의 경우 자세한 내용은 MSDN의 Silverlight Data Binding(Silverlight 데이터 바인딩) 을 참조하십시오.

  [!참고]

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

• 예제 데이터 원본    데이터 패널의 예제 데이터 만들기 도구를 사용하여 만드는 로컬 파일 집합입니다. 아트보드에서는 외부 데이터를 볼 수 없기 때문에 Expression Blend에서는 응용 프로그램을 디자인하는 동안 사용할 수 있는 예제 데이터를 지원합니다.

  자세한 내용은 예제 데이터 만들기를 참조하십시오.

데이터 패널의 데이터 원본 목록

Expression Blend에서 사용 중인 문서에 연결된 데이터 원본은 데이터 패널의 이 문서 아래에 나열됩니다. 프로젝트의 모든 문서에서 사용할 수 있는 데이터 원본은 데이터 패널의 프로젝트 아래에 나열됩니다. 데이터 패널 위쪽의 단추를 사용하여 데이터 원본을 만들 수 있습니다. 데이터 항목을 아트보드로 끌어서 항목에 데이터 바인딩된 컨트롤을 만들 수 있습니다.

자세한 내용은 컨트롤에 데이터 표시를 참조하십시오.

데이터 바인딩

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

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

속성 패널의 속성과 연결된 고급 옵션 단추 를 사용하거나 데이터 패널의 항목을 아트보드로 끌어서 바인딩을 만들 수 있습니다.

자세한 내용은 개체를 데이터에 바인딩을 참조하십시오.

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

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

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

• 요소 속성   이 옵션을 사용하면 동일한 XAML(Extensible Application Markup Language) 파일에 있는 한 개체의 속성을 다른 개체의 속성에 바인딩할 수 있으며, 이는 이 항목의 앞부분에서 설명한 예에서 슬라이더 막대의 Value 속성에 사각형의 Width 속성을 바인딩하는 경우와 유사합니다. 이 바인딩을 만들려면 다음 작업 중 하나를 수행합니다.

  • 속성 패널에서 대상 속성(이 경우 사각형의 Width 속성)을 찾고 고급 옵션 을 클릭한 다음 데이터 바인딩을 클릭합니다. 요소 속성 탭을 클릭하고 왼쪽 창의 개체를 탐색하여 슬라이더 막대(원본 개체)를 찾은 다음 오른쪽 창의 속성 목록을 탐색하여 Value 속성을 찾아 선택합니다.

  • 속성 패널에서 대상 속성(이 경우 사각형의 Width 속성)을 찾고 고급 옵션 을 클릭한 다음 요소 속성 바인딩을 클릭합니다. 커서가 스포이트 아트보드 요소 선택 으로 변경됩니다. 아트보드에서 속성을 바인딩할 개체를 클릭합니다. 데이터 바인딩 만들기 드롭다운 상자에서 Value 속성을 선택합니다.

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

  또한 데이터 패널 아래쪽의 데이터 컨텍스트 범주에서 데이터 컨텍스트 정보를 액세스할 수 있습니다. 아트보드에서 선택한 개체가 데이터 바인딩된 개체인 경우 데이터 컨텍스트 범주에는 현재 선택이나 범위에 대해 데이터 컨텍스트 속성( DataContext ) 또는 디자인 타임 데이터 컨텍스트 속성( d:DataContext ) 중 하나가 표시됩니다.

  

  데이터 패널에서 목록 모드 및 세부 정보 모드 간을 전환하는 경우 데이터 컨텍스트 범주에 변경 내용이 표시됩니다. 또한 데이터 컨텍스트 범주에서 아트보드의 요소로 원하는 데이터를 직접 끌어 데이터 바인딩을 만들 수 있습니다.

  [!참고]

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

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

  실습 정보: 데이터 형식 변환에서 값 변환기에 대한 예를 참조하십시오.

데이터 흐름

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

• 기본값    기본 설정은 OneWay 입니다. 원본을 변경하면 대상이 자동으로 업데이트되지만 대상을 변경해도 원본은 업데이트되지 않습니다.

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

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

• OneWayToSource    대상을 변경하면 원본이 자동으로 업데이트되지만 원본을 변경해도 대상은 업데이트되지 않습니다. OneWay 와 상반되는 개념입니다. 대상 속성이 속성 패널에 표시되지 않는 특수한 경우(대상 속성이 종속성 속성이 아닌 경우 발생)에 유용한 구성입니다. 대신 OneWayToSource 바인딩을 사용하면 대상에 데이터 바인딩을 설정할 수 있습니다. Silverlight 프로젝트에서는 이 옵션을 사용할 수 없습니다.

• OneTime    변경이 적용되지 않습니다. 응용 프로그램이 초기화될 때 대상이 원본 값으로 설정됩니다. 이후에는 대상이 업데이트되지 않습니다.

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

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

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

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

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

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

이 시나리오를 보여 주는 절차는 개체를 사용자 입력 값 또는 기타 내부 값에 바인딩을 참조하십시오.

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

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

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

• 기존 컨트롤 바인딩    컨트롤이 문서에 이미 있는 경우 데이터 패널의 데이터 노드를 컨트롤로 끌어 컨트롤을 데이터에 바인딩할 수 있습니다. 데이터 노드를 끌면 데이터가 바인딩되는 속성이 어떤 것인지 알려주는 메시지가 나타납니다.

  

  Shift 키를 누른 상태에서 마우스 단추를 놓으면 다른 속성을 지정할 수 있습니다.

  

• 새 컨트롤 만들기     데이터 노드를 데이터 패널에서 문서로 끕니다. 이 옵션을 선택하면 문서에 새 컨트롤이 삽입됩니다.

자세한 내용은 다음 항목을 참조하십시오.

• 개체를 데이터에 바인딩

• 목록 세부 데이터 바인딩 만들기

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

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

자세한 내용은 개체를 사용자 입력 값 또는 기타 내부 값에 바인딩을 참조하십시오.

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

데이터 템플릿

데이터 원본의 항목 목록을 표시해야 할 경우가 있습니다. 항목 목록이 포함된 데이터 항목은 항목 이름에 추가된 "(배열)"로 식별할 수 있습니다. 데이터 패널에서 DataGrid 컨트롤로 목록 노드를 끌면 수정 가능한 템플릿의 개체에 데이터가 표시됩니다.

데이터 템플릿을 수정하는 예는 다음 항목을 참조하십시오.

• 데이터를 표시하는 컨트롤의 스타일 지정

• DataGrid 컨트롤 사용

• TreeView 컨트롤 사용

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

데이터 동작

아트보드로 속성을 끌어 기존 개체에 바인딩하거나, 새 바운드 개체를 만들거나, 디자인 타임 데이터 컨텍스트를 설정할 수 있을 뿐 아니라 데이터 패널에서 아트보드의 개체로 명령 및 메서드를 끌어 올 수도 있습니다.

개체로 명령을 끌어 올 경우 Expression Blend에는 명령을 호출할 InvokeCommandAction 액션이 만들어집니다. 그런 다음 개체가 속성 패널에서 명령을 트리거하는 방식을 구성할 수 있습니다. 마찬가지로, 아트보드로 메서드를 끌어 올 경우 Expression Blend에는 동일한 방식으로 구성할 수 있는 CallMethodAction 액션이 만들어집니다.

InvokeCommandAction 및 CallMethodAction 에 대한 자세한 내용은 InvokeCommandAction 및 CallMethodAction을 참조하십시오.

참조 항목

개념

개체 스타일 지정
개체 정렬

Copyright ⓒ 2011 by Microsoft Corporation. All rights reserved.