Making a WPF Label (or other element) flash using animation

Question

I have a label that I only make visible based on one of my ViewModel Properties. Here is the XAML:

<Label  HorizontalAlignment="Center" VerticalAlignment="Center"
        HorizontalContentAlignment="Center" 
        VerticalContentAlignment="Center" 
        FontSize="24" Width="200" Height="200" >
    <Label.Content >
        Option in the money! 
    </Label.Content>
    <Label.Style>
        <Style TargetType="{x:Type Label}">
            <Setter Property="Visibility" Value="Hidden" />
            <Style.Triggers>
                <DataTrigger Binding="{Binding OptionInMoney}" Value="True">
                    <Setter Property="Visibility"
                Value="Visible" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Label.Style>

</Label>

I'm not sure this is the best way, but in any case, I'd also like to have the label flashing. Clearly, I only want it flashing when it is visible. Can someone point me to some example code, or write a quick example to do this? I assume I need some sort of trigger, and an animation. Presumably I also need a trigger when the label is no longer visible so that I stop the animation?

Thanks, Dave P.S. Is there a good book or site for all these WPF tricks? Something like the "MFC Answer Book" for those that remember that book.

Answer 1

You could add a Storyboard animation to the Style.Resources and start it in the EnterActions section of the DataTrigger.

A simple DoubleAnimation on the Opacity should work fine

Something like this:

<Label.Style>
    <Style TargetType="{x:Type Label}">
        <Style.Resources>
            <Storyboard x:Key="flashAnimation" >
                <DoubleAnimation Storyboard.TargetProperty="Opacity" From="1" To="0" AutoReverse="True" Duration="0:0:0.5" RepeatBehavior="Forever" />
            </Storyboard>
        </Style.Resources>

        <Setter Property="Visibility" Value="Hidden" />
        <Style.Triggers>
            <DataTrigger Binding="{Binding OptionInMoney}" Value="True">
                <Setter Property="Visibility" Value="Visible" />
                <DataTrigger.EnterActions>
                    <BeginStoryboard Name="flash" Storyboard="{StaticResource flashAnimation}" />
                </DataTrigger.EnterActions>
                <DataTrigger.ExitActions>
                    <StopStoryboard BeginStoryboardName="flash"/>
                </DataTrigger.ExitActions>
            </DataTrigger>

        </Style.Triggers>
    </Style>
</Label.Style>