Develop Reference

c# uwp animation make text flicker

I am creating a marquee animation for textblock. I have managed to do it with doubleanimation moving textblocks on canvas. But the problem is that text is flickering while moving each 0,5 seconds...
Here is the sample code I am using:
sb1 = new Storyboard();
DoubleAnimationUsingKeyFrames animationKeyFrames = new DoubleAnimationUsingKeyFrames();
var keyFrameStart = new EasingDoubleKeyFrame();
keyFrameStart.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(0));
keyFrameStart.Value = TextWidth;
var keyFrameEnd = new EasingDoubleKeyFrame();
keyFrameEnd.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(10000));
keyFrameEnd.Value = -TextWidth;
animationKeyFrames.KeyFrames.Add(keyFrameStart);
animationKeyFrames.KeyFrames.Add(keyFrameEnd);
Storyboard.SetTargetProperty(animationKeyFrames, "(Canvas.Left)");
Storyboard.SetTarget(animationKeyFrames, textBlock1);
sb1.RepeatBehavior = RepeatBehavior.Forever;
sb1.Children.Add(animationKeyFrames);
sb1.Begin();
Does anyone knows any property, some double buffer or something like that to override this problem?

Actually, this issue was more related to device performance. I've checked your code, there's no problem in your code.
I tested your code on different configuration of the machines. The "flicker" phenomenon was different.
There's a workaround for you to alleviate this issue.
You could alleviate this issue by setting more large duration (e.g, keyFrameEnd.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(20000));).

Apply a continuous animation to a Canvas in WPF

I want to apply a continuous FadeIn/FadeOut animation to a specific Canvas in my WPF.
I'm able to do the FadeOut part but then the FadeIn part executes immediately after that and ruins the animation.
I also want all of this to be in a smooth loop without interfering with my normal operations.
Look at it as an animated background.
What's the best method to do this? Should I use While? or should I use Timer? ...
var duration = new Duration(TimeSpan.FromMilliseconds(1000));
var fadeOut = new DoubleAnimation(0.0, duration);
var fadeIn = new DoubleAnimation(1.0, duration);
MyCanvas.BeginAnimation(OpacityProperty, fadeOut);
MyCanvas.BeginAnimation(OpacityProperty, fadeIn);

You can set the AutoReverse and RepeatBehavior properties of a single DoubleAnimation to get a continous effect:
var fadeInOutAnimation = new DoubleAnimation
{
From = 0,
To = 1,
Duration = TimeSpan.FromSeconds(1),
AutoReverse = true,
RepeatBehavior = RepeatBehavior.Forever,
};
MyCanvas.BeginAnimation(OpacityProperty, fadeInOutAnimation);
In your approach you would have to set the BeginTime property of the second animation to the Duration of the first one.

Apply easing function to animation behind code

I managed to build my storyboard behind code. I don't know how to add easing functions though. I am looking for something like:
DoubleAnimation FadelnTBAnimation = new DoubleAnimation();
FadelnTBAnimation.To = 0;
FadelnTBAnimation.BeginTime = TimeSpan.FromSeconds(0);
FadelnTBAnimation.Duration = new Duration(TimeSpan.FromSeconds(1));
FadelnTBAnimation.EasingFunction = EasingMode.EaseInOut; // this line gives an error
How could I apply easing functions with c#?
The reason why I find useful to build the storyboard with code Is because I am applying the same animation to several objects and sometimes it does not work when I bind the target property in XAML.

You need to create an instance of IEasingFunction (http://msdn.microsoft.com/en-us/library/system.windows.media.animation.ieasingfunction.aspx). There is a list of implementation classes at the bottom of that documentation entry, the most common of which is probably CubicEase or QuadraticEase.

There is a difference between the easing-function and the easing-mode.
Here is a short example for Win-8 (not WPF):
SineEase easingFunction = new SineEase();
easingFunction.EasingMode = EasingMode.EaseIn;
animation.EasingFunction = easingFunction;

A simple way to add the easing function in your case would be to just add it to the double animation.
FadelnTBAnimation.EasingFunction = new QuarticEase(); // for example

Not being able to animate TranslateTransform.XProperty with code

I have a method that enables me to animate objects that have to do with a DoubleAnimation:
public void animDouble(DependencyObject target, DependencyProperty property, double to, TimeSpan duration, double? from = null, TimeSpan? beginTime = null, IEasingFunction e = null)
{
DoubleAnimation animation = new DoubleAnimation();
animation.To = to;
if (beginTime == null)
beginTime = TimeSpan.FromSeconds(0);
if (from != null)
animation.From = from;
animation.BeginTime = beginTime;
animation.Duration = duration;
if (e != null)
animation.EasingFunction = e;
//start animating
Storyboard.SetTarget(animation, target); // what object will be animated?
Storyboard.SetTargetProperty(animation, new PropertyPath(property)); // what property will be animated
Storyboard sb = new Storyboard();
sb.Children.Add(animation);
sb.Begin();
}
so if I have a boarder called br1 for example and I want to animate it's height I will call the method as:
animDouble(br1, FrameworkElement.HeightProperty, 150, TimeSpan.FromSeconds(5));
if I want to animate it's width I will do:
animDouble(br1, FrameworkElement.WidthProperty, 150, TimeSpan.FromSeconds(5));
I could also animate it's visibility with the same method.
for some reason I am not able to animate its x property in order to translate it along the x axis or y-axis. When I call the method as:
a.animDouble(br1, TranslateTransform.XProperty, 150, TimeSpan.FromSeconds(5));
the boarder does not animates. I don't get any errors aether.

Somehow i would have expected an error, well, anyway, the Border owns no such property, if you want to move your control you need to set the RenderTransform or LayoutTransform of the border to a TranslateTransform, then you can pass the transform itself into the method as target.
(The whole storyboard is awfully redundant as you only have one animation, you can just call BeginAnimation on the target itself)

It had to do with registering the name. I found a link in here
I don't know what the method registerName does but I guess I needed it. from the page I managed to get the basic animations. I where not able to animate two things at once SOMETIMES. if you are interested in seeing the method take a look tat this question. I think it is a prety nice class that will enable to create animations with code. copy the namespace to visual studio and copy the first example that I posted so that you can see how it works.

WPF - synchronous animation

I have something this:
scaleTransform.BeginAnimation(ScaleTransform.ScaleXProperty, shrinkAnimation);
scaleTransform.BeginAnimation(ScaleTransform.ScaleYProperty, shrinkAnimation);
MyDialog.Show();
The animations run correctly in parallel (x and y shrink together), but because BeginAnimation is an asynchronous call, the Show() method gets executed while the animation is still running (suppose shrinkAnimation runs for 1 second).
How can I wait for animations to complete before calling Show()?
Thanks!

You can use a Storyboard, which has a completed event, instead of that BeginAnimation method. Here's an example, setting opacity, but it's the same concept:
DoubleAnimation animation = new DoubleAnimation(0.0, new Duration(TimeSpan.FromSeconds(1.0)));
Storyboard board = new Storyboard();
board.Children.Add(animation);
Storyboard.SetTarget(animation, MyButton);
Storyboard.SetTargetProperty(animation, new PropertyPath("(Opacity)"));
board.Completed += delegate
{
MessageBox.Show("DONE!");
};
board.Begin();