We Keep Coding

How to make a property value blinking?

I have a property called ResultChanged that bound a DataGrid item, and when the value is true the style applied on the DataGridCell will colorize the cell, so I need to blink the Cell of the DataGrid settings for 5 times the value of ResultChanged to true and false, this is my xaml design:
<DataGridTextColumn Header="{DynamicResource hour}" Binding="{Binding Result}">
<DataGridTextColumn.CellStyle>
<Style TargetType="{x:Type DataGridCell}" BasedOn="{StaticResource MaterialDesignDataGridCell}">
<Style.Triggers>
<DataTrigger Binding="{Binding ResultChanged}" Value="True">
<Setter Property="Background" Value="Orange" />
<Setter Property="Foreground" Value="Black" />
</DataTrigger>
<Style.Triggers>
</Style>
</DataGridTextColumn.CellStyle>
I tried to implement the logic in this way:
int i = 0;
bool blinkOn = false;
while (true)
{
if(!blinkOn)
{
mtc.ResultChanged = true;
blinkOn = false;
}
else
{
mtc.ResultChanged = false;
blinkOn = true;
}
i++;
System.Threading.Thread.Sleep(1000);
//Stop blinking after 5 times
if (i == 5)
break;
}
the problem is that the Cell will always colorized and I don't see any blinking, any idea?

Can you try this style for your DataGridCell ?
<DataGridTextColumn Header="{DynamicResource hour}" Binding="{Binding Result}">
<DataGridTextColumn.CellStyle>
<Style TargetType="{x:Type DataGridCell}" BasedOn="{StaticResource MaterialDesignDataGridCell}">
<Style.Triggers>
<DataTrigger Binding="{Binding ResultChanged}" Value="True" >
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard x:Name="Blink"
AutoReverse="True"
RepeatBehavior="5x">
<ColorAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="00:00:01"
Value="Orange" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames
BeginTime="00:00:00"
Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="00:00:01"
Value="Black" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</DataGridTextColumn.CellStyle>
</DataGridTextColumn>
The above style will AutoReverse itself. If you want to have the Orange color stay after the animation, you can set AutoReverse to False. But this will not get the same Easing action on reverse.
If you prefer to have the Easing action on reverse, you can introduce another action (StoryBoard) to do that after the intial StoryBoard completes at 00:00:10. Like,
<DataGridTextColumn Header="{DynamicResource hour}" Binding="{Binding Result}">
<DataGridTextColumn.CellStyle>
<Style TargetType="{x:Type DataGridCell}" BasedOn="{StaticResource MaterialDesignDataGridCell}">
<Style.Triggers>
<DataTrigger Binding="{Binding ResultChanged}" Value="True" >
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<Storyboard x:Name="Blink"
AutoReverse="True"
RepeatBehavior="5x">
<ColorAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="00:00:01"
Value="Orange" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames
BeginTime="00:00:00"
Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="00:00:01"
Value="Black" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard AutoReverse="False">
<ColorAnimationUsingKeyFrames BeginTime="00:00:10" Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="00:00:01" Value="Orange" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</DataGridTextColumn.CellStyle>
</DataGridTextColumn>
You can play around the AutoReverse and BeginTime to your animation preference.

WPF Color Animation on data change

I am attempting to animate the background colour of a label on the data change of a property. The label is changing colour up to the value of 3. however if the property returns to a value of 1, the animation stays on the previous colour. My XAML is below.
<Style x:Key="Colors" TargetType="Label">
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Window},
Path=DataContext.ColorNo}" Value="1">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
To="Red"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Window},
Path=DataContext.ColorNo}" Value="2">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
To="Yellow"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Window},
Path=DataContext.ColorNo}" Value="3">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
To="Green"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
Label XAML
<Label x:Name="vClock" Content="{Binding Path=Clock,Mode=OneWay}" FontSize="25" Style="{StaticResource Colors}">
</Label>

I think you need to remove the other active storyboard first, but it's is better to proceed declaring your storyboard in the resources:
<Storyboard x:key="Value 1">
<ColorAnimation
Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
To="Red"/>
</Storyboard>
<Storyboard x:key="Value 2">
<ColorAnimation
Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
To="Yellow"/>
</Storyboard>
<Storyboard x:key="Value 3">
<ColorAnimation
Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
To="Green"/>
</Storyboard>
then look at the datatrigger
<Style x:Key="Colors" TargetType="Label">
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Window},
Path=DataContext.ColorNo}" Value="1">
<DataTrigger.EnterActions>
<StopStoryboard BeginStoryboardName="Value2" />
<StopStoryboard BeginStoryboardName="Value3" />
<BeginStoryboard Storyboard="{StaticResource Value1}"
x:Name="Value1" />
</DataTrigger.EnterActions>
</DataTrigger>
...
</Style.Triggers>
</Style>
Do the same for all the triggers

Storyboard in Style

In my application I have a lot of very large DataGridTemplateColumn-Definitions. For each column I'm defining a style. The style for example of two columns looks like:
<DataGridTemplateColumn.CellStyle>
<Style TargetType="{x:Type DataGridCell}" BasedOn="{StaticResource BaseDataGridCellStyle}">
<Setter Property="IsEditing"
Value="{Binding CurrentEditTarget, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged,
Converter={converters:EditConverter}, ConverterParameter={x:Static component:EditTarget.VariantPath}}" />
<Setter Property="BorderBrush" Value="Blue" />
<Style.Triggers>
<DataTrigger Binding="{Binding CurrentEditTarget}" Value="{x:Static component:EditTarget.VariantPath}">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ThicknessAnimation Storyboard.TargetProperty="(Border.BorderThickness)" FillBehavior="HoldEnd" From="4" To="0" Duration="0:0:0.5" >
<ThicknessAnimation.EasingFunction>
<PowerEase EasingMode="EaseOut"/>
</ThicknessAnimation.EasingFunction>
</ThicknessAnimation>
<ThicknessAnimation Storyboard.TargetProperty="(Border.Margin)" FillBehavior="HoldEnd" From="-20,0,20,0" To="0" Duration="0:0:0.5" >
<ThicknessAnimation.EasingFunction>
<PowerEase EasingMode="EaseOut"/>
</ThicknessAnimation.EasingFunction>
</ThicknessAnimation>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<Setter Property="attachedProperties:DataGridExtensions.FocusOnEditingColumn" Value="VariantPath"/>
</DataTrigger>
</Style.Triggers>
</Style>
</DataGridTemplateColumn.CellStyle>
-
<DataGridTemplateColumn.CellStyle>
<Style TargetType="{x:Type DataGridCell}" BasedOn="{StaticResource BaseDataGridCellStyle}">
<Setter Property="IsEditing"
Value="{Binding CurrentEditTarget, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged,
Converter={converters:EditConverter}, ConverterParameter={x:Static component:EditTarget.OriginalPath}}" />
<Setter Property="BorderBrush" Value="Blue" />
<Style.Triggers>
<DataTrigger Binding="{Binding CurrentEditTarget}" Value="{x:Static component:EditTarget.OriginalPath}">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ThicknessAnimation Storyboard.TargetProperty="(Border.BorderThickness)" FillBehavior="HoldEnd" From="4" To="0" Duration="0:0:0.5" >
<ThicknessAnimation.EasingFunction>
<PowerEase EasingMode="EaseOut"/>
</ThicknessAnimation.EasingFunction>
</ThicknessAnimation>
<ThicknessAnimation Storyboard.TargetProperty="(Border.Margin)" FillBehavior="HoldEnd" From="-20,0,20,0" To="0" Duration="0:0:0.5" >
<ThicknessAnimation.EasingFunction>
<PowerEase EasingMode="EaseOut"/>
</ThicknessAnimation.EasingFunction>
</ThicknessAnimation>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<Setter Property="attachedProperties:DataGridExtensions.FocusOnEditingColumn" Value="OriginalPath"/>
</DataTrigger>
</Style.Triggers>
</Style>
</DataGridTemplateColumn.CellStyle>
I was wondering if there is a way to extract the Storyboard into a style or resource or something else. Because this is the part of the style which is always the same for each DataGridTemplateColumn

How about this:
<Application.Resources>
<Storyboard x:Key="SB_Height" x:Shared="False">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)"
Storyboard.TargetName="{DynamicResource AnimationTarget}">
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="90">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase EasingMode="EaseOut" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Application.Resources>
<Button Name="mybutton" Content="Test" Height="20">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard Storyboard="{StaticResource SB_Height}"/>
</EventTrigger>
</Button.Triggers>
</Button>

WPF MultiDataTrigger animation incorrect behavior

I need a small square inside a Canvas to be animated depending on View-Model's properties, here's XAML
<Style x:Key="FlashingRectStyle">
<Style.Triggers>
<!-- HasPath & IsBig -->
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding Path=HasPath}" Value="True" />
<Condition Binding="{Binding Path=IsBig}" Value="True" />
</MultiDataTrigger.Conditions>
<MultiDataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Left)" Duration="0:0:3" RepeatBehavior="Forever">
<DiscreteDoubleKeyFrame Value="20" KeyTime="0:0:0" />
<DiscreteDoubleKeyFrame Value="20" KeyTime="0:0:1" />
<DiscreteDoubleKeyFrame Value="190" KeyTime="0:0:2" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Top)" Duration="0:0:3" RepeatBehavior="Forever">
<DiscreteDoubleKeyFrame Value="30" KeyTime="0:0:0" />
<DiscreteDoubleKeyFrame Value="115" KeyTime="0:0:1" />
<DiscreteDoubleKeyFrame Value="35" KeyTime="0:0:2" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</MultiDataTrigger.EnterActions>
</MultiDataTrigger>
<!-- HasPath & Not IsBig -->
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding Path=HasPath}" Value="True" />
<Condition Binding="{Binding Path=IsBig}" Value="False" />
</MultiDataTrigger.Conditions>
<MultiDataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Left)" Duration="0:0:3" RepeatBehavior="Forever">
<DiscreteDoubleKeyFrame Value="77" KeyTime="0:0:0" />
<DiscreteDoubleKeyFrame Value="73" KeyTime="0:0:1" />
<DiscreteDoubleKeyFrame Value="138" KeyTime="0:0:2" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Top)" Duration="0:0:3" RepeatBehavior="Forever">
<DiscreteDoubleKeyFrame Value="57" KeyTime="0:0:0" />
<DiscreteDoubleKeyFrame Value="97" KeyTime="0:0:1" />
<DiscreteDoubleKeyFrame Value="53" KeyTime="0:0:2" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</MultiDataTrigger.EnterActions>
</MultiDataTrigger>
<!-- Not HasPath-->
<DataTrigger Binding="{Binding Path=HasPath}" Value="False">
<Setter Property="Canvas.Left" Value="105" />
<Setter Property="Canvas.Top" Value="75" />
</DataTrigger>
</Style.Triggers>
</Style>
And usage
<Canvas>
<Rectangle Style="{StaticResource FlashingRectStyle}" Width="30" Height="20" />
</Canvas>
The defaults for HasPath and IsBig are both True and the first animation block "HasPath & IsBig" animates correct.
Also if I change IsBig to false "HasPath & Not IsBig" does begin animating. But if I then change back IsBig to true - nothing happens and "HasPath & Not IsBig" keeps animating. Also if I set HasPath to false it should fire "Not HasPath" but it doesn't. How do I make it switch animation on fly when properties changed?

You need to remove the previous storyboard in the ExitActions before adding a new one:
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding Path=HasPath}" Value="True" />
<Condition Binding="{Binding Path=IsBig}" Value="False" />
</MultiDataTrigger.Conditions>
<MultiDataTrigger.EnterActions>
<BeginStoryboard x:Name="BeginStoryboardName">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Left)"
Duration="0:0:3" RepeatBehavior="Forever">
<DiscreteDoubleKeyFrame Value="77" KeyTime="0:0:0" />
<DiscreteDoubleKeyFrame Value="73" KeyTime="0:0:1" />
<DiscreteDoubleKeyFrame Value="138" KeyTime="0:0:2" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Top)"
Duration="0:0:3" RepeatBehavior="Forever">
<DiscreteDoubleKeyFrame Value="57" KeyTime="0:0:0" />
<DiscreteDoubleKeyFrame Value="97" KeyTime="0:0:1" />
<DiscreteDoubleKeyFrame Value="53" KeyTime="0:0:2" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</MultiDataTrigger.EnterActions>
<MultiDataTrigger.ExitActions>
<RemoveStoryboard BeginStoryboardName="BeginStoryboardName"/>
</MultiDataTrigger.ExitActions>
</MultiDataTrigger>

Multiple storyboards on one property

I have multiple storyboards that access the same property (not at the same time). After one storyboard changed the property, the other one seems to have no access to it and does not change anything.. What can I do against this?
Sample:
<ListBox>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border Name="Border" BorderBrush="DarkGray" BorderThickness="1" Margin="3">
<ContentPresenter />
<Border.Background>
<SolidColorBrush />
</Border.Background>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="Border" Storyboard.TargetProperty="Background.Color" To="#3e8bff" Duration="0:0:0.1" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="Border" Storyboard.TargetProperty="Background.Color" To="White" Duration="0:0:0.1" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True" />
<Condition Property="IsSelected" Value="False" />
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="Border" Storyboard.TargetProperty="Background.Color" To="Orange" Duration="0:0:0.1" />
</Storyboard>
</BeginStoryboard>
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="Border" Storyboard.TargetProperty="Background.Color" To="White" Duration="0:0:0.1" />
</Storyboard>
</BeginStoryboard>
</MultiTrigger.ExitActions>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.Items>
<sys:String>hey</sys:String>
<sys:String>du</sys:String>
<sys:String>dux</sys:String>
<sys:String>duy</sys:String>
<sys:String>dua</sys:String>
</ListBox.Items>
</ListBox>
This is the smallest sample code I could make. After you've hovered an item, it won't turn blue when it's selected (try to click on one item and then use the arrow keys to select items without hovering them).

I have a solution!!! Triggers and actions order does matter... the answer is not to play more then one storyboard at the same time, just stop other.
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True"/>
<Condition Property="Selector.IsSelected" Value="False" />
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<StopStoryboard BeginStoryboardName="SelectedBegin" />
<StopStoryboard BeginStoryboardName="UnselectBegin" />
<BeginStoryboard x:Name="EnterBegin" Storyboard="{StaticResource MouseEnterSb}"/>
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<BeginStoryboard x:Name="LeaveBegin" Storyboard="{StaticResource MouseLeaveSb}"/>
</MultiTrigger.ExitActions>
</MultiTrigger>
<Trigger Property="Selector.IsSelected" Value="True">
<Trigger.EnterActions>
<StopStoryboard BeginStoryboardName="LeaveBegin" />
<StopStoryboard BeginStoryboardName="EnterBegin" />
<BeginStoryboard x:Name="SelectedBegin" Storyboard="{StaticResource SelectedSb}"/>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard x:Name="UnselectBegin" Storyboard="{StaticResource UnselectSb}"/>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>

I've been able to reproduce your erroneous results using the following code (I'm stumped too):
<ListBox>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<ControlTemplate.Resources>
<Storyboard x:Key="BorderAnimationToRed">
<ColorAnimation Storyboard.TargetName="Border" Storyboard.TargetProperty="Background.Color" To="Red" Duration="0:0:0.1" />
</Storyboard>
<Storyboard x:Key="BorderAnimationToBlue">
<ColorAnimation Storyboard.TargetName="Border" Storyboard.TargetProperty="Background.Color" To="Blue" Duration="0:0:0.1" />
</Storyboard>
<Storyboard x:Key="BorderAnimationToOrange">
<ColorAnimation Storyboard.TargetName="Border" Storyboard.TargetProperty="Background.Color" To="Orange" Duration="0:0:0.1" />
</Storyboard>
<Storyboard x:Key="BorderAnimationToWhite">
<ColorAnimation Storyboard.TargetName="Border" Storyboard.TargetProperty="Background.Color" To="White" Duration="0:0:0.1" />
</Storyboard>
</ControlTemplate.Resources>
<Border Name="Border" BorderBrush="DarkGray" BorderThickness="1" Margin="3">
<ContentPresenter />
<Border.Background>
<SolidColorBrush />
</Border.Background>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource BorderAnimationToOrange}"/>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource BorderAnimationToWhite}"/>
</Trigger.ExitActions>
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource BorderAnimationToBlue}"/>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource BorderAnimationToWhite}"/>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.Items>
<sys:String>hey</sys:String>
<sys:String>du</sys:String>
<sys:String>dux</sys:String>
<sys:String>duy</sys:String>
<sys:String>dua</sys:String>
</ListBox.Items>
This code is a little easier to read, as the visuals, resources, and triggers are declared separately. Maybe you could try to use EventTriggers to accomplish your goal (using the "ListBoxItem.MouseEnter" and "ListBoxItem.MouseLeave" routed events). Good luck!