개체를 데이터에 바인딩
데이터는 아트보드의 개체에 데이터 항목을 바인딩하여 표시됩니다.
데이터 바인딩은 두 부분으로 구성됩니다.
데이터 컨텍스트 데이터 컨텍스트는 데이터를 가져올 데이터 소스를 나타냅니다. 데이터 컨텍스트는 상속되므로 데이터 컨텍스트를 부모 개체에 지정하여 모든 자식 개체가 동일한 데이터에 액세스할 수 있도록 만들 수 있습니다. 따라서 여러 개체를 동일한 데이터 소스의 데이터에 바인딩하거나 목록 세부 정보 디자인을 만들 때 편리합니다.
자세한 내용은 목록 세부 데이터 바인딩 만들기을 참조하십시오.
속성 바인딩 속성 바인딩은 속성이 바인딩되는 데이터의 특정 항목을 나타냅니다. 예를 들어 TextBlock 개체의 Text 속성을 데이터 소스의 문자열 항목에 바인딩하거나 ListBox의 ItemsSource 속성을 데이터 소스의 컬렉션에 바인딩할 수 있습니다. 속성 바인딩은 데이터 컨텍스트와 같은 개체에 없을 수 있지만 데이터 컨텍스트가 트리에서 상위에 있는 개체에 설정된 경우라면 작동됩니다.
데이터 바인딩을 만들려면 데이터 패널에서 데이터 항목을 끌거나 속성 패널을 사용하여 수동으로 데이터 바인딩을 만들어 데이터 컨텍스트 및 속성 바인딩을 설정할 수 있습니다.
데이터 패널에서 항목을 끌어 데이터 바인딩
데이터 패널에서 다음 작업 중 하나를 수행합니다.
목록 모드
.png "JJ170055.9ad55afc-08ac-4f9a-ab3a-d55d0cf184d3(ko-kr,VS.120).png")
를 클릭하여 ListBox,DataGrid,TreeView,ComboBox 등과 같은 항목 컨트롤에 데이터를 표시합니다. 목록 모드는 컬렉션으로 목록을 만들 때 사용합니다.세부 정보 모드
.png "JJ170055.7786ee28-da1d-41b2-93fd-b4caeb75ab98(ko-kr,VS.120).png")
를 클릭하여 하나의 컬렉션에 레코드 하나의 데이터를 표시하거나 하나의 데이터 항목을 표시합니다.
데이터 패널에서 하나 또는 여러 데이터 항목을 선택한 다음 아트보드로 끕니다. 선택 항목을 아트보드의 빈 영역이나 기존 개체로 끕니다.
Blend for Visual Studio는 끌어 오는 데이터의 형식에 따라 수행할 액션을 결정합니다. 다음은 Blend에서 데이터 선택을 인식하는 방법을 나타낸 표입니다.
작업
목록 모드의 경우
세부 정보 모드의 경우
컬렉션 또는 컬렉션의 항목을 아트보드의 빈 영역으로 끕니다.
행별로 하나의 레코드인 데이터를 표시하기 위해 ListBox 개체가 만들어집니다. ListBox의 ItemsSource 속성이 컬렉션의 이름으로 설정됩니다. DataContext 속성이 부모 레이아웃 패널에 설정됩니다.
예제를 보려면 목록 세부 데이터 바인딩 만들기를 참조하십시오.
데이터 컬렉션의 단일 레코드에 대해 선택한 모든 항목을 표시하기 위해 개체들이 만들어집니다.
목록 모드 중 같은 컬렉션에서 항목을 끈 후에 이렇게 한 경우 목록 세부 정보 관계가 자동으로 설정됩니다.
자세한 내용은 목록 세부 데이터 바인딩 만들기을 참조하십시오.
목록 모드 중일 때 바인딩을 만들지 않은 경우 컬렉션의 첫 번째 레코드의 데이터만 표시됩니다.
계층 구조 컬렉션 또는 계층 구조 컬렉션의 항목을 아트보드의 빈 영역으로 끕니다.
행별로 하나의 레코드인 데이터를 표시하기 위해 TreeView 개체가 만들어집니다. TreeView의 ItemsSource 속성이 컬렉션의 이름으로 설정됩니다. DataContext 속성이 부모 레이아웃 패널에 설정됩니다.
예제를 보려면 TreeView 컨트롤 사용를 참조하십시오.
데이터 컬렉션의 단일 레코드에 대해 선택한 모든 항목을 표시하기 위해 개체들이 만들어집니다.
목록 모드 중 같은 컬렉션에서 항목을 끈 후에 이렇게 한 경우 목록 세부 정보 관계가 자동으로 설정됩니다.
자세한 내용은 목록 세부 데이터 바인딩 만들기을 참조하십시오.
목록 모드 중일 때 바인딩을 만들지 않은 경우 컬렉션의 첫 번째 레코드의 데이터만 표시됩니다.
컬렉션 또는 컬렉션의 항목을 ListBox, DataGrid, TreeView, ComboBox 등과 같은 기존 항목 컨트롤로 끕니다.
항목 컨트롤은 행별로 하나의 레코드인 데이터를 표시합니다. 항목 컨트롤의 ItemsSource 속성이 컬렉션의 이름으로 설정됩니다. DataContext 속성이 부모 레이아웃 패널에 설정됩니다.
예제를 보려면 DataGrid 컨트롤 사용를 참조하십시오.
데이터 컬렉션의 단일 레코드에 대해 선택한 모든 항목을 표시하기 위해 개체들이 만들어집니다.
목록 모드 중 같은 컬렉션에서 항목을 끈 후에 이렇게 한 경우 목록 세부 정보 관계가 자동으로 설정됩니다.
자세한 내용은 목록 세부 데이터 바인딩 만들기을 참조하십시오.
목록 모드 중일 때 바인딩을 만들지 않은 경우 컬렉션의 첫 번째 레코드의 데이터만 표시됩니다.
컬렉션에 없는 단일 데이터 항목을 아트보드의 빈 영역으로 끕니다.
데이터를 표시하기 위해 개체가 만들어집니다. 예를 들어 데이터가 문자열이거나 숫자이면 TextBlock이 만들어집니다. 데이터가 Boolean 값이면 CheckBox가 만들어집니다. 데이터가 이미지 파일의 패스이면 Image 개체에 이미지가 표시됩니다.
목록 모드와 동일합니다.
컬렉션에 없는 단일 데이터 항목을 기존 개체로 끕니다.
Blend는 데이터가 바운딩되어야 하는 개체의 속성을 결정하려고 합니다. 예를 들어 데이터가 문자열이거나 숫자이면 Content 또는 Text 속성으로 바인딩됩니다. 데이터가 Boolean 값이면 IsEnabled나 IsChecked 또는 다른 Boolean 속성으로 바인딩됩니다. 데이터가 이미지 파일의 패스이면 Source 속성에 바인딩됩니다.
적절한 속성을 찾을 수 없으면 Create Data Binding 대화 상자가 나타납니다. 데이터 바인딩 만들기 대화 상자의 속성 드롭다운 목록에서 데이터를 바인딩할 속성을 선택할 수 있습니다. 예를 들어 데이터가 색을 16진수 값으로 나타내는 문자열인 경우 Shift 키를 누른 채 데이터 항목을 문서의 루트 개체로 끌 수 있으며 데이터 바인딩 만들기 대화 상자의 Background 속성을 선택하여 문서의 배경색을 변경할 수 있습니다.
목록 모드와 동일합니다.
속성 패널을 사용하여 데이터 바인딩
개체 및 타임라인 패널에서 표시에 사용할 개체 또는 데이터를 바인딩할 개체를 선택하거나, 부모 레이아웃 패널과 같이 트리에서 상위에 있는 개체를 선택합니다.
이 개체가 데이터 컨텍스트를 설정할 개체입니다.
팁
개체 및 타임라인 패널에서 개체를 마우스 오른쪽 단추로 클릭할 수도 있습니다.요소가 콘텐츠 컨트롤이면 데이터에 콘텐츠 데이터 바인딩을 선택합니다.요소가 항목 컨트롤이면 데이터에 ItemsSource 데이터 바인딩을 선택합니다.이 팁을 수행한 경우 계속하려면 3단계로 건너뜁니다.
속성 패널의 DataContext 속성 옆에 있는 고급 옵션
.png "JJ170055.12e06962-5d8a-480d-a837-e06b84c545bb(ko-kr,VS.120).png")
을 클릭한 다음 데이터 바인딩을 클릭합니다.데이터 바인딩 만들기 대화 상자에서 데이터 필드 탭을 클릭합니다.
데이터 소스에서 데이터를 바인딩할 데이터 소스를 선택합니다.
확인을 클릭하여 데이터 바인딩 만들기 대화 상자를 닫습니다.
이제 이 개체나 자식 개체의 속성을 선택한 데이터 소스의 데이터 항목에 바인딩할 수 있습니다.
표시에 사용하거나 데이터를 바인딩할 개체를 선택합니다.
속성 패널에서 데이터에 바인딩할 속성을 찾습니다. 속성의 형식은 바인딩할 데이터 항목의 형식과 일치해야 합니다. 예를 들어 컬렉션 내의 데이터 항목을 바인딩하려면 ListBox, DataGrid, TreeView, ComboBox 등과 같은 항목 컨트롤에서 사용 가능한 ItemsSource 속성을 선택합니다. 문자열이나 숫자 데이터 항목을 바인딩하려면 string 속성을 선택합니다.
속성 옆에 있는 고급 옵션
을 클릭한 다음 데이터 바인딩 을 클릭합니다.데이터 바인딩 만들기 대화 상자에서 명시적 데이터 컨텍스트 탭을 클릭합니다.
필드에서 속성을 바인딩할 데이터 항목을 선택합니다.
팁
형식이 일치하는 데이터 항목만 표시됩니다.모든 항목을 표시하려면 표시 드롭다운 목록에서 모든 속성을 선택합니다.
또한 데이터 바인딩 만들기 대화 상자에서 다른 필드를 설정할 수도 있습니다. 예를 들어, 데이터 형식이 속성 형식과 일치 하지 않는 경우 값 변환기를 선택 해야 합니다. Blend는 데이터를 변환하려고 하지만, 변환이 이루어질 수 없는 경우에는 데이터가 표시 되지 않습니다. 이런 경우 값 변환기를 만들고 데이터 바인딩 만들기 대화 상자에서 이 변환기를 선택해야 합니다.
자세한 내용은 실습 정보: 데이터 형식 변환을 참조하십시오.
확인을 클릭하여 데이터 바인딩 만들기 대화 상자를 닫습니다.
예제 데이터를 사용하는 경우 데이터는 아트보드에 표시됩니다. 라이브 데이터를 사용하는 경우 F5 키를 누르면 데이터를 볼 수 있습니다.
팁
같은 데이터를 두 개 이상의 개체에 바인딩할 수 있습니다.목록에서 선택하는 항목의 세부 정보를 표시하기 위해 하나의 개체가 업데이트되는 목록 세부 정보 디자인을 설정할 수도 있습니다.
자세한 내용은 목록 세부 데이터 바인딩 만들기을 참조하십시오.