将设计时数据与 XAML 预览器配合使用

有些布局没有数据很难进行可视化。 使用这些提示来充分利用在 XAML 预览器中预览数据密集型页面。

警告

VISUAL Studio 2019 版本 16.8 和 Visual Studio for Mac版本 8.8 中已弃用 XAML 预览程序,替换为 Visual Studio 2019 版本 16.9 和 Visual Studio for Mac 版本 8.9 中的 XAML 热重载功能。 在文档中详细了解 XAML 热重载。

注意

如果使用 Windows Presentation Foundation (WPF) 或 UWP,请参阅将设计时数据与桌面应用程序的 XAML Designer配合使用

设计时数据基础知识

设计时数据是设置的虚假数据,使控件更易于在 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!" />

使用文本设计时间数据 标签

在此示例中,如果没有 d:Text,XAML 预览器将不显示标签的内容。 相反,它显示“名称!”,标签将在运行时具有实际数据。

可以 d: 与控件的任何属性一 Xamarin.Forms 起使用,例如颜色、字号和间距。 甚至可以将其添加到控件本身:

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

使用 Button 控件设计时间数据

在此示例中,按钮仅在设计时显示。 使用此方法为 XAML 预览程序不支持的自定义控件放置占位符。

在设计时预览图像

可以为绑定到页面或动态加载的图像设置设计时间源。 在 Android 项目中,将要在 XAML 预览器中显示的图像添加到 “资源 > 绘制” 文件夹。 在 iOS 项目中,将图像添加到 “资源” 文件夹。 然后,可以在设计时在 XAML 预览器中显示该图像:

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

使用图像设计时间

ListViews 的设计时间数据

ListViews 是在移动应用中显示数据的常用方法。 但是,如果没有实际数据,它们很难可视化。 若要将设计时数据与它们一起使用,必须创建一个设计时数组以用作 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>

使用 ListView 设计时间

此示例将在 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 进行硬编码

如果不想将设计时数据添加到各个控件,可以设置一个模拟数据存储以绑定到页面。 请参阅 James Montemagno 关于添加设计时数据的博客文章 ,了解如何在 XAML 中绑定到静态 ViewModel。

疑难解答

要求

设计时数据需要最低版本 Xamarin.Forms 3.6。

IntelliSense 在我的设计时数据下显示波浪线

这是一个已知问题,将在即将推出的 Visual Studio 版本中修复。 项目仍会生成,而不会出错。

XAML 预览程序停止工作

尝试关闭并重新打开 XAML 文件,清理并重新生成项目。