UWP C#中如何为ListView的每个项自定义UI或DataTemplate

以下是两种常用的落地实现方式，你已经提前写好对应UserControl的前提下可以直接接入：

方案1：DataTemplateSelector（兼容性最好，可控性强） #

实现步骤 #

• 先定义分层的数据模型，所有条目类型继承同一个基类，不同子类对应不同的成员属性：

// 公共基类
public abstract class PersonBase
{
    public string Name { get; set; }
    public int Age { get; set; }
}

// 成人类
public class Adult : PersonBase
{
    public string Spouse { get; set; }
    public List<PersonBase> Children { get; set; }
    public string WorkUnit { get; set; }
}

// 儿童类
public class Child : PersonBase
{
    public string School { get; set; }
}

• 自定义模板选择器类，继承DataTemplateSelector，根据数据类型返回对应模板：

public class PersonTemplateSelector : DataTemplateSelector
{
    // 暴露模板属性，在XAML中直接赋值
    public DataTemplate AdultTemplate { get; set; }
    public DataTemplate ChildTemplate { get; set; }

    // WinUI/UWP 重写该方法
    protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
    {
        if (item is Adult) return AdultTemplate;
        if (item is Child) return ChildTemplate;
        return base.SelectTemplateCore(item, container);
    }

    // 如果是WPF环境，替换为以下方法：
    // public override DataTemplate SelectTemplate(object item, DependencyObject container)
    // {
    //     if (item is Adult) return AdultTemplate;
    //     if (item is Child) return ChildTemplate;
    //     return base.SelectTemplate(item, container);
    // }
}

• 在页面资源中声明模板和选择器实例，直接复用你已经写好的UserControl：

<Page.Resources>
    <!-- 成人条目模板 -->
    <DataTemplate x:Key="AdultTemplate" x:DataType="local:Adult">
        <local:AdultUserControl DataContext="{Binding}"/>
    </DataTemplate>

    <!-- 儿童条目模板 -->
    <DataTemplate x:Key="ChildTemplate" x:DataType="local:Child">
        <local:ChildUserControl DataContext="{Binding}"/>
    </DataTemplate>

    <!-- 模板选择器实例 -->
    <local:PersonTemplateSelector x:Key="PersonTemplateSelector"
                                  AdultTemplate="{StaticResource AdultTemplate}"
                                  ChildTemplate="{StaticResource ChildTemplate}"/>
</Page.Resources>

• 给ListView指定模板选择器即可，后续添加条目时直接往绑定的集合中加对应类型的实例，框架会自动渲染对应UI：

<ListView ItemsSource="{Binding PersonList}"
          ItemTemplateSelector="{StaticResource PersonTemplateSelector}"/>

方案2：DataType自动匹配模板（代码最少，无需自定义选择器） #

如果不需要复杂的模板判断逻辑，仅需要按类型匹配，可以直接在资源中定义不带Key、仅指定DataType的DataTemplate，框架会自动匹配对应类型的条目：

<Page.Resources>
    <!-- 不需要指定x:Key，自动匹配Adult类型的条目 -->
    <DataTemplate x:DataType="local:Adult">
        <local:AdultUserControl DataContext="{Binding}"/>
    </DataTemplate>

    <!-- 自动匹配Child类型的条目 -->
    <DataTemplate x:DataType="local:Child">
        <local:ChildUserControl DataContext="{Binding}"/>
    </DataTemplate>
</Page.Resources>

<!-- ListView不需要额外指定模板相关属性 -->
<ListView ItemsSource="{Binding PersonList}"/>

注意：两种方案都不需要你手动创建/调用UserControl，只需要保证你添加到ListView绑定集合中的对象是对应类型的实例，UI层会自动加载对应的UserControl渲染。

内容的提问来源于stack exchange，提问作者Qaiser