WPF ColorAnimation BlinkAffect

79 views Asked by At

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.

1

There are 1 answers

0
Milan On BEST ANSWER

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;
}