Question

In my WPF application I have a ListBox which I’m customising the ItemTemplate. Within my ItemTemplate, I have a border for the Selected Item which I am using a StoryBoard to fade in/out from 0 – 1, then 1 – 0.

I’m now trying to figure out how to make it loop.

I tried to simply add a second Trigger Proprty for when the Opacity Value was 0 but this ended up applying to all items in the ListBox, not just the selected item.

<Storyboard x:Key="FadeUpAndFlash">
<DoubleAnimation From="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Duration="0:0:1" FillBehavior="Stop"/></Storyboard>


<Border x:Name="HighlightBorder" BorderBrush="Yellow" BorderThickness="3" Margin="0,0,5,0" CornerRadius="10" ClipToBounds="True">
<Border.Style>
    <Style TargetType="{x:Type Border}">
        <Setter Property="Opacity" Value="0"/>
        <Style.Triggers>
            <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type ListBoxItem}},Path=IsSelected}" Value="True">
                <DataTrigger.Setters>
                    <Setter Property="Opacity" Value="1"/>
                </DataTrigger.Setters>
                <DataTrigger.EnterActions>
                    <BeginStoryboard Storyboard="{StaticResource FadeUpAndFlash}" Name="AnimateImageBorder" />
                </DataTrigger.EnterActions>
            </DataTrigger>
            <Trigger Property="Opacity" Value="1">
                <Trigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="0:0:2"/>
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.EnterActions>
            </Trigger>
        </Style.Triggers>
    </Style>
</Border.Style>

Any ideas how I can get the Storyboard to loop?

Answer 1

Use AutoReverse="True" in your DoubleAnimation.
And RepeatBehavior="Forever" if you want to make it endless.