通过 XAML 预览器使用设计时数据

项目
04/20/2024

有些布局没有数据很难进行可视化。按这些提示可以最大限度地利用 XAML 预览器来预览数据密集型页面。

警告

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

注意

如果使用 Windows Presentation Foundation (WPF) 或 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!" />

在此示例中，如果没有 d:Text，则 XAML 预览器对于标签不会显示任何内容。相反，它显示“Name!”，在这种情况下，标签在运行时将具有实际数据。

可以将 d: 与 Xamarin.Forms 控件的任何特性（如颜色、字号和间距）结合使用。甚至可以将其添加到控件本身：

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

在此示例中，按钮仅在设计时显示。使用此方法可以为 XAML 预览器不支持的自定义控件添加占位符。

在设计时预览图像

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

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

ListView 的设计时数据

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 进行硬编码

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

疑难解答

要求

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

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

这是一个已知问题，将在即将发布的 Visual Studio 版本中修复。项目仍然会顺利生成，没有错误。

XAML 预览器停止工作

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