UWP 在XAML设计器中使用设计时数据

1. 功能解释

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

2. 使用此功能的前置条件

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

• 支持目标是适用于 .NET Core 的 Windows Presentation Foundation (WPF) 和 UWP 的 Windows 桌面项目。 如果已启用“适用于 .NET Framework 的新版 WPF XAML 设计器”预览功能，则此功能还可用于 .NET Framework。

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

3. 设计时数据基本信息

设计时数据是你设置的模拟数据，使控件更易于在 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。

<TextBox
    d:Text="解锁成就"
    Text="{x:Bind Name, Mode=OneWay}"/>

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

除了将d：与控件的属性结合之外，你也可将 d: 与任何 UWP 或 WPF .NET Core 控件结合使用。 即将其添加到控件本身。

        <d:TextBox
           Text="20 - 起床 (1/1)"/>

 

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

4. 在设计时预览图象

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

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

5. ListView的设计时数据

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

        <ListView ItemsSource="{Binding Items}" VerticalAlignment="Bottom">
            <d:ListView.Items>
                <ListViewItem>One</ListViewItem>
                <ListViewItem>Two</ListViewItem>
                <ListViewItem>Three</ListViewItem>
            </d:ListView.Items>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding ItemName}" d:Text="{Binding .}" />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

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

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

public class City
    {
        public string Name { get; set; }
        public string Country { get; set; }
    }

        <ListView ItemsSource="{Binding Items}" VerticalAlignment="Bottom">
            <d:ListView.Items>
                <local:City Name="NewYork" Country="America"/>
                <local:City Name="Tokyo" Country="Japan"/>
                <local:City Name="Guangzhou" Country="China"/>
            </d:ListView.Items>
            <ListView.ItemTemplate>
                <DataTemplate x:DataType="local:City">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="{Binding Name}" Margin="0,0,10,0" />
                        <TextBlock Text="{Binding Country}" />
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

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

本项目演示用的Xbox示例，已经托管到Github，https://github.com/hupo376787/XboxAchievements。

参考：https://docs.microsoft.com/zh-cn/visualstudio/xaml-tools/xaml-designtime-data?view=vs-2019