在 Visual Studio 中将设计时数据与 XAML 设计器配合使用

某些布局很难可视化,而无需数据。 本文档将回顾处理桌面项目的开发人员可用于模拟 XAML 设计器中的数据的方法之一。 此方法是使用现有的可忽略“d:”命名空间完成的。 使用此方法,可以快速将设计时数据添加到页面或控件,而无需创建完整的模拟 ViewModel,或者只需测试属性更改如何影响应用程序,而不必担心这些更改会影响发布版本。 所有 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!" />

在 TextBlock 中使用文本的设计时数据

在此示例中,如果没有 d:Text,XAML 设计器将不显示 TextBlock。 而是显示“Name!”,其中 TextBlock 在运行时将具有实际数据。

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

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

具有按钮控件的设计时数据

在此示例中,按钮仅在设计时显示。 使用此方法可将占位符放入自定义控件或尝试不同的控件。 在运行时,将忽略所有 d: 属性和控件。

在设计时预览图像

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

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

注释

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

ListViews 的设计时数据

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

WPF .NET Core 示例

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

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

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

具有 ListView 的设计时数据中的实际模型

此处的好处是,可以将控件绑定到模型的设计时静态版本。

UWP 示例

UWP 不支持 x:Array。 因此,我们可以改用 <d:ListView.Items> 。 若要使用 system:String 类型,请确保包含在 http://schemas.microsoft.com/winfx/2009/xaml 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"
    
  • 命名空间的设计时版本。 只需在末尾追加 /design 即可实现此目的。

    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 命名空间。 可以通过在 XmlnsDefinition 文件中添加程序集级属性 AssemblyInfo.cs 来执行此作。 该文件位于项目的根层次结构中。

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

Troubleshooting

如果遇到本部分中未列出的问题,请使用 “报告问题 ”工具告知我们。

XAML 设计器停止工作

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

另请参阅