We Keep Coding

How to dynamically choose TextBlock animation type in wpf?

I would like to create simple animation which type is based on some value. I need to change color of text in TextBlock control, but the target color is depending on bounded variable. I've already created 2 DataTriggers and depending on a value of my bounded variable, a proper animation should start. At the beginning everything seems to work properly (AnimationValue is equal to 0 on start), when the value changes to 1, animation runs, then value returns to 0. The problem is, when the value turns to 2 (Animation with another color also runs) and then again 0, the first animation is not going to run anymore but the second one still works in a proper way.
<Border
Grid.Column="0"
Background="Transparent">
<TextBlock
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="32"
Foreground="White"
Text="MyText">
<TextBlock.Style>
<Style>
<Style.Triggers>
<DataTrigger Binding="{Binding Path=AnimationValue}" Value="1">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetProperty="Foreground.Color"
To="Gray"
Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetProperty="Foreground.Color"
To="White"
Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
<DataTrigger Binding="{Binding Path=AnimationValue}" Value="2">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetProperty="Foreground.Color"
To="Firebrick"
Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetProperty="Foreground.Color"
To="White"
Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</Border>
There is no problem with setting a correct value - i've checked it using a debugger and everytime correct value is set. 0 is always between 1 and 2. DataContext is also not a problem - a connection between View and ViewModel is not being broken. I've noticed that broken animation is always the first one in xaml file. Now the "Gray" animation stops working correctly, but if i change order in xaml file, firebrick animation will be the broken one. Thanks for any help.

It looks like running StoryBoards in triggers is a weird thing. I don't have a technical explanation as to how they behave but here is a SO question where I found an answer for you.
Here is some code based on the answer above that works:
<Style>
<Style.Triggers>
<DataTrigger Binding="{Binding Path=AnimationValue}" Value="0">
<DataTrigger.EnterActions>
<StopStoryboard BeginStoryboardName="Animation1" />
<StopStoryboard BeginStoryboardName="Animation2" />
<BeginStoryboard x:Name="Animation0">
<Storyboard>
<ColorAnimation
Storyboard.TargetProperty="Foreground.Color"
To="White"
Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
<DataTrigger Binding="{Binding Path=AnimationValue}" Value="1">
<DataTrigger.EnterActions>
<StopStoryboard BeginStoryboardName="Animation0" />
<StopStoryboard BeginStoryboardName="Animation2" />
<BeginStoryboard x:Name="Animation1">
<Storyboard>
<ColorAnimation
Storyboard.TargetProperty="Foreground.Color"
To="Gray"
Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
<DataTrigger Binding="{Binding Path=AnimationValue}" Value="2">
<DataTrigger.EnterActions>
<StopStoryboard BeginStoryboardName="Animation0" />
<StopStoryboard BeginStoryboardName="Animation1" />
<BeginStoryboard x:Name="Animation2">
<Storyboard>
<ColorAnimation
Storyboard.TargetProperty="Foreground.Color"
To="Firebrick"
Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>

Datatrigger auto reverse color

I want to change the background color to red instantly if a property is true. Then revert slowly back to default background color.
My first attempt, problem: Default color appears instantly and not reverting slowly over time
<DataTrigger Binding="{Binding HasValueChanged}" Value="True">
<Setter Property="Background" Value="Red" />
</DataTrigger>
<DataTrigger Binding="{Binding HasValueChanged}" Value="False">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="Background.(SolidColorBrush.Color)" Duration="0:0:5" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
My second attempt, problem: Color reverses like it should, but never goes red again if the property remains true
<DataTrigger Binding="{Binding HasValueChanged}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation To="Red" AutoReverse="True" Storyboard.TargetProperty="Background.(SolidColorBrush.Color)" Duration="0:0:5" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>

As long as you don't set a Timeline's FillBehavior to Stop, it keeps holding the final property value until it is replaced by another Timeline.
So this works:
<DataTrigger Binding="{Binding HasValueChanged}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="Background.Color"
To="Red" Duration="0"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="Background.Color"
From="Red" Duration="0:0:1"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>

Bind animations to ViewModel property

I've got a "flip card"-style animation that works just fine. On one side, it has a button that, when clicked, triggers the animation "FlipOpen":
<Button Content="click me" Height="130">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click" >
<BeginStoryboard Storyboard="{StaticResource FlipOpen}">
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
<Storyboard x:Key="FlipOpen">
<DoubleAnimation Duration="00:00:0.5" Storyboard.TargetProperty="RenderTransform.ScaleX" From="-1" To="1" Storyboard.TargetName="Back"/>
<DoubleAnimation Duration="00:00:0.5" Storyboard.TargetProperty="RenderTransform.ScaleX" From="1" To="-1" Storyboard.TargetName="Front"/>
</Storyboard>
<Storyboard x:Key="FlipClose">
<DoubleAnimation Duration="00:00:0.5" Storyboard.TargetProperty="RenderTransform.ScaleX" From="1" To="-1" Storyboard.TargetName="Back"/>
<DoubleAnimation Duration="00:00:0.5" Storyboard.TargetProperty="RenderTransform.ScaleX" From="-1" To="1" Storyboard.TargetName="Front"/>
</Storyboard>
I would like to bind the animation to a boolean property on my ViewModel and I have tried to use DataTriggers:
a) define a style:
<Style x:Key="myStyle">
<Style.Triggers>
<DataTrigger Binding="{Binding FlipTheCard}" Value="true">
<DataTrigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource FlipOpen}"/>
</DataTrigger.EnterActions>
</DataTrigger>
<DataTrigger Binding="{Binding FlipTheCard}" Value="false">
<DataTrigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource FlipClose}"/>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
b) apply it to both Grid-Containers that contain the front and back:
<Grid RenderTransformOrigin="0.5,0.5" x:Name="Back" Opacity="0" Style="{StaticResource myStyle}">
...
</Grid>
c) don't start the animation on button click, but bind a command that toggles the boolean to the button:
<Button Content="click me!" Command="{Binding ToggleFlipCard}" Height="130">
However, this results in an exception ("A storyboard-structure within a Style can not have a TargetName. Remove the TargetName").
What am I doing wrong here? How can I bind these animations to a boolean property on my ViewModel?
Thank you for any help!

I've also found a solution...it's far from perfect on the animation side (as I don't use keyframes and just scale the x property of both at the same time) but it should give you the idea:
Style:
<Storyboard x:Key="FlipOpen">
<DoubleAnimation Duration="0:0:0.3"
Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleX)"
To="0" />
</Storyboard>
<Storyboard x:Key="FlipClose">
<DoubleAnimation Duration="0:0:0.3"
Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleX)"
From="0"
To="1" />
</Storyboard>
<Style x:Key="GridStyle" TargetType="Grid">
<Setter Property="RenderTransformOrigin" Value="0.5,0.5" />
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform ScaleX="1" ScaleY="1" />
</Setter.Value>
</Setter>
</Style>
<Style x:Key="FrontGridStyle" TargetType="Grid"
BasedOn="{StaticResource GridStyle}">
<Style.Triggers>
<DataTrigger Binding="{Binding FlipTheCard}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource FlipOpen}" />
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource FlipClose}" />
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
<Style x:Key="BackGridStyle" TargetType="Grid"
BasedOn="{StaticResource GridStyle}">
<Style.Triggers>
<DataTrigger Binding="{Binding FlipTheCard}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource FlipClose}" />
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource FlipOpen}" />
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
Grid:
<Grid>
<Grid Style="{StaticResource FrontGridStyle}">
<Border Width="100"
Height="100"
Background="Red" />
<Button HorizontalAlignment="Center"
VerticalAlignment="Center"
Command="{Binding ToggleFlipCard}"
Content="click me!" />
</Grid>
<Grid Style="{StaticResource BackGridStyle}">
<Border Width="100"
Height="100"
Background="Green" />
<Button HorizontalAlignment="Center"
VerticalAlignment="Center"
Command="{Binding ToggleFlipCard}"
Content="click me!" />
</Grid>
</Grid>

I found a solution.. yikes
reference Microsoft.Expression.Interactions.dll
define Interaction-Triggers:
<i:Interaction.Triggers>
<ei:DataTrigger Binding="{Binding FlipToFront}" Value="true">
<ei:ControlStoryboardAction Storyboard="{StaticResource FlipOpen}"/>
</ei:DataTrigger>
<ei:DataTrigger Binding="{Binding FlipToFront}" Value="false">
<ei:ControlStoryboardAction Storyboard="{StaticResource FlipClose}"/>
</ei:DataTrigger>
</i:Interaction.Triggers>
credits

WPF Datatrigger firing on scroll

I have the following xaml
<DataGrid Name ="TheGrid" Margin="0,21,0,0" DataContext ="{Binding StreamItems}" ItemsSource="{Binding}" CanUserReorderColumns="True" CanUserResizeColumns="True"
CanUserResizeRows="False" CanUserSortColumns="True" AutoGenerateColumns="False" RowHeight="21">
<DataGrid.Resources>
<Style TargetType="DataGridCell" x:Key="FlashStyle">
<Style.Triggers>
<DataTrigger Binding="{Binding CurrentState}" Value="Idle" >
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard x:Name="BlinkIdle" >
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)">
<DiscreteColorKeyFrame Value="DarkOrchid" KeyTime="0:0:0" />
<DiscreteColorKeyFrame Value="DarkOrchid" KeyTime="0:0:5" />
<LinearColorKeyFrame Value="Transparent" KeyTime="0:0:8" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
<DataTrigger Binding="{Binding CurrentState}" Value="Streaming" >
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard x:Name="BlinkStreaming">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)">
<DiscreteColorKeyFrame Value="DarkGreen" KeyTime="0:0:0" />
<DiscreteColorKeyFrame Value="DarkGreen" KeyTime="0:0:5" />
<LinearColorKeyFrame Value="Transparent" KeyTime="0:0:8" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</DataGrid.Resources>
The problem i'm having, is when i scroll, or the user sorts columns, the animation is triggers. how do i tell the animation to trigger only once, when the data changes?

WPF TextBlock ColorAnimation

I am totally new with WPF animations, and for the moment I face big problems with this.
I have a TextBlock for which, as long as a property to my view model has a specific value, I want to run a ColorAnimation to its background color. When the value to my property changes I want the background color for my TextBlock to return back to the original one (probably Transparent). Here is what I discovered so far, but it still not working as I described.
<TextBlock Text="{Binding DatabaseTasks.Count, StringFormat= 'Count: {0}'}" VerticalAlignment="Center" Background="Transparent">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Style.Triggers>
<DataTrigger Binding="{Binding IsIdle}" Value="False">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard Storyboard.TargetProperty="(TextBlock.Background).(SolidColorBrush.Color)">
<ColorAnimation RepeatBehavior="Forever"
FillBehavior="Stop"
From="Red"
To="Transparent"
By="Blue"
Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
Can someone fix this?
Thank you in advance!
EDIT:
The binding works just fine and I tested it using a simple DataTrigger that just changes the background color. My problem is that animation does not stop and return to the orginal color. I am sure I miss something.

Adding the RemoveStoryboard tag should do it.
<Style TargetType="TextBlock">
<Style.Triggers>
<DataTrigger Binding="{Binding IsIdle}" Value="False">
<DataTrigger.EnterActions>
<BeginStoryboard x:Name="tt" >
<Storyboard Storyboard.TargetProperty="(TextBlock.Background).(SolidColorBrush.Color)">
<ColorAnimation RepeatBehavior="Forever"
FillBehavior="Stop"
From="Red"
To="Transparent"
By="Blue"
Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<RemoveStoryboard BeginStoryboardName="tt"></RemoveStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>