#1,202 – Using a Color Animation to Draw Emphasis to Something

There are times when you might want to draw a user’s attention to some user interface element, for example when some event causes the contents of the element to change. A ColorAnimation on the Background of the element is a nice way to do that.

Below, we have a TextBlock that binds to a string property and a Button that changes that property’s value. We set up a style for the TextBlock containing an EventTrigger that fires whenever the target of the binding changes, i.e. the trigger will fire whenever the value of the Text property changes.

In the trigger, we have a Storyboard continuing two animations that run consecutively. The first fades in the background color and the second fades back to the original transparent value. The first animation is shorter, so that we have a longer fade out.

Here’s the XAML fragement:

<Window.Resources>
    <ResourceDictionary>
        <Style x:Key="LookAtMe" TargetType="TextBlock">
            <Setter Property="Background" Value="Transparent"/>
            <Style.Triggers>
                <EventTrigger RoutedEvent="Binding.TargetUpdated">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation Storyboard.TargetProperty="(TextBlock.Background).(SolidColorBrush.Color)" 
                                                From="Transparent" To="Magenta" FillBehavior="Stop" 
                                                BeginTime="0:0:0" Duration="0:0:0.3"/>
                                <ColorAnimation Storyboard.TargetProperty="(TextBlock.Background).(SolidColorBrush.Color)" 
                                                From="Magenta" To="Transparent" 
                                                BeginTime="0:0:0.3" Duration="0:0:1"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </ResourceDictionary>
</Window.Resources>
    
    <StackPanel Margin="10">
        <TextBlock Text="{Binding SomeText, NotifyOnTargetUpdated=True}" 
                   Style="{StaticResource LookAtMe}"/>
        <Button Content="Do Something" 
                Margin="0,10,0,0" HorizontalAlignment="Center" 
                Click="btnDoSomething_Click"/>
    </StackPanel>

In the code-behind, we have the SomeText property and code to change this property whenever the button is pressed.

private string _someText = "Original text";
public string SomeText
{
    get { return _someText; }
    set
    {
        if (value != _someText)
        {
            _someText = value;
            RaisePropChanged("SomeText");
        }
    }
}

private int nextNum = 1;
private void btnDoSomething_Click(object sender, RoutedEventArgs e)
{
    SomeText = string.Format("Change to {0}", nextNum++);
}

public event PropertyChangedEventHandler PropertyChanged = delegate { };

private void RaisePropChanged(string propname)
{
    PropertyChanged(this, new PropertyChangedEventArgs(propname));
}

When you run this code, the background of the TextBlock flashes magenta whenever you click on the button.

About Sean
Software developer in the Twin Cities area, passionate about .NET technologies. Equally passionate about my own personal projects related to family history and preservation of family stories and photos.

One Response to #1,202 – Using a Color Animation to Draw Emphasis to Something

  1. Pingback: Dew Drop - March 20, 2017 (#2443) - Morning Dew

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: