如何在 XAML 设计器中预览 ItemTemplate

Question

假设我有一个用于 ListView 的简单 ItemTemplate

<ListView ItemsSource="{x:Bind ListItems}">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="local:TextItem">
            <TextBlock Text="{x:Bind Item}"/>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

^{MainPage.xaml}

当我运行该应用程序时，我得到一个填充有 TextBlocks 的 ListView - ListItems 中的每个项目都有一个（这是一个后面定义的变量）。但是，在 XAML 设计器中，我什么也看不到。

那么，有没有办法在 XAML 设计器中预览 ItemTemplate/DataTemplate，用一组占位符文本块替换 Text="{x:Bind Item}"？还是只预览一个 TextBlock？

---

这不是重复

• Design View of a DataTemplate in a ResourceDictionary in Visual Studio - 因为我不能使用 Blend。我查到的所有关于以某种方式使用 Blend 的信息都只是告诉我“此功能不适用于针对“Windows 10 Fall Creators Update (10.0; Build 16299)”的项目”

• Can I preview my DataTemplate(s) in my collection-based controls in the designer? - 好吧，也许是这样，但我不明白接受的答案，现在已经有几年了。包含针对我的问题量身定制的示例的答案将非常有帮助。

Answer 1

微软实际上在今年 4 月发布了一个（半有用的）教程：link

要求

无论你想显示什么，你都需要在你的 XAML 代码的顶部（如果你使用 VS 的模板创建页面，默认情况下应该在那里）：

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

一个简单的字符串列表

对于像字符串列表这样简单的东西，这样的东西可以正常工作（取自上面提到的 MSDN 页面）：

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

显示更复杂的东西

如果你想在你的代码中使用来自其他地方的数据源，它会变得有点难看：

首先，您需要设置数据上下文（通常在页面级别完成，但您也可以将其添加到要使用它的元素上）：

    d:DataContext="{d:DesignInstance
                  yournamespace:YourDataSourceClass,
                  IsDesignTimeCreatable=True}"

然后在 ListView 上添加：

d:ItemsSource="{Binding data}"

如果您使用的是 ItemTemplate，则需要为要从数据源中提取的所有内容添加“d:”变体。

完整示例代码：

XAML：

<Page
    x:Class="exampleApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:exampleApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
        d:DataContext="{d:DesignInstance local:DesignTimeData,
                                     IsDesignTimeCreatable=True}"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <Grid>
            <ListView ItemsSource="{x:Bind ListItems}" d:ItemsSource="{Binding DummyData}">
                <ListView.ItemTemplate>
                    <DataTemplate x:DataType="local:TextItem">
                        <TextBlock Text="{x:Bind Item}" d:Text="{Binding Item}"/>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </Grid>
    </Grid>
</Page>

C#：

using System.Collections.ObjectModel;
using Windows.UI.Xaml.Controls;

namespace exampleApp {
    public sealed partial class MainPage : Page {
        public ObservableCollection<TextItem> ListItems;
        public MainPage() {
            this.InitializeComponent();
            //populate you ListItems list
        }
    }
    public class TextItem {
        public string Item { get; set; }
    }
    public class DesignTimeData {
        public ObservableCollection<TextItem> DummyData { get; set; } = new ObservableCollection<TextItem> {
        new TextItem { Item = "foo" },
        new TextItem { Item = "bar" },
        new TextItem { Item = "bla" },
        new TextItem { Item = "blubb" }
        };
    }
}

备注

• 看来您必须使用“Binding”而不是“x:Bind”来进行设计时绑定。据我了解，x:Bind 使用编译时生成的代码工作，XAML 设计器不执行该代码
• 当您更改绑定声明或数据源代码时，您必须重新编译才能看到设计器中的更改。其他设计更改将实时反映
• 在某些方面，Binding 比 x:Bind 更受限制（特别是不能使用 Binding 绑定到类方法，只能使用 x:Bind）。在编写设计时数据时请记住这一点
• 遗憾的是，将设计时数据导入应用程序的一些更方便的方法仅是 WPF 和 Xamarin（Blends 的数据窗口、在 XAML 文件中声明的数据，尤其是 auto-generated sample data)

（所有内容均使用 Visual Studio 2019 版本 16.10.3 进行测试。）