WPF DataGrid 行根据某个属性循环变色动画

XML 复制代码
<DataGrid.RowStyle>
    <Style TargetType="DataGridRow">
        <Setter Property="FocusVisualStyle" Value="{x:Null}" />
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="Background" Value="Transparent" />
        <Style.Triggers>
            <Trigger Property="IsSelected" Value="True">
                <Setter Property="Background" Value="Transparent" />
                <Setter Property="BorderBrush" Value="Transparent" />
            </Trigger>
            <DataTrigger Binding="{Binding IsActive}" Value="True">
                <DataTrigger.EnterActions>
                    <BeginStoryboard x:Name="BlinkStoryboard">
                        <Storyboard AutoReverse="True" RepeatBehavior="Forever">
                            <ColorAnimation
                                Storyboard.TargetProperty="(DataGridRow.Background).(SolidColorBrush.Color)"
                                To="#FF9999"
                                Duration="0:0:0.5" />
                        </Storyboard>
                    </BeginStoryboard>
                </DataTrigger.EnterActions>
                <DataTrigger.ExitActions>
                    <StopStoryboard BeginStoryboardName="BlinkStoryboard" />
                </DataTrigger.ExitActions>
            </DataTrigger>
        </Style.Triggers>
    </Style>
</DataGrid.RowStyle>

整体结构

复制代码
DataTrigger(数据触发器)
  ├── 触发条件:IsActive == True
  ├── EnterActions(进入动作):启动闪烁动画
  └── ExitActions(退出动作):停止闪烁动画

1. 触发条件

XML 复制代码
<DataTrigger Binding="{Binding IsActive}" Value="True">
  • 绑定当前行的 IsActive 属性

  • 当 IsActive == True 时,触发进入动作

  • 当 IsActive 从 True 变回 False 时,触发退出动作

2. 进入动作

XML 复制代码
<DataTrigger.EnterActions>
    <BeginStoryboard x:Name="BlinkStoryboard">
        <Storyboard AutoReverse="True" RepeatBehavior="Forever">
            <ColorAnimation
                Storyboard.TargetProperty="(DataGridRow.Background).(SolidColorBrush.Color)"
                To="#FF9999"
                Duration="0:0:0.5" />
        </Storyboard>
    </BeginStoryboard>
</DataTrigger.EnterActions>
元素 作用
BeginStoryboard 启动动画的容器
x:Name="BlinkStoryboard" 给这个动画命名,供 StopStoryboard 引用
Storyboard 故事板,容纳多个动画
AutoReverse="True" 动画自动反向播放
RepeatBehavior="Forever" 无限循环
ColorAnimation 颜色动画
TargetProperty 目标属性路径
To="#FF9999" 动画目标色(浅红)
Duration="0:0:0.5" 单程 0.5 秒

动画效果:

text

复制代码
原色 ──0.5s──→ #FF9999 ──0.5s──→ 原色 ──0.5s──→ #FF9999 → ...
        正向            反向            正向

因为 AutoReverse=True + RepeatBehavior=Forever,所以是来回闪烁。

3. 退出动作

复制代码
<DataTrigger.ExitActions>
    <StopStoryboard BeginStoryboardName="BlinkStoryboard" />
</DataTrigger.ExitActions>
元素 作用
StopStoryboard 停止动画
BeginStoryboardName 指定要停止哪个 BeginStoryboard

当 IsActive 变回 False 时:

  • 停止 BlinkStoryboard

  • 背景色恢复到动画开始前的值(Transparent)

4. TargetProperty 解析

XML 复制代码
Storyboard.TargetProperty="(DataGridRow.Background).(SolidColorBrush.Color)"

拆解:

复制代码
(DataGridRow.Background)        → 拿到 DataGridRow 的 Background 属性
        ↓
   它是一个 Brush
        ↓
(SolidColorBrush.Color)         → 拿到 Brush 的 Color 属性

前提 :Background 必须是 SolidColorBrush,否则路径会失败。

5. 完整流程

复制代码
IsActive = False
    ↓
IsActive = True
    ↓
EnterActions 触发
    ↓
BeginStoryboard 启动 BlinkStoryboard
    ↓
背景色:原色 → #FF9999 → 原色 → #FF9999 → ...(无限循环)
    ↓
IsActive = False
    ↓
ExitActions 触发
    ↓
StopStoryboard 停止 BlinkStoryboard
    ↓
背景色恢复
相关推荐
一条闲鱼_mytube2 天前
高并发短链接系统设计
wpf
一个天蝎座 白勺 程序猿3 天前
IoTDB集群扩容:从慌乱到从容的经验分享
数据库·wpf·时序数据库·iotdb
samble4 天前
从零搭建灌装监控系统(十三):报警系统设计,生命周期与通知
c#·wpf·mvvm·modbus·工业控制
samble5 天前
从零搭建灌装监控系统(十二):配置系统,原子写入与容错
c#·wpf·mvvm·modbus·工业控制
蜗牛互联网7 天前
OLMo-core 3的token gerrymandering提醒:MoE路由要按时间窗验收
java·人工智能·wpf
LateFrames7 天前
WPF 升级选型:用 .NET 8 还是 .NET 10
.net·wpf·.net8·.net10
samble8 天前
从零搭建灌装监控系统(十):生产追溯,条码触发自动记录
c#·wpf·mvvm·modbus·工业控制
SamChan9010 天前
PDF页面旋转与CropBox陷阱:译文回填位置总是错位的根因实测
python·ai·pdf·wpf
SamChan9011 天前
PDF翻译时页眉页脚总在捣乱?跨页重复文本块的检测与过滤实测
人工智能·python·ai·pdf·wpf