Visual Studio에서 XAML 디자이너와 함께 디자인 타임 데이터 사용

일부 레이아웃은 데이터 없이는 시각화하기 어렵습니다. 이 문서에서는 데스크톱 프로젝트에서 작업하는 개발자가 XAML 디자이너에서 데이터를 모의하는 데 사용할 수 있는 방법 중 하나를 검토합니다. 이 방법은 기존 무시 가능한 "d:" 네임스페이스를 사용하여 수행됩니다. 이 방법을 사용하면 전체 모의 ViewModel을 만들 필요 없이 페이지 또는 컨트롤에 디자인 타임 데이터를 빠르게 추가하거나 이러한 변경 내용이 릴리스 빌드에 영향을 줄 것을 걱정하지 않고도 속성 변경이 애플리케이션에 미치는 영향을 테스트할 수 있습니다. 모든 d: 데이터는 XAML 디자이너에서만 사용되며 무시할 수 있는 네임스페이스 값은 애플리케이션으로 컴파일되지 않습니다.

메모

Xamarin.Forms를 사용하는 경우 Xamarin.Forms 디자인 타임 데이터 참조하세요.

설계 시간 데이터 기본 사항

디자인 타임 데이터는 XAML 디자이너에서 컨트롤을 보다 쉽게 시각화할 수 있도록 설정한 모의 데이터입니다. 시작하려면, XAML 문서에 이미 존재하지 않는 경우 다음 코드 줄을 머리글에 추가하십시오.

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"

네임스페이스를 추가한 후에는 특성 또는 컨트롤 앞에 d: 배치하여 XAML 디자이너에서만 표시할 수 있지만 런타임에는 표시할 수 없습니다.

예를 들어 일반적으로 데이터가 바인딩된 TextBlock에 텍스트를 추가할 수 있습니다.

<TextBlock Text="{Binding Name}" d:Text="Name!" />

이 예제에서는 d:Text없으면 XAML 디자이너는 TextBlock에 아무 것도 표시하지 않습니다. 대신, TextBlock에는 실제 데이터가 런타임에 나타날 부위에 "이름!"이 표시됩니다.

색, 글꼴 크기 및 간격과 같은 UWP 또는 WPF .NET Core 컨트롤의 특성과 함께 d: 사용할 수 있습니다. 컨트롤 자체에 추가할 수도 있습니다.

<d:Button Content="Design Time Button" />

이 예제에서는 단추가 디자인 시점에만 나타납니다. 이 메서드를 사용 하 여 사용자 지정 컨트롤에 대 한 자리 표시자를 배치 하거나 다른 컨트롤을 시도 합니다. 모든 d: 특성 및 컨트롤은 런타임 중에 무시됩니다.

디자인 타임에 이미지 미리 보기

페이지에 바인딩되거나 동적으로 로드되는 이미지의 디자인 타임 원본을 설정할 수 있습니다. XAML 디자이너에 표시할 이미지를 프로젝트에 추가합니다. 그런 다음, 디자인 타임에 XAML 디자이너에 해당 이미지를 표시할 수 있습니다.

<Image Source={Binding ProfilePicture} d:Source="DesignTimePicture.jpg" />

메모

이 예제의 이미지는 솔루션에 있어야 합니다.

ListView에 대한 디자인 타임 데이터

ListView는 데스크톱 앱에서 데이터를 표시하는 인기 있는 방법입니다. 그러나 데이터 없이는 시각화하기가 어렵습니다. 이 기능을 사용하여 인라인 디자인 타임 데이터 항목 소스 또는 항목을 만들 수 있습니다. XAML 디자이너는 디자인 타임에 ListView의 해당 배열에 있는 내용을 표시합니다.

WPF .NET Core 예제

system:String 형식을 사용하려면 XAML 헤더에 xmlns:system="clr-namespace:System;assembly=mscorlib 포함해야 합니다.

<StackPanel>
    <ListView ItemsSource="{Binding Items}">
        <d:ListView.ItemsSource>
            <x:Array Type="{x:Type system:String}">
                <system:String>Item One</system:String>
                <system:String>Item Two</system:String>
                <system:String>Item Three</system:String>
            </x:Array>
        </d:ListView.ItemsSource>
    <ListView.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding ItemName}" d:Text="{Binding .}" />
        </DataTemplate>
    </ListView.ItemTemplate>
   </ListView>
</StackPanel>

이 이전 예제에서는 XAML 디자이너에서 세 개의 TextBlock이 있는 ListView를 보여 줍니다.

데이터 개체의 배열을 만들 수도 있습니다. 예를 들어 City 데이터 개체의 공용 속성을 디자인 타임 데이터로 생성할 수 있습니다.

namespace Cities.Models
{
    public class City
    {
        public string Name { get; set; }
        public string Country { get; set; }
    }
}

XAML에서 클래스를 사용하려면 루트 노드에서 네임스페이스를 가져와야 합니다.

xmlns:models="clr-namespace:Cities.Models"

<StackPanel>
    <ListView ItemsSource="{Binding Items}">
        <d:ListView.ItemsSource>
            <x:Array Type="{x:Type models:City}">
                <models:City Name="Seattle" Country="United States"/>
                <models:City Name="London" Country="United Kingdom"/>
                <models:City Name="Panama City" Country="Panama"/>
            </x:Array>
        </d:ListView.ItemsSource>
        <ListView.ItemTemplate>
            <DataTemplate>
                 <StackPanel Orientation="Horizontal" >
                    <TextBlock Text="{Binding Name}" Margin="0,0,5,0" />
                    <TextBlock Text="{Binding Country}" />
                 </StackPanel>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</StackPanel>

여기서의 이점은 디자인 시간의 정적 버전 모델에 컨트롤을 바인딩할 수 있다는 것입니다.

UWP 예제

x:Array는 UWP에서 지원되지 않습니다. 따라서 대신 <d:ListView.Items> 사용할 수 있습니다. system:String 형식을 사용하려면 XAML 헤더에 http://schemas.microsoft.com/winfx/2009/xaml 포함해야 합니다.

    <StackPanel>
        <ListView>
            <d:ListView.Items>
                <system:String>Item One</system:String>
                <system:String>Item Two</system:String>
                <system:String>Item Three</system:String>
            </d:ListView.Items>
        </ListView>
    </StackPanel>

사용자 지정 형식 및 속성을 사용한 디자인 타임 데이터 활용

기본적으로 이 기능은 플랫폼 컨트롤 및 속성에서만 작동합니다. 이 섹션에서는 Visual Studio 2019 버전 16.8 이상을 사용하는 고객이 사용할 수 있는 새로운 기능인 사용자 지정 컨트롤을 디자인 타임 컨트롤로 사용할 수 있도록 하는 데 필요한 단계를 설명합니다. 이를 사용하도록 설정하려면 다음 세 가지 요구 사항이 있습니다.

사용자 지정 xmlns 네임스페이스

xmlns:myControls="http://MyCustomControls"

네임스페이스의 디자인 타임 버전입니다. 이 작업은 단순히 끝에 /design을 추가하여 수행할 수 있습니다.
```
xmlns:myDesignTimeControls="http://MyCustomControls/design"
```

mc:Ignorable 항목에 설계 시간 접두사를 추가하기

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d myDesignTimeControls"

이러한 모든 단계를 수행한 후에는 myDesignTimeControls 접두사를 사용하여 디자인 타임 컨트롤을 만들 수 있습니다.

<myDesignTimeControls:MyButton>I am a design time Button</myDesignTimeControls:MyButton>

사용자 지정 xmlns 네임스페이스 만들기

WPF .NET Core에서 사용자 지정 xmlns 네임스페이스를 만들려면 사용자 지정 XML 네임스페이스를 컨트롤이 있는 CLR 네임스페이스에 매핑해야 합니다. XmlnsDefinition 파일에 AssemblyInfo.cs 어셈블리 수준 특성을 추가하여 이 작업을 수행할 수 있습니다. 이 파일은 프로젝트의 루트 계층 구조에 있습니다.

[assembly: XmlnsDefinition("http://MyCustomControls", "MyViews.MyButtons")]

문제 해결

이 섹션에 나열되지 않은 문제가 발생하는 경우 문제 보고 도구를 사용하여 알려주세요.

XAML 디자이너가 작동을 중지했습니다.

XAML 파일을 닫았다가 다시 열고 프로젝트를 정리하고 다시 빌드해 보세요.

참고하세요

Xamarin.Forms 미리 보기를 사용한 디자인 타임 데이터
XAML WPF 앱
UWP 앱 XAML
Xamarin.Forms 앱에서 XAML 사용
.NET MAUI 앱에서 XAML

피드백

이 페이지가 도움이 되었나요?

Last updated on 2025-12-12