데이터 템플릿 만들기 또는 수정

데이터 템플릿은 데이터를 표시할 구조와 형식을 정의합니다. 자세한 내용은 데이터 처리 개요의 "데이터 템플릿" 단원을 참조하십시오. 실습 정보: RSS 뉴스 수집기 만들기에서 전체 예를 참조할 수 있습니다.

데이터 템플릿 만들기

1. 아트보드 또는 인터랙션 패널의 개체 및 타임라인에서 바인딩을 만들 개체를 클릭합니다. 데이터 원본의 데이터가 이 개체로 이동합니다.

2. 속성 패널에서 바인딩 대상으로 사용할 속성(데이터를 보유할 특정 속성) 옆에 있는 고급 속성 옵션 단추를 클릭합니다. 팝업 창에서 데이터 바인딩을 클릭합니다.

   데이터 바인딩 만들기 대화 상자가 열립니다.

   [!참고]

   선택한 속성이 데이터 템플릿을 지원해야 합니다. 그렇지 않으면 데이터 바인딩 만들기 대화 상자에 데이터 템플릿 정의 단추가 표시되지 않습니다. 항목 목록(항목 컨트롤의 ItemsSource 속성) 및 콘텐츠(Content 속성)를 나타내는 속성은 데이터 템플릿을 지원합니다.

3. 만들려는 데이터 바인딩의 형식에 따라 데이터 바인딩 만들기 대화 상자의 맨 위에 있는 탭 중 하나를 선택합니다. 이 탭에 대한 자세한 내용은 데이터 처리 개요의 "데이터 바인딩" 단원을 참조하십시오.

4. 다음 작업 중 하나를 수행하여 데이터 템플릿 정의 단추를 활성화합니다.

   • 데이터 필드 탭을 선택한 경우에는 데이터 원본을 선택한 다음 원하는 필드를 선택합니다. 데이터 원본이 없으면 데이터 원본 창 아래 있는 단추 중 하나를 클릭하여 만들어야 합니다. 데이터 원본 추가 또는 제거 또는 실습 정보: RSS 뉴스 수집기 만들기에서 예를 참조하십시오.

   • 요소 속성 탭을 선택한 경우에는 왼쪽에 표시되는 목록에서 요소를 선택한 다음 오른쪽에 표시되는 해당 요소의 속성 중 하나를 선택합니다.

   • 명시적 데이터 컨텍스트 탭을 선택한 경우에는 필드를 선택합니다. 표시된 필드가 없으면 데이터 필드 탭을 사용하거나, 이 개체 또는 계층 구조상 이 개체의 상위 개체에서 DataContext 속성을 먼저 정의해야 합니다. 자세한 내용은 속성 또는 요소에 데이터 바인딩 또는 실습 정보: RSS 뉴스 수집기 만들기를 참조하십시오.

5. 대화 상자의 아래쪽에 있는 데이터 템플릿 정의 단추를 클릭합니다. 데이터 템플릿 만들기 대화 상자가 열립니다.

6. 데이터 템플릿 만들기 대화 상자에는 다음과 같은 세 가지 옵션이 있습니다.

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

   • 현재 또는 미리 정의된 데이터 템플릿   드롭다운 상자에서 현재 데이터 템플릿 리소스나 미리 정의된 데이터 템플릿 리소스를 선택합니다. 컨트롤에 적합한 데이터 템플릿 리소스가 없는 경우에는 이 옵션을 사용할 수 없습니다.

   • 새 데이터 템플릿 및 표시 필드   이 옵션을 사용하면 템플릿에 있는 데이터 필드를 선택하고 각 데이터 필드에 지정할 컨트롤의 형식을 선택할 수 있습니다. 예를 들어 String 데이터 필드가 있는 경우 해당 필드를 표시하는 데 사용되는 기본 컨트롤은 TextBlock입니다. TextBlock 옆에 있는 드롭다운 화살표를 클릭하면 데이터 필드를 표시할 다른 컨트롤을 선택할 수 있습니다. 같은 방식으로, 최상위 항목에 대해 나열되는 컨트롤 옆의 드롭다운 화살표를 클릭하여 모든 필드를 둘러싸는 컨테이너 요소의 형식을 선택할 수 있습니다. 화살표 단추를 사용하여 데이터 필드를 표시할 순서를 지정합니다. 사용 중인 데이터 바인딩이 없으면 예제 데이터 생성 확인란을 선택하여 아트보드에서 예제 데이터를 사용하는 컨트롤을 보고 템플릿의 모양이 마음에 드는지 확인할 수 있습니다.

   미리 보기 창을 사용하여 템플릿의 모양이 마음에 드는지 확인합니다. 데이터 템플릿의 옵션을 모두 설정하고 나면 확인을 클릭합니다. 데이터가 템플릿이 적용된 개체로 아트보드에 표시됩니다.

맨 위로 이동

데이터 템플릿 수정

1. 인터랙션 패널의 개체 및 타임라인에서 개체를 마우스 오른쪽 단추로 클릭하고 다른 템플릿 편집, 생성된 항목 편집을 차례로 가리키고 템플릿 편집을 클릭합니다. 템플릿 편집 모드로 들어가고 개체 및 타임라인 아래 템플릿의 구조가 표시됩니다.

   [!참고]

   이미 데이터 템플릿을 만든 속성 옆에 있는 고급 속성 옵션 단추를 클릭하고 데이터 바인딩을 클릭한 다음 데이터 템플릿 정의 단추를 클릭하여 기존 데이터 템플릿을 수정하면 실제로 새 데이터 템플릿을 만들게 됩니다.

   템플릿 편집 모드로 들어가고 개체 및 타임라인 아래 데이터 템플릿의 구조가 표시됩니다. 이 편집 모드에서 템플릿에 컨트롤을 추가하고 속성 패널에서 데이터 바인딩을 사용하여 데이터 원본의 새 항목에 해당 컨트롤의 속성을 바인딩할 수 있습니다.

2. 자식 개체를 더 추가할 수 있도록 루트 패널 개체를 두 번 클릭하여 활성화합니다.

3. 도구 상자에서 템플릿에 추가할 컨트롤을 선택합니다. 예를 들어 표시하려는 다른 String 데이터 요소가 있는 경우 도구 상자에서 TextBlock 과 같은 텍스트 컨트롤을 선택한 다음 해당 컨트롤의 아이콘을 두 번 클릭하여 템플릿에 추가합니다.

4. 개체 및 타임라인에서 새 컨트롤을 선택하고 속성 패널에서 데이터를 바인딩할 속성을 찾습니다. TextBlock의 경우에는 Text 속성을 찾아야 합니다.

   [!참고]

   아트보드에 텍스트 컨트롤을 추가하면 해당 컨트롤의 편집 모드로 들어갑니다. 즉, 컨트롤에 직접 콘텐츠를 입력할 수 있지만 해당 컨트롤의 일부 속성에는 액세스하지 못하게 됩니다. 컨트롤의 편집 모드를 종료하려면 Esc 키를 누르거나 선택 도구를 클릭하십시오.

5. 선택한 속성 옆에 있는 고급 속성 옵션 단추를 클릭하고 데이터 바인딩을 클릭합니다.

   데이터 바인딩 만들기 대화 상자가 열립니다.

6. 속성을 바인딩할 데이터 항목을 선택하고 마침을 클릭합니다.

7. 템플릿의 편집 모드를 종료하려면 개체및 타임라인에서 상위 범위로 이동 단추를 클릭합니다.

맨 위로 이동