WPF TextBlock animation blinking not working

Question

I have a WPF TextBlock. TextBlock is bound to a MVVM boolean property. I am trying to make it visible or not and blinking depending on this MVVM boolean property value. If it is true, I make it visible and show TextBlock blinking (I start storyboard animation), otherwise, I make it not visible and not blinking and I stop storyboard animation. Below the code not working. What is the problem?

<Window.Resources>
            <BooleanToVisibilityConverter x:Key="BoolToVis" />

            <Storyboard x:Key="BlinkingAnimation" Duration="0:0:1" RepeatBehavior="Forever">
                <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Background).(SolidColorBrush.Color)">
                    <DiscreteColorKeyFrame KeyTime="0:0:0" Value="Black" />
                    <DiscreteColorKeyFrame KeyTime="0:0:0.5" Value="Red" />
                </ColorAnimationUsingKeyFrames>
                <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)">
                    <DiscreteColorKeyFrame KeyTime="0:0:0" Value="Red" />
                    <DiscreteColorKeyFrame KeyTime="0:0:0.5" Value="Black" />
                </ColorAnimationUsingKeyFrames>
            </Storyboard>

            <Style x:Key="BlinkingAnimationStyle" TargetType="{x:Type TextBlock}">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding RelativeSource={x:Static RelativeSource.Self}, Path=BlinkOn}" Value="true">
                        <DataTrigger.EnterActions>                            
                            <BeginStoryboard x:Name="BlinkingAnimation_BeginStoryboard" Storyboard="{StaticResource BlinkingAnimation}" />                            
                        </DataTrigger.EnterActions>
                        <DataTrigger.ExitActions>
                            <RemoveStoryboard BeginStoryboardName="BlinkingAnimation_BeginStoryboard" />
                        </DataTrigger.ExitActions>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding RelativeSource={x:Static RelativeSource.Self}, Path=BlinkOn}" Value="false">
                        <DataTrigger.EnterActions>
                            <RemoveStoryboard BeginStoryboardName="BlinkingAnimation_BeginStoryboard" />
                        </DataTrigger.EnterActions>
                    </DataTrigger>
                </Style.Triggers>
            </Style> 
</Window.Resources>

<Border Visibility="{Binding Path=BlinkOn, Converter={StaticResource BoolToVis}}" BorderThickness="1" BorderBrush="Red" CornerRadius="5" Margin="5">
    <TextBlock x:Name="lblStoryboard" 
               Padding="5"                           
               Width="480"
               Style="{StaticResource BlinkingAnimationStyle}"
               Text="Hey there! I am Blinking!!!" 
               TextWrapping="WrapWithOverflow"
               Visibility="{Binding Path=BlinkOn, Converter={StaticResource BoolToVis}}">
    </TextBlock>
</Border>

View Model:

private bool _blinkOn = false;
public bool BlinkOn
{
    get
    {
        return _blinkOn;
    }

    set
    {
        if (_blinkOn== value) return;
        _blinkOn= value;

        OnPropertyChanged("BlinkOn");
    }
}

1) You use different properties AlertOn and BlinkOn and 2) for binding to a view-model property, you have to use the data context as binding source, not RelativeSource.Self — dymanoid
@dymanoid Oh my God! Very sorry! It was a mistake introduced when typing the example here. I have corrected in my question. Only BlinkOn property exists and it is bound to datatriggers, Border and TextBlock. Above example it is not working. — Ralph

mm8 mm8 · Accepted Answer · 2018-12-21T12:53:33

Your binding paths are invalid. You should remove RelativeSource={x:Static RelativeSource.Self}.
You need to set the Background and Foreground properties of the Label to SolidColorBrushes since your Storyboard is trying to animate these.

This should work:

<Style x:Key="BlinkingAnimationStyle" TargetType="{x:Type TextBlock}">
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
    <Setter Property="Background" Value="Transparent"/>
    <Style.Triggers>
        <DataTrigger Binding="{Binding Path=BlinkOn}" Value="true">
            <DataTrigger.EnterActions>
                <BeginStoryboard x:Name="BlinkingAnimation_BeginStoryboard" Storyboard="{StaticResource BlinkingAnimation}" />
            </DataTrigger.EnterActions>
            <DataTrigger.ExitActions>
                <RemoveStoryboard BeginStoryboardName="BlinkingAnimation_BeginStoryboard" />
            </DataTrigger.ExitActions>
        </DataTrigger>
        <DataTrigger Binding="{Binding Path=BlinkOn}" Value="false">
            <DataTrigger.EnterActions>
                <RemoveStoryboard BeginStoryboardName="BlinkingAnimation_BeginStoryboard" />
            </DataTrigger.EnterActions>
        </DataTrigger>
    </Style.Triggers>
</Style>

WPF TextBlock animation blinking not working

1 Answers