I am using WPF and MVVM. I have a storyboard with a color animation triggering on some state in the ViewModel. If in the "Increased" state the storyboard will cause the item to flash green once. If in the "Decreased" state the storyboard will flash red once. If in the "Unchanged" state nothing will happen.
The problem I am having is if for any reason the state changes while the animation is running the animation will stop. E.g. I enter the the Increased state and the animation begins to flash green. Then the same property changes to Unchanged and the animation ceases immediately without ending.
Is there a way to have the animation run its course even though the value on which it is triggering has changed?
<Storyboard x:Key="ValueIncreasedStoryboard" AutoReverse="True">
<ColorAnimation
Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
To="{StaticResource ResourceKey=IncreasedColor}"
Duration="0:0:0.4" />
<ColorAnimation
Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"
To="{StaticResource ResourceKey=IncreasedColor}"
Duration="0:0:1" />
</Storyboard>
<DataTrigger Binding="{Binding Path=Status}" Value="{x:Static ViewModel:Status.Increased}">
<DataTrigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource ValueIncreasedStoryboard}" x:Name="ValueIncreased_Storyboard"/>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<RemoveStoryboard BeginStoryboardName="ValueIncreased_Storyboard"/>
</DataTrigger.ExitActions>
</DataTrigger>
SOLUTION:
A combination of deleting the exit action and setting the fill behavior to Stop.
Remove this lines:
<DataTrigger.ExitActions>
<RemoveStoryboard BeginStoryboardName="ValueIncreased_Storyboard"/>
</DataTrigger.ExitActions>
Then subscribe to Storyboard.Completed event. You may do it from XAML using EventSetter.
In Completed event handler remove storyboard.
Related
I'm drawing a Polygon on a Canvas as a battery indicator. If the battery percentage drops below a threshold value, the polygon should start a pulsing animation, if the percentage rises back above the threshold, the pulsing should stop. For that I am using a DataTrigger that binds to a bool in the view model that tells me whether or not to run the pulsing animation loop at the moment.
At first, the animation is off, and as soon as the percentage drops, it starts pulsing as intended. But when the percentage levels rise again, I can't find any way to make the pulsing animation stop.
This is my current XAML code:
<Polygon.Style>
<Style TargetType="Polygon">
<Style.Triggers>
<DataTrigger
Binding="{Binding IsLowPercentage}"
Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard Name="Pulse">
<Storyboard>
<DoubleAnimation
AutoReverse="True"
RepeatBehavior="Forever"
Storyboard.TargetProperty="Opacity"
From="1"
To="0.2" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<StopStoryboard BeginStoryboardName="Pulse" />
<!--<RemoveStoryboard BeginStoryboardName="Pulse" />-->
<!--<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>-->
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Polygon.Style>
I found two questions (1, 2) about this which have the same use-case, and StopStoryboard seems to do the trick for them, but not for me.
Next to StopStoryboard, I also tried RemoveStoryboard and another BeginStoryboard (because according to this answer a storyboard automatically stops if the same dependency propery is animated by a new storyboard). The regarding codes are shown in the commented part. I tested all combinations, that is Stop, Remove, Begin alone, Stop+Remove, Stop+Begin, Remove+Begin or Stop+Remove+Begin in combination, but nothing seems to work, the pulsing effect just continues forever.
I also considered different naming scopes as the issue, but my storyboards are even in closer naming scopes (same DataTrigger) than this example using StopStoryboard from Microsoft themselves, and my code is also very similar to this other example from Microsoft, but my animation is endless.
I have validated that the bool is in fact set to true or false respectively, and I see that all other values bound to the same view model are displaying the updated values from that view model, so that should be fine.
Everybody seems to be fine using StopStoryboard, but something about my code is wrong so it doesn't work for me.
<DataTemplate>
<StackPanel Name="stack" Background="PaleTurquoise">
<Grid>
<Slider Name="sld" Value="{Binding TimeLeft}" />
</Grid>
</StackPanel>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding ElementName=sld, Path=Value}" Value="0">
<DataTrigger.EnterActions>
<BeginStoryboard Name="flash">
<Storyboard TargetName="stack" Storyboard.TargetProperty="Background.(SolidColorBrush.Color)">
<ColorAnimation From="MediumSpringGreen" To="Crimson" Duration="0:0:0.1" AutoReverse="True" RepeatBehavior="0:0:5"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<RemoveStoryboard BeginStoryboardName="flash"/>
</DataTrigger.ExitActions>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
This is a cut down version of the xaml inside my alarm application. When the value of the slider hits 0 the ColorAnimation is triggered which animates the background of the StackPanel in which the Slider is contained.
However I want the Color of the Background to revert to the previous value (PaleTurquoise) when the flashing ends. How do I accomplish this in xaml?
As a further question, how can I get the DataTrigger to not fire when the application is first loaded even though TimeLeft in my ViewModel is 0 on initialization?
In the end I made a StaticResource for the default colour of the background and put another ColorAnimation after the first one thus:
<ColorAnimation To="{StaticResource alarmBackgroundColour}" BeginTime="0:0:5"/>
To answer the second part of getting the trigger to not fire on startup I hacked around it by making a ValueConverter return 1 for the first call only.
Any better solutions are welcome.
relatively simple question that I am struggling to find a nice elegant solution to. I have a grid with a column that displays values that update every n seconds. I wish to show an animation when the value changes and flash the cell in different colours based on if the number is negative or positive. Found a whole host of methods that do almost what I want, but nothing that exactly matches my needs.
Using an EventTrigger I can make a cell flash every time an update occurs. Using a relatively simple animation below. But I am unable to make the colour the animation uses conditional as the storyboard freezes the UI elements, so I cannot use binding in the storyboard to define the colour.
<EventTrigger RoutedEvent="Binding.TargetUpdated">
<BeginStoryboard HandoffBehavior="Compose" Name="GreenCell">
<Storyboard TargetProperty="(TextBlock.Background).(SolidColorBrush.Color)">
<ColorAnimation Duration="0:0:1.50" From="Green" To="Transparent" AutoReverse="False"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
Using a DataTrigger I can make the cell colour conditional by creating a Converter that converts the updates to this Value and if the value is negative and then binding a data trigger to this and setting the background colour when this changes. But if the number is already negative, and remains negative (but changes) the trigger is not fired.
<DataTrigger Binding="{Binding Value, Converter={StaticResource cellBackGroundConverter}}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard HandoffBehavior="Compose" Name="GreenCell">
<Storyboard TargetProperty="(TextBlock.Background).(SolidColorBrush.Color)">
<ColorAnimation Duration="0:0:1.50" From="Green" To="Transparent" AutoReverse="False"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
<DataTrigger Binding="{Binding Value, Converter={StaticResource cellBackGroundConverter}}" Value="False">
<DataTrigger.EnterActions>
<BeginStoryboard HandoffBehavior="Compose" Name="RedCell">
<Storyboard TargetProperty="(TextBlock.Background).(SolidColorBrush.Color)">
<ColorAnimation Duration="0:0:1.50" From="Red" To="Transparent" AutoReverse="False"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
What I require seems to be an event trigger, to capture every update and play the animation with the conditional aspect of the data trigger.
Surely I am missing something simple here, would love for someone to set me straight!
Many thanks
Matt
I want to create a datatrigger that makes my page blink (from transparent to red). So I created a DataTrigger that listens to a boolean flag within my viewmodel. This flag shall indicate whenever the user needs to be reminded. In that case, my page shall blink from transparent to red.
I was pretty sure that I have implemented the data trigger in a correct manner, but my app does nothing - no error, no blinking... So I must have something missed.
<Style x:Key="ReminderPage" TargetType="{x:Type ViewTemplates:TpApplicationBarView}" BasedOn="{StaticResource TpApplicationBarViewStyle}">
<Style.Triggers>
<!-- Reminder animation, when the time comes to remind the user -->
<DataTrigger Binding="{Binding IndicateReminderAnimation}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard x:Name="Blink">
<ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
AutoReverse="True"
From="Transparent"
To="Red"
Duration="0:0:1"
RepeatBehavior="Forever">
</ColorAnimation >
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
<DataTrigger Binding="{Binding IndicateReminderAnimation}" Value="False">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
AutoReverse="False"
To="Transparent"
Duration="0:0:1">
</ColorAnimation >
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
So, what do I have done wrong?
Update: I can see the following message in the output window:
System.Windows.Media.Animation Warning: 6 : Unable to perform action because
the specified Storyboard was never applied to this object for interactive control.;
Action='Stop'; Storyboard='System.Windows.Media.Animation.Storyboard';
Storyboard.HashCode='61356140'; Storyboard.Type='System.Windows.Media.Animation.Storyboard';
TargetElement='System.Windows.Media.Animation.Storyboard'; TargetElement.HashCode='61356140';
TargetElement.Type='System.Windows.Media.Animation.Storyboard'
Update2: After googling arround I found out, that it is a problem with the UI Thread. So I made a dispatcher call whenever I set the bound property. But even with this trick, there's no color animation. But the error in the output window seems to be vanished. So, I'm searching for further ideas on how to fix the animation.
Update3: It seems to be a general problem setting the background color of the page. But it's really strange. The Page is placed in a NavigationFrame. Setting the background color of the navigation frame will change the color of the application, but setting the background color of the page (even without any animation) won't change anything.
I think you will have to set the animations Target, something like this -
Storyboard.TargetName="yourWindowName"
You may have already checked this, but make sure that correct object is set as your TpApplicationBarView's DataContext(having IndicateReminderAnimation property).
I found the bug - or better the two bugs.
1.) It seems not be possible to change the background color of a page that is placed within a Navigation Frame.
So first was to move the binding and event to the MainWindow itself (wpf window class)
2.) The Style that contains the data trigger did not work. After googling around I found a working solution for what I'm searching for.
<Storyboard x:Key="RemindUser" >
<ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
AutoReverse="True"
From="Transparent"
To="{StaticResource WinAccentBackgroundColor}"
Duration="0:0:1"
RepeatBehavior="Forever">
</ColorAnimation >
</Storyboard>
<Storyboard x:Key="StopRemindUser">
<ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
AutoReverse="True"
To="Transparent"
Duration="0:0:1">
</ColorAnimation >
</Storyboard>
<Style x:Key="ReminderWindow" TargetType="{x:Type Metro:SnappedTransparentWindow}" BasedOn="{StaticResource TransparentWindow}">
<Style.Triggers>
<!-- Reminder animation, when the time comes to remind the user -->
<DataTrigger Binding="{Binding IndicateReminderAnimation}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource RemindUser}"/>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource StopRemindUser}"/>
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
The key was to split the binding and storyboard into different parts.
I would like to do something that is seemingly quite simple, but I cannot figure out how to do it. I have a ColorAnimation that is triggered when the MouseEnter event occurs. It simply changes the background color of a Border from one color to another color.
Unfortunately, I can't figure out how to put anything but hardcoded colors into this ColorAnimation. So it looks currently like this:
<Style x:Key="MouseOverStyle">
<Style.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.5" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
To="Red" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
However, I'd like do something either like this:
<SolidColorBrush x:Key="MyEventColor" Color="{Binding EventColor}" />
<Style x:Key="MouseOverStyle">
<Style.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.5" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
To="{StaticResource MyEventColor}" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
Or like this:
<Style x:Key="MouseOverStyle">
<Style.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.5" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
To="{Binding EventColor}" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
When I try to do either of those, an exception gets thrown. For the first, it throws an exception telling me essentially that the "Color" property can't take a SolidColorBrush value...which makes sense...but it certainly doesn't help me out because the ColorAnimation won't let me animate the "(Border.Background).(SolidColorBrush)" property...it will only let me animate the "(Border.Background).(SolidColorBrush.Color)" property....
The exception on the second example basically tells me that it "Cannot freeze this Storyboard timeline tree for use across threads" ...so it sounds like the ColorAnimation is trying to do this binding in some other thread than the UI thread or something? Whatever it's trying to do...it isn't working.
How the heck can I do such a simple task?
For the first one, you could use {StaticResource MyColor} with MyColor defined as such:
<Color x:Key="MyColor">#FF00FF00</Color>
However, this doesn't solve your problem: you can't bind to animation properties since those properties need to be frozen (unchangeable) for the animation to work. Either try to remove your dependence on a binding, or recreate the storyboard with the correct color from code behind when the color changes.