如何为类邮件收件箱应用实现日期分隔（今日/明日）并适配MVVM？

嘿，这个需求我在做一款类邮件应用的时候刚好碰过，完全能在MVVM模式下优雅搞定，给你三个靠谱的思路，按需选就行：

1. 用CollectionViewSource做分组绑定（最通用的XAML方案） #

这是WPF/MAUI/UWP这类XAML框架里最常用的方式，核心是把ViewModel里的消息按日期分组，然后通过分组模板来渲染日期分隔线，完全贴合MVVM：

步骤： #

• 首先在ViewModel里准备分组数据：创建一个DateGroup类，包含日期标题（比如"今天"/"昨天"/"2024-05-20"）和该日期下的消息集合；然后把原始的ObservableCollection<Message>转换成分组后的ObservableCollection<DateGroup>。

  public class DateGroup
  {
      public string DateHeader { get; set; }
      public ObservableCollection<Message> Messages { get; set; } = new();
  }
  
  // 在ViewModel里处理分组逻辑
  public ObservableCollection<DateGroup> GroupedMessages { get; } = new();
  
  private void GroupMessagesByDate()
  {
      // 先按日期从新到旧排序
      var sortedMessages = Messages.OrderByDescending(m => m.SendTime);
      // 按日期分组（这里可以自定义日期格式，比如把同一天的归为一组）
      var groups = sortedMessages.GroupBy(m => m.SendTime.Date.ToString("yyyy-MM-dd"))
                                .Select(g => new DateGroup
                                {
                                    DateHeader = GetFriendlyDate(g.Key), // 转成"今天"这种友好显示
                                    Messages = new ObservableCollection<Message>(g)
                                });
      // 更新分组集合
      GroupedMessages.Clear();
      foreach (var group in groups)
          GroupedMessages.Add(group);
  }
  

• 然后在View里用CollectionViewSource绑定分组数据，配置GroupStyle来渲染日期分隔线：

  <CollectionViewSource x:Key="GroupedMessagesSource" 
                        Source="{Binding GroupedMessages}"
                        IsGroupingEnabled="True"/>
  
  <ItemsControl ItemsSource="{Binding Source={StaticResource GroupedMessagesSource}}">
      <!-- 分组头模板：就是你的日期分隔线 -->
      <ItemsControl.GroupStyle>
          <GroupStyle>
              <GroupStyle.HeaderTemplate>
                  <DataTemplate>
                      <Grid Background="#F5F5F5" Padding="12,8">
                          <TextBlock Text="{Binding DateHeader}" 
                                     FontSize="14" FontWeight="SemiBold"
                                     Foreground="#666"/>
                          <Rectangle Height="1" Fill="#E0E0E0" 
                                     VerticalAlignment="Bottom" Margin="0,8,0,0"/>
                      </Grid>
                  </DataTemplate>
              </GroupStyle.HeaderTemplate>
          </GroupStyle>
      </ItemsControl.GroupStyle>
      <!-- 消息项模板：你原来的DataTemplate -->
      <ItemsControl.ItemTemplate>
          <DataTemplate DataType="{x:Type local:Message}">
              <!-- 你的消息UI -->
          </DataTemplate>
      </ItemsControl.ItemTemplate>
  </ItemsControl>
  

这个方案的好处是逻辑清晰，ViewModel只负责数据分组，View负责展示，完全符合MVVM的职责分离。

2. 给消息模型加标记属性 + 数据触发器（轻量方案） #

如果不想做分组，也可以给每个Message模型加一个IsFirstInDay的布尔属性，标记它是不是当天的第一条消息，然后在View里用数据触发器来显示分隔线：

步骤： #

• 先给Message模型加属性（注意要实现INotifyPropertyChanged）：

  public class Message : INotifyPropertyChanged
  {
      // 原有属性：SendTime、Content等...
      private bool _isFirstInDay;
      public bool IsFirstInDay
      {
          get => _isFirstInDay;
          set { _isFirstInDay = value; OnPropertyChanged(); }
      }
  
      // INotifyPropertyChanged实现...
  }
  

• 在ViewModel里排序后遍历消息，给IsFirstInDay赋值：

  private void UpdateFirstInDayFlags()
  {
      var sortedMessages = Messages.OrderByDescending(m => m.SendTime).ToList();
      DateTime? lastDate = null;
      foreach (var msg in sortedMessages)
      {
          var currentDate = msg.SendTime.Date;
          msg.IsFirstInDay = !lastDate.HasValue || currentDate != lastDate.Value;
          lastDate = currentDate;
      }
  }
  

• 然后在View的ItemTemplate里，用DataTrigger判断IsFirstInDay，显示日期分隔线：

  <DataTemplate DataType="{x:Type local:Message}">
      <StackPanel>
          <!-- 日期分隔线：只有IsFirstInDay为true时显示 -->
          <Grid x:Name="DateSeparator" Visibility="Collapsed"
                Background="#F5F5F5" Padding="12,8">
              <TextBlock Text="{Binding SendTime, StringFormat='yyyy-MM-dd'}" 
                         FontSize="14" FontWeight="SemiBold" Foreground="#666"/>
              <Rectangle Height="1" Fill="#E0E0E0" 
                         VerticalAlignment="Bottom" Margin="0,8,0,0"/>
          </Grid>
          <!-- 你的消息内容UI -->
          <Border Padding="12" BorderBrush="#E0E0E0" BorderThickness="0,0,0,1">
              <!-- 消息标题、内容等 -->
          </Border>
      </StackPanel>
      <DataTemplate.Triggers>
          <DataTrigger Binding="{Binding IsFirstInDay}" Value="True">
              <Setter TargetName="DateSeparator" Property="Visibility" Value="Visible"/>
          </DataTrigger>
      </DataTemplate.Triggers>
  </DataTemplate>
  

这个方案更轻量，不需要额外的分组类，适合简单场景，同样保持MVVM——ViewModel只负责标记数据，View负责条件渲染。

3. 自定义布局控件/附加行为（进阶悬停头方案） #

如果想要类似iOS邮件那种滚动时日期头悬停在顶部的效果，就需要自定义ItemsPanel或者用附加行为来实现，这个稍微复杂一点，但也能保持MVVM：

核心思路是：

• 自定义一个继承自VirtualizingStackPanel的布局控件，在布局时检测当前可见的第一项，渲染悬停的日期头；
• ViewModel只需要提供排序后的原始消息集合，布局逻辑封装在控件里，不干扰ViewModel的职责。

这个方案适合追求更优用户体验的场景，不过需要对XAML布局有一定了解。

不管选哪个方案，核心都是ViewModel只负责数据的准备（分组/标记），View负责纯展示逻辑，完全不会破坏MVVM的特性，亲测好用！

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