XAML 미리 보기에서 디자인 타임 데이터 사용

아티클
03/08/2024

일부 레이아웃은 데이터 없이 시각화하기가 어렵습니다. 다음 팁을 사용하여 XAML 미리 보기에서 데이터 사용량이 많은 페이지를 최대한 활용할 수 있습니다.

Warning

XAML 미리 보기는 Visual Studio 2019 버전 16.8 및 Mac용 Visual Studio 버전 8.8에서 더 이상 사용되지 않으며 Visual Studio 2019 버전 16.9 및 Mac용 Visual Studio 버전 8.9의 XAML 핫 다시 로드 기능으로 대체되었습니다. 설명서에서 XAML 핫 다시 로드 대해 자세히 알아봅니다.

참고 항목

WPF(Windows Presentation Foundation) 또는 UWP를 사용하는 경우 데스크톱 애플리케이션용 XAML 디자이너에서 디자인 타임 데이터 사용을 참조 하세요.

디자인 타임 데이터 기본 사항

디자인 타임 데이터는 XAML 미리 보기에서 컨트롤을 보다 쉽게 시각화할 수 있도록 설정한 가짜 데이터입니다. 시작하려면 XAML 페이지의 헤더에 다음 코드 줄을 추가합니다.

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

네임스페이스를 추가한 후 모든 특성 또는 컨트롤 앞에 배치 d: 하여 XAML 미리 보기에 표시할 수 있습니다. 포함된 d: 요소는 런타임에 표시되지 않습니다.

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

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

이 예제에서는 XAML 미리 보기가 없으면 d:Text레이블에 대해 아무 것도 표시하지 않습니다. 대신 레이블에 런타임에 실제 데이터가 있는 "이름!"이 표시됩니다.

색, 글꼴 크기 및 간격과 같은 컨트롤의 Xamarin.Forms 모든 특성과 함께 사용할 d: 수 있습니다. 컨트롤 자체에 추가할 수도 있습니다.

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

이 예제에서 단추는 디자인 타임에만 표시됩니다. XAML 미리 보기에서 지원하지 않는 사용자 지정 컨트롤에 자리 표시자를 배치하려면 이 메서드를 사용합니다.

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

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

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

ListView에 대한 디자인 시간 데이터

ListView는 모바일 앱에서 데이터를 표시하는 인기 있는 방법입니다. 그러나 실제 데이터 없이는 시각화하기가 어렵습니다. 디자인 타임 데이터를 함께 사용하려면 ItemsSource로 사용할 디자인 타임 배열을 만들어야 합니다. XAML 미리 보기는 디자인 타임에 ListView의 해당 배열에 있는 내용을 표시합니다.

<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>

이 예제에서는 XAML 미리 보기에서 세 개의 TextCell의 ListView를 보여 줍니다. 프로젝트의 기존 데이터 모델로 변경할 x:String 수 있습니다.

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

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

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

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>

여기서 이점은 사용하려는 실제 모델에 바인딩할 수 있다는 것입니다.

대안: 정적 ViewModel 하드 코드

개별 컨트롤에 디자인 타임 데이터를 추가하지 않으려면 모의 데이터 저장소를 설정하여 페이지에 바인딩할 수 있습니다. XAML에서 정적 ViewModel에 바인딩하는 방법을 보려면 디자인 타임 데이터 추가에 대한 James Montemagno의 블로그 게시물을 참조하세요.

문제 해결

요구 사항

디자인 타임 데이터에는 최소 버전 Xamarin.Forms 3.6이 필요합니다.

디자인 타임 데이터 아래에 물결선이 표시된 IntelliSense

이는 알려진 문제이며 향후 버전의 Visual Studio에서 해결될 예정입니다. 프로젝트는 오류 없이 계속 빌드됩니다.

XAML 미리 보기 작동이 중지됨

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

다음을 통해 공유