WPF Animation with datatriggers - wpf

I have a rectangle which I am animating the backround colour of.
It should change to green each time a particular number goes up. And red when it goes dowm. If the number doesn't change for a while it slowly fades back to its default colour
So the animation changes th background from grey to red very quickly and then takes several seconds to fade back to grey.
I have added as DataTrigger which is bound to 1 or -1 depending on how the number has changed
The problem is that if the number keeps going up the animation does not get restarted.
e.g. if the sequence of numbers went 1, 2, 3, 4, 5. Then I would like the animation to restart at each number change
the code I am using is below
<Rectangle.Style>
<Style>
<Style.Triggers>
<DataTrigger Binding="{Binding BidChangeDirectionIndicator}"
Value="-1">
<DataTrigger.EnterActions>
<BeginStoryboard x:Name="bidDownStory">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0"
Value="#FF79797A" />
<EasingColorKeyFrame KeyTime="0:0:0.2"
Value="#FFF13B29" />
<EasingColorKeyFrame KeyTime="0:0:10.0"
Value="#FF79797A" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0"
Value="#FF2B2B2B" />
<EasingColorKeyFrame KeyTime="0:0:0.2"
Value="#FF3F0606" />
<EasingColorKeyFrame KeyTime="0:0:10.0"
Value="#FF2B2B2B" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<StopStoryboard BeginStoryboardName="bidDownStory" />
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
and the ViewModel I am binding to looks like this
private int _bidChangeDirectionIndicator;
public int BidChangeDirectionIndicator
{
get { return _bidChangeDirectionIndicator; }
set
{
_bidChangeDirectionIndicator = value;
RaisePropertyChanged("BidChangeDirectionIndicator");
}
}
....
public void Update(RateInfo rateInfo)
{
if (rateInfo.Bid != Bid)
{
BidChangeDirectionIndicator = Math.Sign(rateInfo.Bid - Bid);
}
}
The method gets called each time the number changes (this is done by a class which is listening to an external feed)

[Caveat: I have not had time to recreate and test this. I just thought it may help.]
The reason that the trigger does not fire is that the value does not change. When you, for instance, keep going up, the value of BidChangeDirectionIndicator remains 1.
Perhaps the simplest thing to do is to set it to another value (0), and then to the value you want.
public void Update(RateInfo rateInfo)
{
if (rateInfo.Bid != Bid)
{
BidChangeDirectionIndicator = Math.Sign(rateInfo.Bid - Bid);
}
else
{
BidChangeDirectionIndicator = 0;
BidChangeDirectionIndicator = rateInfo.Bid;
}
}

Related

Trying to animate the Path StrokeProperty throws Invalid operation exception

I have code when a certain value is reached, I want to flash the Stroke of the Path to Red. When I try to apply the animation like this, it says "''System.Windows.Media.Animation.DoubleAnimation' animation object cannot be used to animate property 'Stroke' because it is of incompatible type 'System.Windows.Media.Brush'.'" I also tried ColorAnimation and still a similar exception. Please help.
In the ControlTemplate of xaml I have Path defined as follows.
<ControlTemplate x:Key="FlaskProgressBarTemplate" TargetType="{x:Type local:FlaskProgressBar}">
<Grid>
<Path x:Name="Outline"
StrokeThickness="8"
Stroke="Black">
<Path.Data>
<PathGeometry Figures="M 20,15 L 20,60 0,110 60,110 40,60 40,15 Z"/>
</Path.Data>
</Path>
</Grid>
In the code behind on some method exceution,
private Path _contentPath;
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
_contentPath = this.GetTemplateChild("Outline") as Path;
SetValue(this, Value);
}
private static void SetValue(FlaskProgressBar instance, double value)
{
if (instance._content != null)
{
var rect = instance._content.Rect;
instance._content.Rect = new Rect(rect.X, rect.Height - value, rect.Width, rect.Height);
if (value == 100)
{
AnimateBorder(instance); //Error in this method.
}
}
}
private static void AnimateBorder(FlaskProgressBar instance)
{
var path = instance._contentPath;
if (path != null)
{
path.Stroke = new SolidColorBrush(Colors.Red);
var switchOnAnimation = new DoubleAnimation
{
To = 1,
Duration = TimeSpan.Zero,
BeginTime = TimeSpan.FromSeconds(0.5)
};
var blinkStoryboard = new Storyboard
{
Duration = TimeSpan.FromSeconds(1),
RepeatBehavior = RepeatBehavior.Forever
};
Storyboard.SetTarget(switchOnAnimation, path);
Storyboard.SetTargetProperty(switchOnAnimation, new PropertyPath(Path.StrokeProperty));
blinkStoryboard.Children.Add(switchOnAnimation);
path.BeginStoryboard(blinkStoryboard); //I get an exception on this line.
}
}
You can achieve a blinking effect by animating the brush's Opacity property (which is of type Double) rather than the brush itself.
This is the style from my BlinkingBorder class that featured in a recent blog post.
<Style TargetType="{x:Type vctrl:perBlinkingBorder}">
<Style.Triggers>
<Trigger Property="IsBlinking" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard TargetProperty="(BlinkingBorderBrush).Opacity">
<DoubleAnimation
AutoReverse="True"
RepeatBehavior="Forever"
From="1"
To="0"
Duration="0:0:0.5">
<DoubleAnimation.EasingFunction>
<SineEase EasingMode="EaseInOut" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>
</Style>

Calling an event for control on an inactive tab results in an exception

There is a control that has animation DoubleAnimationUsingPath, the animation is triggered by the event RoutedEvent = "ui:CheckBoxProgressCircle.Check"
<EventTrigger RoutedEvent="ui:CheckBoxProgressCircle.Check">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingPath Storyboard.TargetName="AnimatedTranslateTransform"
Storyboard.TargetProperty="X"
PathGeometry="{StaticResource CheckAnimationPath}"
Source="X"
Duration="0:0:.1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
In the code, I register the event:
static CheckBoxProgressCircle()
{
CheckEvent =
EventManager.RegisterRoutedEvent("Check", RoutingStrategy.Tunnel, typeof(RoutedEventHandler), typeof(CheckBoxProgressCircle));
}
public event RoutedEventHandler Check
{
add
{
AddHandler(CheckEvent, value);
}
remove
{
RemoveHandler(CheckEvent, value);
}
}
Then I call the event:
var newEventArgs = new RoutedEventArgs(CheckEvent);
RaiseEvent(newEventArgs);
If the control is on a tab that is active, everything works without errors, if the control is on a tab that has never become active, I get an error:
''AnimatedTranslateTransform' name cannot be found in the name scope of 'System.Windows.Controls.ControlTemplate'.'
I think this is due to the fact that the control did not render, because was on an inactive tab and does not have AnimatedTranslateTransform, how I can force wpf to render this element before the tab will become active? Or if I'm wrong, what can I do about it?
The solution turned out to be quite simple: you can call the ApplyTemplate () method; for this control.
https://msdn.microsoft.com/en-us/library/system.windows.frameworkelement.applytemplate.aspx

VisualStateManager can't generate transitions for ThicknessAnimations

I have the following Visual States defined:
<VisualStateManager.VisualStateGroups>
<VisualStateGroup Name="EditStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:2"/>
</VisualStateGroup.Transitions>
<VisualState Name="Editing" />
<VisualState Name="Normal">
<Storyboard>
<ThicknessAnimation Storyboard.TargetName="ViewBorder" Storyboard.TargetProperty="Margin" To="0" Duration="0"/>
<DoubleAnimation Storyboard.TargetName="Header" Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(ScaleTransform.ScaleY)" To="0" Duration="0"/>
<ColorAnimation Storyboard.TargetName="EditBorder" Storyboard.TargetProperty="Background.Color" To="Red" Duration="0"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
The DoubleAnimation and ColorAnimation work fine, with VisualStateManager generating transition animations over 2 seconds for them.
However, the ThicknessAnimation does not animate. Instead it snaps to the finish value at the end of the transition period.
Is there any way to get VisualStateManager to generate transitions for it, or am I going to be forced to supply manual transitions?
I analyzed the problem and fired up .NET Reflector and found that the VisualStateManager only supports the following animations:
ColorAnimation
DoubleAnimation
PointAnimation
It's kind of crappy, because it's not documented anywhere.
To prove that it cannot generate the animations take a look at the reversed code of the VisualStageManager.GenerateToAnimation method. There is also a VisualStageManager.GenerateFromAnimation that supports the same subset of animations.
private static Timeline GenerateToAnimation(FrameworkElement root, Timeline timeline, IEasingFunction easingFunction, bool isEntering)
{
Timeline destination = null;
if (destination == null)
{
var targetColor = GetTargetColor(timeline, isEntering);
if (targetColor.HasValue)
destination = new ColorAnimation { To = targetColor, EasingFunction = easingFunction };
}
if (destination == null)
{
var targetDouble = GetTargetDouble(timeline, isEntering);
if (targetDouble.HasValue)
destination = new DoubleAnimation { To = targetDouble, EasingFunction = easingFunction };
}
if (destination == null)
{
var targetPoint = GetTargetPoint(timeline, isEntering);
if (targetPoint.HasValue)
destination = new PointAnimation { To = targetPoint, EasingFunction = easingFunction };
}
if (destination != null)
CopyStoryboardTargetProperties(root, timeline, destination);
return destination;
}
Bottomline... You can only use Color, Double or Point animations in the VisualStageManager. Revert to old-fashioned triggers if you need something else...
Maybe your ThicknessAnimation statement is not complete, i search the flowing code sample from MSDN in the topic "ThicknessAnimation Class".
<ThicknessAnimation
Storyboard.TargetProperty="BorderThickness"
Duration="0:0:1.5" FillBehavior="HoldEnd" From="1,1,1,1" To="28,14,28,14" />
Hope this could help you...

How to trigger animation from one usercontrol from another?

I have an application where there is a MainWindow at the top level with multiple UserControls housed inside it. I have a Button on one UserControls and want to trigger an animation in another UserControls. How to go about it? I have tried with Blend but the timeline does not allow me to access the other UserControls.
In short, I want to display a UserControl (say X) beside my existing application that will fade in on a button click. The button click is in another user control say Y, and both the UserControl X and the UserControl Y are inside MainWindow. I hope I have made myself clear.
An example:
<local:TimeBox x:Name="timeBox">
<local:TimeBox.RenderTransform>
<TranslateTransform />
</local:TimeBox.RenderTransform>
</local:TimeBox>
<local:CustomComboBox>
<local:CustomComboBox.Triggers>
<EventTrigger RoutedEvent="local:CustomComboBox.ApplyClick">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.Target="{x:Reference timeBox}"
Storyboard.TargetProperty="RenderTransform.X"
From="-500" To="0" Duration="0:0:1">
<DoubleAnimation.EasingFunction>
<ExponentialEase Exponent="5" EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</local:CustomComboBox.Triggers>
</local:CustomComboBox>
Notes:
1 - The TranslateTransform cannot have a name so you need to navigate to it starting from the UserControl using RenderTransform.X
2 - The event that should trigger the animation needs to be a RoutedEvent, here is the code for the one i have:
public static RoutedEvent ApplyClickEvent = EventManager.RegisterRoutedEvent("ApplyClick",
RoutingStrategy.Bubble, typeof(RoutedEventHandler), typeof(CustomComboBox));
public event RoutedEventHandler ApplyClick
{
add { AddHandler(ApplyClickEvent, value); }
remove { RemoveHandler(ApplyClickEvent, value); }
}
//Pipes the event from an internal button.
private void Button_Apply_Click(object sender, RoutedEventArgs e)
{
RaiseEvent(new RoutedEventArgs(ApplyClickEvent, this));
}

Stopwatch for silverlight?

There is no StopWatch for Silverlight.
What would you use instead of it?
I saw some posts about people saying to create an empty animation and call GetCurrentTime() from the Storyboard class, I couldn't get it to work...
What would you do?
This is what I did. Its simple and worked very well for me:
long before = DateTime.Now.Ticks;
DoTheTaskThatNeedsMeasurement();
long after = DateTime.Now.Ticks;
TimeSpan elapsedTime = new TimeSpan(after - before);
MessageBox.Show(string.Format("Task took {0} milliseconds",
elapsedTime.TotalMilliseconds));
All you needed to do was keep one long variable holding the total ticks before beginning the target task.
See my watch at here. Source code is here. And two articles about it are here and here. The Silverlight animation model lends itself well to a stopwatch.
alt text http://xmldocs.net/ball2/background.png
<Storyboard x:Name="Run" RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="SecondHand" x:Name="SecondAnimation"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" RepeatBehavior="Forever">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:01:00" Value="360"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="MinuteHand"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" RepeatBehavior="Forever">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeyTime="01:00:00" Value="360"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="HourHand"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" RepeatBehavior="Forever">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeyTime="12:00:00" Value="360"/>
and the code to run that storyboard is here:
private void RunWatch()
{
var time = DateTime.Now;
Run.Begin();
Run.Seek(new TimeSpan(time.Hour, time.Minute, time.Second));
}
Here is a Stopwatch replacement class that you can add to your project.
There's a few things you could do with this. The fist is use something like the Environment.TickCount like the person here. However, something that I think may work better is to make use of a DispatcherTimer.
To set up a DispatcherTimer to work like a stopwatch we'll also need an associated TimeSpan representing the time it is run. We can instantiate the DispatcherTimer and set the interval that it times, and the handler for the Tick event.
DispatcherTimer _timer;
TimeSpan _time;
public Page()
{
InitializeComponent();
_timer = new DispatcherTimer();
_timer.Interval = new TimeSpan(0, 0, 0, 0, 10);
_timer.Tick += new EventHandler(OnTimerTick);
}
In the UI we can create something simple to start and stop our timer, as well as display the stopwatch data:
<StackPanel>
<Button Content="Start" x:Name="uiStart" Click="OnStartClick" />
<Button Content="Stop" x:Name="uiStop" Click="OnStopClick" />
<TextBlock x:Name="uiDisplay"/>
</StackPanel>
Now, all that is left is the event handlers.
The OnTimerTick handler will incrementing and display our stopwatch data.
Our Start handler will take care of initalizing/reinitalizing our TimeSpan, while the Stop handler will just stop the DispatcherTimer.
void OnTimerTick(object sender, EventArgs e)
{
_time = _time.Add(new TimeSpan(0, 0, 0, 0, 10));
display.Text = _time.ToString();
}
private void OnStartClick(object sender, RoutedEventArgs e)
{
_time = new TimeSpan(0,0,0,0,0);
_timer.Start();
}
private void OnStopClick(object sender, RoutedEventArgs e)
{
_timer.Stop();
}

Resources