다음을 통해 공유

디자인 화면 및 프로토타입에 대한 샘플 데이터

비고

 샘플 데이터가 필요한 정도와 도움이 되는 정도는 바인딩에서 {Binding} 태그 확장 또는 {x:Bind} 태그 확장을 사용하는지 여부에 따라 달라집니다. 이 항목에서 설명된 기술은 DataContext의 사용을 기반으로 하기 때문에 {Binding}에만 적합합니다. 그러나 {x:Bind}을 사용하는 경우, 바인딩은 최소한 디자인 화면(항목 컨트롤의 경우에도)에 자리 표시자 값을 표시하므로 샘플 데이터가 그렇게 필요하지 않습니다.

앱이 Microsoft Visual Studio 또는 Blend for Visual Studio의 디자인 화면에 라이브 데이터를 표시하는 것은 불가능하거나 바람직하지 않을 수 있습니다(아마도 개인 정보 또는 성능상의 이유로). 컨트롤이 데이터로 채워지도록 하기 위해(앱의 레이아웃, 템플릿 및 기타 시각적 속성에서 작업할 수 있도록) 디자인 타임 샘플 데이터를 사용할 수 있는 다양한 방법이 있습니다. 스케치(또는 프로토타입) 앱을 빌드하는 경우 샘플 데이터는 매우 유용하고 시간을 절약할 수 있습니다. 스케치 또는 프로토타입의 샘플 데이터를 런타임에 사용하여 실제 라이브 데이터에 연결하지 않고도 아이디어를 설명할 수 있습니다.

{Binding}을 보여 주는 샘플 앱

비고

이 문서의 스크린샷은 이전 버전의 Visual Studio에서 가져온 것입니다. Visual Studio 2019를 사용하는 경우 개발 환경과 정확하게 일치하지 않을 수 있습니다.

마크업에서 DataContext 설정

명령형 코드(코드 숨김)를 사용하여 페이지 또는 사용자 컨트롤의 DataContext를 뷰 모델 인스턴스로 설정하는 것은 매우 일반적인 개발자 사례입니다.

public MainPage()
{
    InitializeComponent();
    this.DataContext = new BookstoreViewModel();
}

그러나 그렇게 하면 페이지가 최대한 "디자인이 가능"하지 않을 수 있습니다. 그 이유는 XAML 페이지가 Visual Studio 또는 Blend for Visual Studio에서 열리면, DataContext 값을 할당하는 명령적 코드가 실행되지 않기 때문입니다(사실, 코드 비하인드가 전혀 실행되지 않습니다). XAML 도구는 물론 태그를 구문 분석하고 태그에 선언된 개체를 인스턴스화하지만 실제로 페이지 형식 자체를 인스턴스화하지는 않습니다. 그 결과 컨트롤이나 데이터 바인딩 만들기 대화 상자에 데이터가 표시되지 않으며 페이지 스타일을 지정하고 배치하기가 더 어려워집니다.

스파스 디자인 UI.

첫 번째 해결 방법은 DataContext 할당을 주석 처리하고 대신 페이지 마크업에 DataContext를 설정하는 것입니다. 이 방법으로 라이브 데이터가 실행 시간뿐만 아니라 설계 시간에도 표시됩니다. 이렇게 하려면 먼저 XAML 페이지를 엽니다. 그런 다음 문서 개요 창에서 디자인 가능한 루트 요소(일반적으로 레이블 [Page])를 클릭하여 선택합니다. Properties 창에서 Common 범주 내의 DataContext 속성을 찾아 수정합니다. 개체 선택 대화 상자에서 보기 모델 유형을 선택하고, 그런 다음 확인을 클릭합니다.

DataContext를 설정하기 위한 UI입니다.

결과 마크업의 모양은 다음과 같습니다.

<Page ... >
    <Page.DataContext>
        <local:BookstoreViewModel/>
    </Page.DataContext>

이제 바인딩을 해결할 수 있게 된 디자인 표면의 모습은 다음과 같습니다. 이제 데이터 바인딩 만들기 대화 상자의 경로 선택기가 DataContext 형식 및 바인딩할 수 있는 속성에 따라 채워집니다.

디자인할 수 있는 UI .

데이터 바인딩 만들기 대화 상자에는 작업할 형식만 필요하지만 바인딩에는 값을 사용하여 속성을 초기화해야 합니다. 디자인 타임에 클라우드 서비스에 연결하지 않으려는 경우(성능, 데이터 전송에 대한 지불, 개인 정보 보호 문제, 이러한 종류의 작업) 초기화 코드는 앱이 디자인 도구(예: Visual Studio 또는 Blend for Visual Studio)에서 실행 중인지 확인하고, 이 경우 디자인 타임에만 사용할 샘플 데이터를 로드할 수 있습니다.

if (Windows.ApplicationModel.DesignMode.DesignModeEnabled)
{
    // Load design-time books.
}
else
{
    // Load books from a cloud service.
}

초기화 코드에 매개 변수를 전달해야 하는 경우 뷰 모델 로케이터를 사용할 수 있습니다. 뷰 모델 로케이터는 앱 리소스에 넣을 수 있는 클래스입니다. 뷰 모델을 노출하는 속성이 있으며 페이지의 DataContext 가 해당 속성에 바인딩됩니다. 로케이터 또는 뷰 모델에서 사용할 수 있는 또 다른 패턴은 종속성 주입으로, 해당하는 경우 디자인 타임 또는 런타임 데이터 공급자(각각 공통 인터페이스를 구현함)를 생성할 수 있습니다.

"클래스의 샘플 데이터" 및 디자인 시점 속성

어떤 이유로든 이전 섹션의 옵션이 작동하지 않는 경우 XAML 도구 기능 및 디자인 타임 특성을 통해 사용할 수 있는 디자인 타임 데이터 옵션이 많이 있습니다. 좋은 옵션 중 하나는 Blend for Visual Studio의 클래스에서 샘플 데이터를 생성하는 기능을 활용하는 것입니다. 데이터 패널의 맨 위에 있는 단추 중 하나에서 해당 명령을 찾을 수 있습니다.

명령에서 사용할 클래스를 지정하기만 하면 됩니다. 그런 다음 명령은 두 가지 중요한 작업을 수행합니다. 먼저 선택한 클래스의 인스턴스와 모든 멤버를 재귀적으로 하이드레이션하는 데 적합한 샘플 데이터가 포함된 XAML 파일을 생성합니다(실제로 도구는 XAML 또는 JSON 파일과 동일하게 작동함). 둘째, 데이터 패널을 선택한 클래스의 스키마로 채웁니다. 그런 다음 데이터 패널에서 디자인 화면으로 멤버를 끌어 다양한 작업을 수행할 수 있습니다. 끌어서 놓는 위치에 따라 기존 컨트롤에 바인딩을 추가하거나( {Binding} 사용) 새 컨트롤을 만들고 동시에 바인딩할 수 있습니다. 두 경우 모두 작업을 통해 페이지의 레이아웃 루트에 디자인 타임 데이터 컨텍스트(d:DataContext)를 설정합니다(아직 설정되지 않은 경우). 해당 디자인 타임 데이터 컨텍스트는 d:DesignData 특성을 사용하여 생성된 XAML 파일에서 해당 샘플 데이터를 가져옵니다(즉, 프로젝트에서 자유롭게 찾아 원하는 샘플 데이터를 포함하도록 편집할 수 있음).

<Page ...
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Grid ... d:DataContext="{d:DesignData /SampleData/RecordingViewModelSampleData.xaml}"/>
        <ListView ItemsSource="{Binding Recordings}" ... />
        ...
    </Grid>
</Page>

다양한 xmlns 선언은 d: 접두사를 가진 특성이 디자인 타임에만 해석되고 런타임에 무시됨을 의미합니다. 따라서 d:DataContext 특성은 디자인 타임에 DataContext 속성의 값에만 영향을 줍니다. 런타임에는 영향을 주지 않습니다. 원하는 경우 마크업에서 d:DataContext과 DataContext 둘 다 설정할 수도 있습니다. d:DataContext 디자인 타임에 재정의되고 DataContext 런타임에 재정의됩니다. 이러한 동일한 재정의 규칙은 모든 설계 시간 및 실행 시간 특성에 적용됩니다.

d:DataContext 특성 및 기타 모든 디자인 타임 특성은 UWP(유니버설 Windows 플랫폼) 앱에 여전히 유효한 Design-Time 특성 항목에 설명되어 있습니다.

CollectionViewSource에는 DataContext 속성이 없지만, Source 속성은 있습니다. 따라서 디자인 타임 전용 샘플 데이터를 설정하는 데 사용할 수 있는 d:Source 속성이 CollectionViewSource에 있습니다.

    <Page.Resources>
        <CollectionViewSource x:Name="RecordingsCollection" Source="{Binding Recordings}"
            d:Source="{d:DesignData /SampleData/RecordingsSampleData.xaml}"/>
    </Page.Resources>

    ...

        <ListView ItemsSource="{Binding Source={StaticResource RecordingsCollection}}" ... />
    ...

이렇게 하려면 Recordings : ObservableCollection<Recording>라는 클래스를 만들어야 하며, 여기에 표시된 바와 같이 예시 데이터 XAML 파일을 편집하여 녹음 개체(내부에 녹음 개체 포함)만 포함되도록 해야 합니다.

<Quickstart:Recordings xmlns:Quickstart="using:Quickstart">
    <Quickstart:Recording ArtistName="Mollis massa" CompositionName="Cubilia metus"
        OneLineSummary="Morbi adipiscing sed" ReleaseDateTime="01/01/1800 15:53:17"/>
    <Quickstart:Recording ArtistName="Vulputate nunc" CompositionName="Parturient vestibulum"
        OneLineSummary="Dapibus praesent netus amet vestibulum" ReleaseDateTime="01/01/1800 15:53:17"/>
    <Quickstart:Recording ArtistName="Phasellus accumsan" CompositionName="Sit bibendum"
        OneLineSummary="Vestibulum egestas montes dictumst" ReleaseDateTime="01/01/1800 15:53:17"/>
</Quickstart:Recordings>

XAML 대신 JSON 샘플 데이터 파일을 사용하는 경우 Type 속성을 설정해야 합니다.

    d:Source="{d:DesignData /SampleData/RecordingsSampleData.json, Type=local:Recordings}"

지금까지 우리는 d:DesignData을 사용하여 XAML 또는 JSON 파일에서 디자인 시간 샘플 데이터를 로드해 왔습니다. 대신 디자인 타임 원본이 Type 속성에 지정된 클래스를 기반으로 했음을 나타내는 d:DesignInstance 태그 확장이 있습니다. 다음은 예제입니다.

    <CollectionViewSource x:Name="RecordingsCollection" Source="{Binding Recordings}"
        d:Source="{d:DesignInstance Type=local:Recordings, IsDesignTimeCreatable=True}"/>

IsDesignTimeCreatable 속성은 디자인 도구가 실제로 클래스의 인스턴스를 만들어야 하며 이는 클래스에 공용 기본 생성자가 있고 데이터(실제 또는 샘플)로 채워지게 됨을 의미합니다. IsDesignTimeCreatable 설정하지 않거나 false설정하면 디자인 화면에 샘플 데이터가 표시되지 않습니다. 이 경우 모든 디자인 도구는 바인딩 가능한 속성에 대한 클래스를 구문 분석하고 데이터 패널 및 데이터 바인딩 만들기 대화 상자에 표시합니다.

프로토타입 생성을 위한 샘플 데이터

프로토타입 생성의 경우 디자인 타임과 런타임 모두에서 샘플 데이터를 원합니다. 이 사용 사례의 경우 Blend for Visual Studio에는 새 샘플 데이터 기능이 있습니다. 데이터 패널의 맨 위에 있는 단추 중 하나에서 해당 명령을 찾을 수 있습니다.

클래스를 지정하는 대신 데이터 패널에서 샘플 데이터 원본의 스키마를 실제로 디자인할 수 있습니다. 데이터 패널에서 샘플 데이터 값을 편집할 수도 있습니다. 파일을 열고 편집할 필요가 없습니다(원하는 경우 계속 편집할 수 있습니다).

새 샘플 데이터 기능은 d:DataContext가 아닌 DataContext를 사용하므로, 디자인할 때뿐만 아니라 스케치나 프로토타입을 실행할 때도 샘플 데이터를 사용할 수 있습니다. 또한 데이터 패널을 사용하면 디자인 및 바인딩 작업의 속도가 매우 빨라지게 됩니다. 예를 들어 데이터 패널에서 디자인 화면으로 컬렉션 속성을 끌어 놓기만 하면 데이터 바인딩된 항목 컨트롤과 필요한 템플릿이 생성되며 모두 빌드 및 실행할 준비가 됩니다.

프로토타입 생성을 위한 샘플 데이터입니다.