如何为IsOversea=true的DataGrid行实现一次性悬停背景色动画？

1. 完善数据模型属性 #

确保你的数据实体包含以下核心属性：

• IsOversea：bool类型，标记该行是否为海外订单
• IsAdded：bool类型，标记该行是否为新增行（新增时设为true，后续可按需重置为false取消高亮）
• WaitDuration：TimeSpan类型，记录包裹等待配送的时长

2. 实现等待时长转颜色的转换器 #

创建IValueConverter子类，根据等待时长返回对应提示色：

public class WaitDurationToColorConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is not TimeSpan duration) return Colors.Transparent;
        
        var oneDay = TimeSpan.FromDays(1);
        var oneWeek = TimeSpan.FromDays(7);
        var oneMonth = TimeSpan.FromDays(30);

        return duration > oneMonth ? Colors.Red :
               duration > oneWeek ? Colors.Yellow :
               duration <= oneDay ? Colors.Green : Colors.Transparent;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

3. 配置DataGridRow的Style #

在XAML中定义DataGridRow样式，同时实现新增行高亮、满足条件的悬停动画：

<Window.Resources>
    <local:WaitDurationToColorConverter x:Key="WaitDurationToColorConverter"/>
    
    <Style TargetType="DataGridRow">
        <!-- 新增行初始亮色背景 -->
        <Style.Triggers>
            <DataTrigger Binding="{Binding IsAdded}" Value="True">
                <Setter Property="Background" Value="#FFF5F9FF"/>
            </DataTrigger>
            
            <!-- 仅IsOversea为true时，鼠标悬停触发一次背景过渡动画 -->
            <MultiTrigger>
                <MultiTrigger.Conditions>
                    <Condition Binding="{Binding IsOversea}" Value="True"/>
                    <Condition Property="IsMouseOver" Value="True"/>
                </MultiTrigger.Conditions>
                <MultiTrigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation 
                                Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
                                From="{Binding WaitDuration, Converter={StaticResource WaitDurationToColorConverter}}"
                                To="Transparent"
                                Duration="0:0:0.8"
                                FillBehavior="Stop"/>
                        </Storyboard>
                    </BeginStoryboard>
                </MultiTrigger.EnterActions>
            </MultiTrigger>
        </Style.Triggers>
    </Style>
</Window.Resources>

关键细节说明 #

• 新增行高亮：通过IsAdded属性触发的DataTrigger设置初始背景，后续取消高亮只需将IsAdded设为false。
• 动画触发条件：MultiTrigger同时判断IsOversea=true和IsMouseOver=true，确保只有海外订单行才会触发动画。
• 动画执行逻辑：FillBehavior="Stop"会在动画结束后恢复到动画前的背景状态；若希望结束后保持透明，可改为FillBehavior="HoldEnd"，但需注意再次触发需重置鼠标悬停状态。
• 起始色绑定：通过转换器直接从WaitDuration转换为对应颜色，替代之前“从当前色过渡”的逻辑，满足需求中的颜色规则。

内容的提问来源于stack exchange，提问作者Nguyễn Phan