WPF Listview row background blinking effect

Question

I use WPF with a ListView control.

When a certain parameter is set to True i want the row in the ListView to have a blinking animation.

I have the following code which works but the animation stops once the mouse is over the row with the animation.

I want the animation to continue until the parameter is changed back to False.

<ListView.ItemContainerStyle>
    <Style TargetType="ListViewItem">
        <Setter Property="IsSelected" Value="{Binding Selected}"/>
        <Style.Triggers>
            <DataTrigger Binding="{Binding DoBlink}" Value="True">
                <DataTrigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard FillBehavior="Stop">
                            <ColorAnimation Storyboard.TargetProperty="(Control.Background).(SolidColorBrush.Color)" 
                                            From="Blue" To="LightBlue" Duration="0:0:0.2"
                                            AutoReverse="True" RepeatBehavior="Forever" />
                        </Storyboard>
                    </BeginStoryboard>
                </DataTrigger.EnterActions>
            </DataTrigger>
        </Style.Triggers>
    </Style>
</ListView.ItemContainerStyle>

Answer 1

This situation will require a MultiDataTrigger. Try something like this.

<Style
        TargetType="{x:Type ListViewItem}">
        <Setter Property="IsSelected" Value="{Binding Selected}"/>
        <Setter
            Property="Template">
            <Setter.Value>
                <ControlTemplate
                    TargetType="{x:Type ListViewItem}">
                    <Border
                        Name="Border"
                        SnapsToDevicePixels="True"
                        Padding="2,2,2,2"
                        Background="Transparent">
                        <ContentPresenter />
                    </Border>
                    <ControlTemplate.Triggers>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition
                                    Binding="{Binding RelativeSource={RelativeSource Mode=Self}, Path=IsMouseOver}"
                                    Value="True" />
                     <Condition
                        Binding="{Binding DoBlink}"
                        Value="True" />
                            </MultiDataTrigger.Conditions>
                            <MultiDataTrigger.EnterActions>
                                <BeginStoryboard
                                    Name="Flash">
                                    <Storyboard
                                        FillBehavior="Stop">
                                        <ColorAnimation
                                            Storyboard.TargetProperty="Background.Color"
                                            Storyboard.TargetName="Border"
                                            From="Blue"
                                            To="LightBlue"
                                            Duration="0:0:0.2"
                                            AutoReverse="True"
                                            RepeatBehavior="Forever" />

                                    </Storyboard>
                                </BeginStoryboard>
                            </MultiDataTrigger.EnterActions>
                        </MultiDataTrigger>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition
                                    Binding="{Binding RelativeSource={RelativeSource Mode=Self}, Path=IsMouseOver}"
                                    Value="False" />
                                <Condition
                                    Binding="{Binding DoBlink}"
                                    Value="True" />
                            </MultiDataTrigger.Conditions>
                            <MultiDataTrigger.EnterActions>
                                <StopStoryboard
                                    BeginStoryboardName="Flash" />
                            </MultiDataTrigger.EnterActions>
                        </MultiDataTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style> 

You will also need to use a MultiDataTrigger to stop the animation when the condition match when you would like it to stop.

EDIT: You can read about MultiDataTriggers here

EDIT 2: I have modified the code to work with a control template and added a set of conditions to stop the animation when another item is selected.

EDIT 3: Remove unneeded IsSelected condition.