在MAUI开发过程中，我们经常会遇到列表控件需要展示多种不同样式的子项场景，比如消息列表里区分文本消息、图片消息、系统提示消息，这时候静态设置的数据模板就无法满足需求，DataTemplateSelector就是用来解决这类动态模板选择问题的工具。
什么是DataTemplateSelector
DataTemplateSelector是MAUI中提供的一个基类，它的核心作用是根据绑定到列表项的数据对象的类型、属性值等条件，为不同的列表项返回对应的数据模板。开发者只需要继承这个类，重写对应的选择逻辑方法，就可以实现动态的模板分配。
它主要解决的是单一列表多样式展示的问题，避免了在列表项模板里写大量条件判断逻辑，让代码结构更清晰，也方便后续扩展新的列表项样式。
自定义DataTemplateSelector的步骤
1. 定义数据模型
首先我们需要定义列表对应的数据模型，这里以消息列表为例，先定义一个基类消息模型，再派生出不同类型的消息子类：
// 消息基类
public abstract class MessageBase
{
// 消息ID
public string Id { get; set; }
// 消息发送时间
public DateTime SendTime { get; set; }
}
// 文本消息模型
public class TextMessage : MessageBase
{
// 消息文本内容
public string Content { get; set; }
}
// 图片消息模型
public class ImageMessage : MessageBase
{
// 图片地址
public string ImageUrl { get; set; }
}
2. 创建数据模板
接下来为不同类型的消息分别定义对应的数据模板，模板里可以设置不同的布局和绑定不同的属性：
<ContentPage.Resources>
<!-- 文本消息模板 -->
<DataTemplate x:Key="TextMessageTemplate">
<VerticalStackLayout Padding="10">
<Label Text="文本消息" FontAttributes="Bold" TextColor="Blue"/>
<Label Text="{Binding Content}" FontSize="14"/>
<Label Text="{Binding SendTime, StringFormat='发送时间：{0:yyyy-MM-dd HH:mm}'}" FontSize="12" TextColor="Gray"/>
</VerticalStackLayout>
</DataTemplate>
<!-- 图片消息模板 -->
<DataTemplate x:Key="ImageMessageTemplate">
<VerticalStackLayout Padding="10">
<Label Text="图片消息" FontAttributes="Bold" TextColor="Green"/>
<Image Source="{Binding ImageUrl}" HeightRequest="150" Aspect="AspectFill"/>
<Label Text="{Binding SendTime, StringFormat='发送时间：{0:yyyy-MM-dd HH:mm}'}" FontSize="12" TextColor="Gray"/>
</VerticalStackLayout>
</DataTemplate>
</ContentPage.Resources>
3. 继承DataTemplateSelector实现选择逻辑
创建一个自定义的选择器类，继承DataTemplateSelector，重写OnSelectTemplate方法，在这个方法里根据数据对象的类型返回对应的模板：
using Microsoft.Maui.Controls;
// 自定义消息模板选择器
public class MessageTemplateSelector : DataTemplateSelector
{
// 文本消息模板属性，用于在XAML里赋值
public DataTemplate TextTemplate { get; set; }
// 图片消息模板属性，用于在XAML里赋值
public DataTemplate ImageTemplate { get; set; }
// 重写模板选择方法
protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
{
// 判断当前项的数据类型
if (item is TextMessage)
{
return TextTemplate;
}
else if (item is ImageMessage)
{
return ImageTemplate;
}
// 默认返回文本模板
return TextTemplate;
}
}
4. 在XAML中配置选择器并绑定到列表
在页面资源里声明我们自定义的选择器，把之前定义好的模板赋值给选择器的对应属性，然后把选择器绑定到CollectionView等列表控件的ItemTemplate属性上：
<ContentPage.Resources>
<!-- 引用自定义选择器 -->
<local:MessageTemplateSelector x:Key="MessageSelector"
TextTemplate="{StaticResource TextMessageTemplate}"
ImageTemplate="{StaticResource ImageMessageTemplate}"/>
</ContentPage.Resources>
<VerticalStackLayout>
<Label Text="消息列表" FontSize="20" FontAttributes="Bold" HorizontalOptions="Center" Padding="10"/>
<!-- 列表控件绑定选择器 -->
<CollectionView ItemsSource="{Binding MessageList}"
ItemTemplate="{StaticResource MessageSelector}"
VerticalOptions="FillAndExpand">
</CollectionView>
</VerticalStackLayout>
5. 准备数据源并测试
在页面的后台代码或者ViewModel里准备混合类型的消息列表数据，绑定到列表的ItemsSource：
public class MessageViewModel
{
public List<MessageBase> MessageList { get; set; }
public MessageViewModel()
{
// 初始化混合类型的消息数据
MessageList = new List<MessageBase>
{
new TextMessage
{
Id = "1",
Content = "今天天气不错",
SendTime = DateTime.Now.AddMinutes(-10)
},
new ImageMessage
{
Id = "2",
ImageUrl = "https://ipipp.com/sample.jpg",
SendTime = DateTime.Now.AddMinutes(-5)
},
new TextMessage
{
Id = "3",
Content = "周末一起去爬山吧",
SendTime = DateTime.Now
}
};
}
}
运行应用后，就可以看到列表里文本消息和图片消息分别使用了不同的模板展示，实现了动态模板选择的效果。
常见问题与注意事项
- 选择器的
OnSelectTemplate方法会被频繁调用，尽量不要在这个方法里写复杂的耗时逻辑，避免影响列表滚动性能。 - 如果需要根据数据的属性值而不是类型选择模板，比如根据消息的状态选择不同样式，可以在
OnSelectTemplate里判断对应属性的值返回模板即可。 - 模板必须提前定义好，并且正确赋值给选择器的对应属性，否则会出现模板为空的错误。
- 如果列表项有新增的类型，只需要新增对应的数据模型和模板，再在选择器的逻辑里加上新的判断分支即可，扩展性很好。
总结
MAUI的DataTemplateSelector是实现动态列表模板选择的核心工具，使用流程主要分为定义数据模型、创建对应模板、实现选择器逻辑、绑定到列表控件几个步骤。通过它可以将模板选择逻辑和数据展示逻辑分离，让代码更易维护，也能轻松应对多样式列表的展示需求。开发者可以根据实际业务场景灵活调整选择逻辑，满足不同的动态模板切换要求。
MAUIDataTemplateSelector动态列表数据模板选择修改时间：2026-07-12 07:33:31