.NET MAUI：如何基于ViewModel属性改变CollectionView项的背景色？

实现思路 #

通过**数据触发器（DataTrigger）**关联ViewModel的SelectedTime属性，判断当前按钮绑定的时间是否为选中状态，动态切换按钮样式。你的ViewModel代码无需修改，只需调整XAML部分即可。

修改后的页面代码 #

<CollectionView ItemsSource="{Binding Times}" ItemsLayout="VerticalGrid, 3" Margin="5">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <ContentView Padding="5">
                <!-- 设置默认样式，未选中时的外观 -->
                <Button Text="{Binding ., StringFormat='{0:hh:mm tt}'}"
                        Command="{Binding BindingContext.SelectTimeCommand, Source={RelativeSource AncestorType={x:Type ContentPage}}}"
                        CommandParameter="{Binding .}"
                        BackgroundColor="#E0E0E0"
                        TextColor="#333333"
                        CornerRadius="8">
                    <!-- 触发器：当SelectedTime等于当前按钮的时间时，切换选中样式 -->
                    <Button.Triggers>
                        <DataTrigger TargetType="Button"
                                     Binding="{Binding BindingContext.SelectedTime, Source={RelativeSource AncestorType={x:Type ContentPage}}}"
                                     Value="{Binding .}">
                            <Setter Property="BackgroundColor" Value="#1976D2" />
                            <Setter Property="TextColor" Value="White" />
                        </DataTrigger>
                    </Button.Triggers>
                </Button>
            </ContentView>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

关键细节说明 #

1. 默认样式：给按钮设置了未选中时的背景色、文本色和圆角，确保视觉统一。
2. 触发器逻辑：DataTrigger绑定页面ViewModel的SelectedTime，当该值与当前按钮绑定的DateTime完全匹配时，应用选中状态的样式。
3. 处理时间精度问题：如果SelectedTime包含秒、毫秒等额外精度（导致匹配失败），可以添加一个转换器只比较时分：
   • 先创建转换器类：

     using System.Globalization;
     using Microsoft.Maui.Controls;
     
     namespace YourAppNamespace
     {
         public class DateTimeToTimeOnlyConverter : IValueConverter
         {
             public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
             {
                 return value is DateTime dt ? new DateTime(1, 1, 1, dt.Hour, dt.Minute, 0) : value;
             }
     
             public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
             {
                 throw new NotImplementedException();
             }
         }
     }
     

   • 在页面资源中声明转换器：

     <ContentPage.Resources>
         <local:DateTimeToTimeOnlyConverter x:Key="TimeOnlyConverter" />
     </ContentPage.Resources>
     

   • 修改触发器的绑定：

     <DataTrigger TargetType="Button"
                  Binding="{Binding BindingContext.SelectedTime, Source={RelativeSource AncestorType={x:Type ContentPage}}, Converter={StaticResource TimeOnlyConverter}}"
                  Value="{Binding ., Converter={StaticResource TimeOnlyConverter}}">
     

验证要点 #

• 确认ViewModel的SelectedTime属性由[ObservableProperty]标记，确保属性变更时会触发UI更新（CommunityToolkit.Mvvm已经自动实现了INotifyPropertyChanged）。
• 点击按钮时，SelectTimeCommand正确设置SelectedTime，UI会自动触发样式切换。

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