在 Visual Studio 中通过 XAML 设计器使用设计时数据

  • 项目

有些布局没有数据很难进行可视化。 在本文档中，我们将审查从事桌面项目的开发人员可在 XAML 设计器中模拟数据的一种方法。 此方法是使用现有可忽略的“d:”命名空间来实现的。 利用这种方法，可快速将设计时数据添加到页面或控件中，而无需创建完整的模拟视图模型，或者只需测试属性更改会如何影响应用程序，而无需担心这些更改会影响你的发布版本。 所有 d: 数据仅由 XAML 设计器使用，无可忽略的命名空间值编译到应用程序中。

注意

如果你使用 Xamarin.Forms，请参阅 Xamarin.Forms 设计时数据

设计时数据基本信息

设计时数据是你设置的模拟数据，使控件更易于在 XAML 设计器中进行可视化。 首先，将以下代码行添加到 XAML 文档的标头（如果这些代码行尚不存在）：

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"

添加命名空间后，可将 d: 置于任何特性或控件之前，使其仅在 XAML 设计器中显示，而不在运行时显示。

例如，可将文本添加到通常绑定了数据的 TextBlock。

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

Design-time data with text in a TextBlock

在此示例中，如果没有 d:Text，则 XAML 设计器对于 TextBlock 不显示任何内容。 而是显示“Name!”，在此情况下，TextBlock 在运行时将具有实际数据。

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

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

Design-time data with a Button control

在此示例中，按钮仅在设计时显示。 使用此方法可为自定义控件放置占位符，或者可试用不同的控件。 在运行时期间，所有 d: 特性和控件都将被忽略。

在设计时预览图像

可为绑定到页面或动态加载的图像设置设计时源。 将要在 XAML 设计器中显示的图像添加到项目中。 然后，可在设计时在 XAML 设计器中显示该图像：

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

注意

此示例中的图像必须存在于解决方案中。

ListView 的设计时数据

ListView 是一种在桌面应用中显示数据的常用方法。 但是，如果没有任何数据，ListView 就难以进行可视化。 可以使用此功能创建内联设计时数据 ItemSource 或 Items。 XAML 设计器在设计时在 ListView 中显示该数组中的内容。

WPF .NET Core 示例

若要使用 system:String 类型，请确保在 XAML 标头中包含 xmlns:system="clr-namespace:System;assembly=mscorlib。

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

Design-time data with a ListView

上一个示例显示了在 XAML 设计器中具有三个 TextBlock 的 ListView。

你也可以创建一个数据对象数组。 例如，可将 City 数据对象的公共属性构建为设计时数据。

namespace Cities.Models
{
    public class City
    {
        public string Name { get; set; }
        public string Country { get; set; }
    }
}

若要在 XAML 中使用类，则必须在根节点中导入该命名空间。

xmlns:models="clr-namespace:Cities.Models"

<StackPanel>
    <ListView ItemsSource="{Binding Items}">
        <d:ListView.ItemsSource>
            <x:Array Type="{x:Type models:City}">
                <models:City Name="Seattle" Country="United States"/>
                <models:City Name="London" Country="United Kingdom"/>
                <models:City Name="Panama City" Country="Panama"/>
            </x:Array>
        </d:ListView.ItemsSource>
        <ListView.ItemTemplate>
            <DataTemplate>
                 <StackPanel Orientation="Horizontal" >
                    <TextBlock Text="{Binding Name}" Margin="0,0,5,0" />
                    <TextBlock Text="{Binding Country}" />
                 </StackPanel>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</StackPanel>

Actual model in design-time data with a ListView

这样做的好处是，你可将控件绑定到模型的设计时静态版本。

UWP 示例

UWP 不支持 x:Array。 因此，可以改用 <d:ListView.Items>。 若要使用 system:String 类型，请确保在 XAML 标头中包含 http://schemas.microsoft.com/winfx/2009/xaml。

    <StackPanel>
        <ListView>
            <d:ListView.Items>
                <system:String>Item One</system:String>
                <system:String>Item Two</system:String>
                <system:String>Item Three</system:String>
            </d:ListView.Items>
        </ListView>
    </StackPanel>

将设计时数据与自定义类型和属性一起使用

默认情况下，此功能仅适用于平台控件和属性。 在本部分中，我们将执行所需的步骤，使你能够将自己的自定义控件用作设计时控件，这是面向使用 Visual Studio 2019 版本 16.8 或更高版本的客户提供的新功能。 要实现此操作，需要满足三个要求：

  • 一个自定义 xmlns 命名空间

    xmlns:myControls="http://MyCustomControls"

  • 一个命名空间的设计时版本。 只需在末尾追加/设计即可实现。

    xmlns:myDesignTimeControls="http://MyCustomControls/design"

  • 将设计时前缀添加到 mc:Ignorable

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d myDesignTimeControls"

完成所有这些步骤后，可以使用 myDesignTimeControls 前缀来创建设计时控件。

<myDesignTimeControls:MyButton>I am a design time Button</myDesignTimeControls:MyButton>

创建自定义 xmlns 命名空间

若要在 WPF .NET Core 中创建自定义 xmlns 命名空间，需要将自定义 XML 命名空间映射到控件所在的 CLR 命名空间。 可通过在 AssemblyInfo.cs 文件中添加 XmlnsDefinition 程序集级别属性来实现此操作。 可在项目的根层次结构中找到该文件。

[assembly: XmlnsDefinition("http://MyCustomControls", "MyViews.MyButtons")]

疑难解答

如果你遇到此部分中未列出的问题，请通过使用报告问题工具来告知我们。

要求

  • 设计时数据需要 Visual Studio 2019 版本 16.7 或更高版本。

  • 支持定目标到适用于 .NET Core 的 Windows Presentation Foundation (WPF) 和 UWP 的 Windows 桌面项目。 也可以在预览频道中找到适用于 .NET Framework 的此功能。 若要启用此功能，请依次转到“工具”>“选项”>“环境”>“预览功能”，选择“适用于 .NET Framework 的新 WPF XAML 设计器”，然后重启 Visual Studio。

  • 从 Visual Studio 2019 版本 16.7 开始，此功能适用于 WPF 和 UWP 框架中的所有内置控件。 16.8 版本现已提供对第三方控件的支持。

XAML 设计器停止工作

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

请参阅