Use Design Time Data with the XAML Previewer

Стаття
03/27/2019

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.

Warning

The XAML Previewer has been deprecated in Visual Studio 2019 version 16.8 and Visual Studio for Mac version 8.8, and replaced by the XAML Hot Reload feature in Visual Studio 2019 version 16.9 and Visual Studio for Mac version 8.9. Learn more about XAML Hot Reload in the documentation.

Note

If you are using Windows Presentation Foundation (WPF) or UWP, see Use Design Time Data with the XAML Designer for desktop applications

Design time data basics

Design time data is fake data you set to make your controls easier to visualize in the XAML Previewer. 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"

After adding the namespaces, you can put d: in front of any attribute or control to show it in the XAML Previewer. 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!" />

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.

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

In this example, the button only appears at design time. 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. In your Android project, add the image you want to show in the XAML Previewer to the Resources > Drawable folder. In your iOS project, add the image to the Resources folder. You can then show that image in the XAML Previewer at design time:

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

Design time data for ListViews

ListViews are a popular way to display data in a mobile app. However, they're difficult to visualize without real data. To use design time data with them, you have to create a design time array to use as an ItemsSource. 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>

This example will show a ListView of three TextCells in the XAML Previewer. You can change x:String to an existing data model in your project.

You can also create an array of data objects. 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; }
    }
}

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.

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

Design time data requires a minimum version of Xamarin.Forms 3.6.

IntelliSense shows squiggly lines under my design time data

This is a known issue and will be fixed in an upcoming version of Visual Studio. The project will still build without errors.

The XAML Previewer stopped working

Try closing and reopening the XAML file, and cleaning and rebuilding your project.

Поділитися через