FadeIn() Doesn't Seem to be working for me

Apr 10, 2013 at 5:18 AM
I have a set of Images that the user dynamically loads on to the canvas. I tried to add a FadeIn animation as the image is loaded on the Canvas but it doesn't seem to be working any ideas on how to get this to work

This is what i'm doing
// Add image to canvas
myCanvas.Children.Add(target);
await target.FadeIn();
I have a similar situation where i'm removing objects from the canvas
await target.FadeOut();
myCanvas.Children.Remove(target);
this works perfectly so i dont know what i'm doing wrong.
Coordinator
Apr 10, 2013 at 5:30 AM
I know, that's a bit weird. The FadeIn()/FadeOut() extension methods use FadeInThemeAnimation and FadeOutThemeAnimation which strangely change the opacity of the elements without affecting the actual Opacity property and you need to fade out an element before you can fade it in. You could probably call FadeOut() with a very short duration or maybe even 0s duration and then call FadeIn() or you can set the Opacity of an element to 0 and use FadeInCustom() extension instead which does actual Opacity animation, allows to specify an easing function and target opacity.
Apr 10, 2013 at 5:46 AM
I tried what you suggested but it didnt work
myCanvas.Children.Add(target);
await target.FadeOut(new TimeSpan(0, 0, 0, 0, 1));
await target.FadeIn();
and
target.Opacity = 0;
myCanvas.Children.Add(target);
await target.FadeInCustom(new TimeSpan(0,0,1), null, 1);
It just does what the original did which was wait 'x' ammount of time (specified by the timespan) and then it just pop in without any transition/FadeIn
Coordinator
Apr 10, 2013 at 5:58 AM
Oh, that's a different problem then. I'm guessing your images aren't loaded until after the animation was complete. There's actually also a solution for that in the toolkit - the ImageExtensions.FadeInOnLoaded attached property sets the Opacity of an Image control to 0 and fades it back in once the image is loaded. It does only work with Image controls that use BitmapImage as their source and it requires the ImageSource to be set before FadeInOnLoaded is set which should be fine in most cases.
You could also use the awaitable extension to wait for the image to complete loading before fading it in - you can check BitmapImageExtensions/WriteableBitmapExtensions.WaitForLoadedAsync() in the AwaitableUI namespace.
Apr 10, 2013 at 6:24 AM
Okay i got it to work using the above solution you presented but i had to do this first
var element = target as UIElement;
element.Opacity = 0.0;
 // Add image to canvas
myCanvas.Children.Add(element);
await element.FadeInCustom(new TimeSpan(0, 0, 0, 0, 500), null, 1);
It didn't seem to want to work on Image() control i was looking at the difference between my remove and add items and this was the only difference and it works now.

Thanks, wouldnt have gotten it to work without your help.
Coordinator
Apr 10, 2013 at 3:10 PM
Like I said - if the animation runs before the BitmapImage used as ImageSource of the Image is completely loaded - you won't see it.

Glad you got it working.