某些布局很难可视化,而无需数据。 本文档将回顾处理桌面项目的开发人员可用于模拟 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!" />
在此示例中,如果没有 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>
上一个示例演示 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>
此处的好处是,可以将控件绑定到模型的设计时静态版本。
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 文件,并清理和重新生成项目。