如何在 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，使用一定数量的占位符 TextBlocks 和占位符文本替换Text="{x:Bind Item}" ？ 或者只是预览单个 TextBlock？

---

这不是重复

• Visual Studio 中 ResourceDictionary 中 DataTemplate 的设计视图- 因为我不能使用 Blend。 我查过的所有内容都说以某种方式使用 Blend 只会给我一条消息“此功能不适用于针对“Windows 10 Fall Creators Update (10.0; Build 16299)”的项目”

• 我可以在设计器的基于集合的控件中预览我的 DataTemplate(s) 吗？ - 好吧，也许是这样，但我不明白已接受的答案，现在已经有好几年了。 包含针对我的问题量身定制的示例的答案将非常有帮助。

Answer 1

很抱歉要破坏这个端口，但我一直在寻找同样的东西，实际上找到了答案。 由于这篇文章是谷歌搜索同一问题的最高结果，它可能对其他人有帮助。

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

要求：

无论你想显示什么，你都需要在你的 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" }
        };
    }
}

评论：

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

（所有内容均使用 VS2019 版本 16.10.3 测试）