연습: WPF Designer에서 샘플 데이터 사용

아티클
08/10/2011

이 연습에서는 WPF Designer for Visual Studio의 샘플 데이터를 사용하여 디자인 타임에 데이터 바인딩을 만드는 방법을 보여 줍니다. 디자인 타임에 표시되는 샘플 데이터를 사용하여 런타임에 레이아웃이 올바르게 동작하도록 할 수 있습니다. 디자이너의 컨트롤에서 샘플 데이터에 액세스할 수 있도록 하려면 샘플 데이터 파일에 DesignData 빌드 작업을 적용하고 DesignData 디자인 타임 특성에서 이 파일을 참조합니다.

이 연습에서는 다음 작업을 수행합니다.

프로젝트를 만듭니다.
Customer 클래스 비즈니스 개체를 만듭니다.
샘플 데이터를 저장할 XAML 파일을 만듭니다.
TextBox 및 DataGrid 컨트롤을 샘플 데이터에 바인딩합니다.

연습을 마치면 디자인 타임에 샘플 데이터에 바인딩된 TextBox 및 DataGrid 컨트롤이 완성됩니다. 데이터 바인딩은 WPF Designer에서 설정됩니다.

참고

표시되는 대화 상자와 메뉴 명령은 활성 설정이나 버전에 따라 도움말에서 설명하는 것과 다를 수 있습니다. 설정을 변경하려면 도구 메뉴에서 설정 가져오기 및 내보내기를 선택합니다. 자세한 내용은 설정에 대한 작업을 참조하십시오.

사전 요구 사항

이 연습을 완료하려면 다음 구성 요소가 필요합니다.

Visual Studio 2010.

프로젝트 만들기

첫 번째 단계로 WPF 응용 프로그램 프로젝트를 만들고 디자인 타임 속성을 설정합니다.

프로젝트를 만들려면

Visual C#에서 DesignDataDemo라는 새 WPF 응용 프로그램 프로젝트를 만듭니다. 자세한 내용은 방법: 새 WPF 응용 프로그램 프로젝트 만들기를 참조하십시오.

WPF Designer에 MainWindow.xaml이 열립니다.
디자인 뷰에서 MainWindow 오른쪽 아래에 있는 루트 크기 조정 태그 ()를 클릭하여 루트 크기를 자동 크기 조정으로 설정합니다.

XAML 뷰에서 DesignInstance 및 DataContext와 같은 디자인 타임 속성에 액세스할 수 있도록 d 네임스페이스 매핑이 추가됩니다.

비즈니스 개체 만들기

다음으로 비즈니스 개체를 만듭니다. 비즈니스 개체는 FirstName, LastName 및 CustomerID 속성이 있는 Customer 클래스입니다.

비즈니스 개체를 만들려면

Customer라는 새 클래스를 프로젝트에 추가합니다.

자동으로 생성된 코드를 다음 코드로 바꿉니다.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace DesignDataDemo
{
    // The Customer class defines a simple Customer business object.
    class Customer
    {
        // Default constructor is required for usage as sample data 
        // in the WPF and Silverlight Designer.
        public Customer() {}

        public string FirstName { get; set; }
        public string LastName { get; set; }
        public Guid CustomerID { get; set; }
        public int Age { get; set; }
    }

    // The CustomerCollection class defines a simple collection
    // for Customer business objects.
    class CustomerCollection : List<Customer>
    {
        // Default constructor is required for usage in the WPF Designer.
        public CustomerCollection() {}
    }
}

디자인 타임 데이터 파일 만들기

XAML 파일에 비즈니스 개체의 인스턴스를 만들어 샘플 디자인 타임 데이터를 정의합니다. 빌드 작업을 DesignData로 설정하여 XAML 파일에 샘플 데이터가 포함되도록 지정합니다.

디자이너에서는 XAML 파일에서 선언한 인스턴스를 샘플 형식과 동일한 속성을 가진 자동으로 생성된 디자인 타임 형식으로 바꿉니다. 이렇게 하면 디자이너를 방해할 수도 있는 데이터베이스 쿼리와 같은 런타임 동작이 제거됩니다. 이러한 속성은 읽기 전용이며 샘플 데이터 파일에서 설정해야 합니다.

DesignDataWithDesignTimeCreatableTypes 빌드 작업을 사용하여 이 동작을 재정의하고 디자이너에서 샘플 데이터 형식의 인스턴스를 만들도록 지정합니다.

디자인 타임 데이터 파일을 만들려면

솔루션 탐색기에서 DesignData라는 새 폴더를 프로젝트에 추가합니다.
DesignData 폴더에서 SampleCustomer.xaml이라는 새 텍스트 파일을 추가합니다.

XAML 뷰에 SampleCustomer.xaml이 열립니다.

참고

리소스 사전을 사용할 수도 있습니다.

다음 XAML을 추가합니다.

<local:Customer 
    xmlns:local="clr-namespace:DesignDataDemo" 
    FirstName="Syed" LastName="Abbas" Age="23" CustomerID="E7181DC6-3F9E-45A4-A5F7-AC0B119D1FD8" />

DesignData 폴더에서 SampleCustomers.xaml이라는 새 텍스트 파일을 추가합니다.

XAML 뷰에 SampleCustomers.xaml이 열립니다.

다음 XAML을 추가합니다.

    <local:CustomerCollection 
    xmlns:local="clr-namespace:DesignDataDemo" >

    <local:Customer FirstName="Syed" LastName="Abbas" Age="23" CustomerID="E7181DC6-3F9E-45A4-A5F7-AC0B119D1FD8" />
    <local:Customer FirstName="Brenda" LastName="Diaz" Age="55" CustomerID="BB638D72-8B72-495A-B0F9-79F37964BBAE" />
    <local:Customer FirstName="Lori" LastName="Kane" Age="17" CustomerID="B168D811-5548-4D28-8171-318F9A4D7219" />

</local:CustomerCollection>

솔루션 탐색기에서 두 샘플 데이터 파일을 모두 선택합니다.
속성 창에서 빌드 작업을 DesignData로 설정하고 출력 디렉터리로 복사가 복사 안 함으로 설정되어 있는지 확인하고 사용자 지정 도구 필드를 지웁니다.

참고

빌드 작업으로 DesignDataWithDesignTimeCreatableTypes를 선택할 수도 있습니다.

디자인 타임 데이터 컨텍스트 설정

샘플 데이터를 제공하는 디자인 타임 데이터 컨텍스트를 만들려면 d:DesignData 태그 확장과 함께 d:DataContext 디자인 타임 특성을 사용합니다.

디자인 타임 데이터 컨텍스트를 설정하려면

WPF Designer에서 MainWindow.xaml을 엽니다.
XAML 뷰에서 다음 네임스페이스 매핑을 Window 시작 태그에 추가합니다. 자세한 내용은 방법: 네임스페이스를 XAML로 가져오기를 참조하십시오.
```
xmlns:local="clr-namespace:DesignDataDemo"
```
솔루션을 빌드합니다.
디자인 뷰에서 Grid 컨트롤 가운데에 가로 모눈선을 추가하여 두 개의 행을 정의합니다. 자세한 내용은 방법: 표에 행 및 열 추가를 참조하십시오.
도구 상자에서 StackPanel 컨트롤을 맨 위의 행에 끌어 놓습니다.
XAML 뷰에서 StackPanel 요소를 다음 XAML로 바꿉니다.
```
<StackPanel d:DataContext="{d:DesignData Source=./DesignData/SampleCustomer.xaml}" Grid.Row="0"></StackPanel>
```
이 XAML은 StackPanel 및 해당 자식 컨트롤의 디자인 타임 데이터 컨텍스트를 설정합니다. 또한 샘플 데이터를 데이터 바인딩에 사용할 수 있도록 설정합니다.

샘플 데이터의 단일 인스턴스에 바인딩

SampleCustomer.xaml 파일에 있는 Customer 인스턴스의 모든 속성에 바인딩할 수 있습니다. 다음 절차에서는 데이터 바인딩 작성기를 사용하여 FirstName 속성을 TextBox 컨트롤에 바인딩하는 방법을 보여 줍니다. 자세한 내용은 연습: WPF Designer를 사용하여 데이터 바인딩 만들기를 참조하십시오.

샘플 데이터에 TextBox를 바인딩하려면

도구 상자에서 TextBox 컨트롤을 StackPanel 컨트롤로 끌어 옵니다.
속성 창에서 Text 속성으로 스크롤합니다.
왼쪽 열 가장자리에서 속성 표식 ()을 클릭합니다.

메뉴가 나타납니다.

팁

행을 마우스 오른쪽 단추로 클릭하여 메뉴를 표시할 수도 있습니다.
데이터 바인딩 적용을 클릭합니다.

경로 창이 열린 채로 데이터 바인딩 작성기가 나타납니다.
FirstName 속성을 클릭합니다.
디자인 뷰에서, SampleCustomer.xaml 파일에서 지정한 FirstName 값이 TextBox 컨트롤에 표시됩니다.

샘플 데이터 모음에 바인딩

다음 절차에서는 SampleCustomers.xaml 파일의 Customer 개체 모음에 DataGrid 컨트롤을 바인딩하는 방법을 보여 줍니다.

샘플 데이터 모음에 DataGrid 컨트롤을 바인딩하려면

도구 상자에서 DataGrid 컨트롤을 모눈의 두 번째 행으로 끌어 온 다음 행이 다 채워지도록 크기를 조정합니다.
XAML 뷰에서 DataGrid 요소를 다음 XAML로 바꿉니다.
```
<DataGrid Grid.Row="1" d:DataContext="{d:DesignData Source=./DesignData/SampleCustomers.xaml}" />
```
이 XAML은 DataGrid 컨트롤의 디자인 타임 데이터 컨텍스트를 설정하고 샘플 데이터를 데이터 바인딩에 사용할 수 있도록 설정합니다.
DataGrid를 선택합니다.
속성 창에서 ItemsSource 속성으로 스크롤합니다.
왼쪽 열 가장자리에서 속성 표식 ()을 클릭합니다.
데이터 바인딩 적용을 클릭합니다.

경로 창이 열린 채로 데이터 바인딩 작성기가 나타납니다.
디자인 뷰에서 DataGrid 컨트롤이 SampleCustomers.xaml 파일의 Customer 인스턴스로 채워집니다.