ListView项触发网络事件时背景闪烁实现问题求助

问题分析 #

你的实现存在几个关键问题导致闪烁效果不生效：

1. Border无初始背景色：ColorAnimation需要目标元素有一个SolidColorBrush作为背景，原代码中Border的Background默认是null，动画无法找到目标属性路径。
2. Flashing属性未重置：设置Flashing = true后没有重置为false，导致StateTrigger仅触发一次，动画执行后不会重复激活。
3. 动画触发逻辑不完整：单次AutoReverse动画执行完毕后，状态仍处于激活状态，无法再次触发闪烁。

修正方案 #

1. 修改MainWindow.xaml，添加初始背景并确保动画路径有效 #

<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="FlashingTest.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:FlashingTest"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Title="FlashingTest">
    <ListView ItemsSource="{x:Bind ViewModel.Items}">
        <ListView.ItemTemplate>
            <DataTemplate x:DataType="local:TestItemViewModel">
                <!-- 添加初始Background，确保ColorAnimation有目标Brush -->
                <Border
                    Margin="0,2,0,0"
                    MinHeight="30"
                    MinWidth="300"
                    Background="White">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="FlashingStates">
                            <VisualState x:Name="NormalState"/>
                            <VisualState x:Name="FlashingState">
                                <VisualState.StateTriggers>
                                    <!-- 绑定Flashing属性，OneWay模式确保属性变化触发状态切换 -->
                                    <StateTrigger IsActive="{Binding Flashing, Mode=OneWay}" />
                                </VisualState.StateTriggers>
                                <Storyboard>
                                    <ColorAnimation 
                                        Duration="0:0:0.3"
                                        Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"
                                        To="GreenYellow"
                                        AutoReverse="True"
                                        FillBehavior="Stop"/>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <TextBlock Text="{x:Bind Text}" />
                </Border>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Window>

2. 修改TestItemViewModel.cs，添加Flashing属性自动重置逻辑 #

public class TestItemViewModel : INotifyPropertyChanged
{
    private readonly DispatcherTimer _timer;
    private bool _flashing = false;

    public event PropertyChangedEventHandler PropertyChanged;

    public bool Flashing
    {
        get => _flashing;
        set => SetProperty(ref _flashing, value);
    }

    public TestItemViewModel()
    {
        _timer = new DispatcherTimer();
        _timer.Interval = TimeSpan.FromMilliseconds(250);
        _timer.Tick += (s, e) =>
        {
            if (Random.Shared.Next() % 3 == 0)
            {
                Flashing = true;
                // 延迟重置Flashing，让完整的闪烁动画执行完毕
                var resetTimer = new DispatcherTimer { Interval = TimeSpan.FromMilliseconds(600) };
                resetTimer.Tick += (_, __) =>
                {
                    Flashing = false;
                    resetTimer.Stop();
                };
                resetTimer.Start();
            }
        };
        _timer.Start();
    }

    public string Text
    {
        get; set;
    }

    protected void SetProperty<T>(ref T field, T value, [CallerMemberName] string propertyName = null)
    {
        if (EqualityComparer<T>.Default.Equals(field, value)) return;
        field = value;
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

修改说明 #

• 添加初始Background：给Border设置Background="White"，确保ColorAnimation能找到有效的SolidColorBrush目标。
• 自动重置Flashing：每次设置Flashing = true后，用一个短计时器延迟将其重置为false，这样StateTrigger会反复触发状态切换，实现多次闪烁效果。
• 优化动画属性：给ColorAnimation添加FillBehavior="Stop"，确保动画结束后背景色回到初始状态，避免残留。
• 完善SetProperty方法：添加值相等判断，避免不必要的PropertyChanged事件触发。

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