XAML 미리 보기에서 디자인 타임 데이터 사용Use Design Time Data with the XAML Previewer

일부 레이아웃은 데이터 없이 시각화 하기가 어렵습니다. 이러한 팁을 사용 하 여 XAML 미리 보기에서 데이터를 많이 사용 하는 페이지의 미리 보기를 최대한 활용할 수 있습니다.Some layouts are hard to visualize without data. Use these tips to make the most out of previewing your data-heavy pages in the XAML Previewer.

디자인 타임 데이터 기본 사항Design time data basics

디자인 타임 데이터는 XAML 미리 보기에서 컨트롤을 더 쉽게 시각화할 수 있도록 설정 하는 가짜 데이터입니다.Design time data is fake data you set to make your controls easier to visualize in the XAML Previewer. 시작 하려면 XAML 페이지의 헤더에 다음 코드 줄을 추가 합니다.To get started, add the following lines of code to the header of your XAML page:

xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"

네임 스페이스를 추가한 후에는 특성 또는 컨트롤 앞에 d:을 추가 하 여 XAML 미리 보기에 표시할 수 있습니다.After adding the namespaces, you can put d: in front of any attribute or control to show it in the XAML Previewer. @No__t_0 있는 요소는 런타임에 표시 되지 않습니다.Elements with d: aren't shown at runtime.

예를 들어 일반적으로 데이터가 바인딩된 레이블에 텍스트를 추가할 수 있습니다.For example, you can add text to a label that usually has data bound to it.

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

레이블에 텍스트를 사용 하 여 시간 데이터 디자인Design time data with text in a Label

이 예제에서는 d:Text 하지 않고 XAML 미리 보기에서 레이블에 아무것도 표시 하지 않습니다.In this example, without d:Text, the XAML Previewer would show nothing for the label. 대신 "이름!"이 표시 됩니다.Instead, it shows "Name!" 여기서 레이블에는 런타임에 실제 데이터가 포함 됩니다.where the label will have real data at runtime.

색, 글꼴 크기 및 간격과 같이 Xamarin.ios 컨트롤의 특성과 함께 d:를 사용할 수 있습니다.You can use d: with any attribute for a Xamarin.Forms control, like colors, font sizes, and spacing. 컨트롤 자체에 추가할 수도 있습니다.You can even add it to the control itself:

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

단추 컨트롤을 사용 하 여 시간 데이터 디자인Design time data with a Button control

이 예제에서 단추는 디자인 타임에만 표시 됩니다.In this example, the button only appears at design time. 이 메서드를 사용 하 여 XAML 미리 보기에서 지원 되지 않는 사용자 지정 컨트롤에 대 한 자리 표시자를에 삽입할 수 있습니다.Use this method to put a placeholder in for a custom control not supported by the XAML Previewer.

디자인 타임에 이미지 미리 보기Preview images at design time

페이지에 바인딩되거나 동적으로 로드 되는 이미지에 대 한 디자인 타임 소스를 설정할 수 있습니다.You can set a design time Source for images that are bound to the page or loaded in dynamically. Android 프로젝트에서 XAML 미리 보기에 표시 하려는 이미지를 > 그릴 수 있는 폴더에 리소스를 추가 합니다.In your Android project, add the image you want to show in the XAML Previewer to the Resources > Drawable folder. IOS 프로젝트에서 리소스 폴더에 이미지를 추가 합니다.In your iOS project, add the image to the Resources folder. 그런 다음 디자인 타임에 XAML 미리 보기에 해당 이미지를 표시할 수 있습니다.You can then show that image in the XAML Previewer at design time:

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

이미지를 사용 하 여 시간 데이터 디자인Design time data with images

Listview에 대 한 디자인 타임 데이터Design time data for ListViews

Listview은 모바일 앱에 데이터를 표시 하는 인기 있는 방법입니다.ListViews are a popular way to display data in a mobile app. 그러나 실제 데이터 없이 시각화 하기가 어렵습니다.However, they're difficult to visualize without real data. 디자인 타임 데이터를 사용 하려면 System.windows.controls.itemscontrol.itemssource으로 사용할 디자인 타임 배열을 만들어야 합니다.To use design time data with them, you have to create a design time array to use as an ItemsSource. XAML 미리 보기는 디자인 타임에 ListView의 해당 배열에 있는 항목을 표시 합니다.The XAML Previewer displays what is in that array in your ListView at design time.

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

ListView를 사용 하 여 디자인 타임 데이터Design time data with a ListView

이 예제에서는 XAML 미리 보기에서 3 개의 TextCells의 ListView를 표시 합니다.This example will show a ListView of three TextCells in the XAML Previewer. 프로젝트에서 기존 데이터 모델로 x:String를 변경할 수 있습니다.You can change x:String to an existing data model in your project.

데이터 개체의 배열을 만들 수도 있습니다.You can also create an array of data objects. 예를 들어 Monkey 데이터 개체의 공용 속성을 디자인 타임 데이터로 생성할 수 있습니다.For example, public properties of a Monkey data object can be constructed as design time data:

namespace Monkeys.Models
{
    public class Monkey
    {
        public string Name { get; set; }
        public string Location { get; set; }
    }
}

XAML에서 클래스를 사용 하려면 루트 노드의 네임 스페이스를 가져와야 합니다.To use the class in XAML you will need to import the namespace in the root node:

xmlns:models="clr-namespace:Monkeys.Models"
<StackLayout>
    <ListView ItemsSource="{Binding Items}">
        <d:ListView.ItemsSource>
            <x:Array Type="{x:Type models:Monkey}">
                <models:Monkey Name="Baboon" Location="Africa and Asia"/>
                <models:Monkey Name="Capuchin Monkey" Location="Central and South America"/>
                <models:Monkey Name="Blue Monkey" Location="Central and East Africa"/>
            </x:Array>
        </d:ListView.ItemsSource>
        <ListView.ItemTemplate>
            <DataTemplate x:DataType="models:Monkey">
                <TextCell Text="{Binding Name}"
                          Detail="{Binding Location}" />
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</StackLayout>

여기서는 사용 하려는 실제 모델에 바인딩할 수 있다는 이점도 있습니다.The benefit here is that you can bind to the actual model that you plan to use.

대안: 정적 ViewModel 하드 코딩Alternative: Hardcode a static ViewModel

디자인 타임 데이터를 개별 컨트롤에 추가 하지 않으려는 경우에는 해당 페이지에 바인딩할 모의 데이터 저장소를 설정할 수 있습니다.If you don't want to add design time data to individual controls, you can set up a mock data store to bind to your page. 디자인 타임 데이터 추가에 대 한 James Montemagno의 블로그 게시물을 참조 하 여 XAML에서 정적 ViewModel에 바인딩하는 방법을 확인 하세요.Refer to James Montemagno's blog post on adding design-time data to see how to bind to a static ViewModel in XAML.

문제 해결Troubleshooting

요구 사항Requirements

디자인 타임 데이터에는 최소 버전의 Xamarin. 양식 3.6이 필요 합니다.Design time data requires a minimum version of Xamarin.Forms 3.6.

IntelliSense가 디자인 타임 데이터 아래에 물결 모양의 선을 표시 합니다.IntelliSense shows squiggly lines under my design time data

이것은 알려진 문제 이며 Visual Studio의 향후 버전에서 수정 될 예정입니다.This is a known issue and will be fixed in an upcoming version of Visual Studio. 프로젝트는 여전히 오류 없이 빌드됩니다.The project will still build without errors.

XAML 미리 보기의 작동이 중지 되었습니다.The XAML Previewer stopped working

XAML 파일을 닫았다가 다시 열어 프로젝트를 정리 하 고 다시 빌드 해 보세요.Try closing and reopening the XAML file, and cleaning and rebuilding your project.