Search code examples
c#wpfcoloranimation

WPF ColorAnimation BlinkAffect


I am using DataTemplate and the Background is bound to a Brush defined by the user.

As an example

 <DataTemplate x:Key="ColumnText">
        <TextBlock x:Name="TextCell"
                      Background="{Binding Column.CustBackground}" // DependencyProperty
                      IsReadOnly="True" />
        <DataTemplate.Triggers>
           <DataTrigger Binding="{Binding **SomeProperty**}" Value="True">
           //Animation Code Here
           //.....
            </DataTrigger>
        </DataTemplate.Triggers>
  1. I would like to have a blink effect which in my case can be defined as -> "Rapidly changing Background between two colors(current to new or any two)" for a certain number of times (lets say 5 times) at a certain speed.
  2. After the we have fined the blink effect. i would like to restore back to what ever the previous back ground was.
  3. Every time some property changes we repeat steps 1 & 2.

Would be great if someone could guide pointers / pusedo code on me on how this can be achieved.

Thank You.


Solution

  • a 5x blink example on a simple path-mousedown:

    .xaml

    <Window x:Class="WpfApplication13.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication13"
        xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
        xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Path Fill="Green" MouseDown="eventMarkerPath_MouseDown" Name="eventMarkerPath" 
      Data="M 5,15 L5,10 L10,0 L 0,0 L 5,10" >
            <Path.Resources>
                <Storyboard  x:Key="storyboard">
                    <ColorAnimationUsingKeyFrames RepeatBehavior="5x" Duration="0:0:0.3" AutoReverse="True"  Storyboard.TargetName="eventMarkerPath" Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)">
                        <EasingColorKeyFrame KeyTime="0" Value="Green" ></EasingColorKeyFrame>
                        <EasingColorKeyFrame KeyTime="0:0:0.150" Value="Blue"/>
                    </ColorAnimationUsingKeyFrames>
                </Storyboard>
            </Path.Resources>
    
            <i:Interaction.Triggers>
                <i:EventTrigger SourceObject="{Binding}" EventName="AnimationTriggerEvent">
                    <i:EventTrigger.Actions>
                        <ei:ControlStoryboardAction Storyboard="{StaticResource storyboard}" ControlStoryboardOption="Play"/>
                    </i:EventTrigger.Actions>
                </i:EventTrigger>
            </i:Interaction.Triggers>
          </Path>
    </Grid>
    </Window>
    

    .cs

    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            var animationItem = new MyItem();
            this.DataContext = animationItem;
        }
    
    
    
        private void eventMarkerPath_MouseDown(object sender, MouseButtonEventArgs e)
        {
            ((sender as FrameworkElement).DataContext as MyItem).CauseAnimation();
        }
    }
    
    public class MyItem
    {
        public void CauseAnimation()
        {
            if (this.AnimationTriggerEvent != null)
                this.AnimationTriggerEvent(this, null);
        }
    
        public event EventHandler AnimationTriggerEvent;
    }