Using FadeInThemeAnimation as a Transition in WinRT

Question

I am using an image hosted on a server in my C # / XAML WinRT application. When this image is uploaded, I want it to fade. I noticed FadeInThemeAnimation , which I was hoping to use as well. But I want to use it as an EntranceThemeTransition . Is there any way to do this? if so, how?

Answer 1

I ran into the same problem but found a solution, I thought it might still be useful to share it.

Apparently FadeInThemeAnimation is a special kind of animation that does not work on opacity and visibility, as you think, but on the RenderTransform element. I managed to get it to work when you reset the element first with FadeOutThemeAnimation .

But here is a workaround. In your XAML, add a storyboard to your image container Resources, for example:

 <Grid> <Grid.Resources> <Storyboard x:Name="ImageFadeInStoryboard"> <DoubleAnimation From="0" To="1" Storyboard.TargetName="yourImage" Storyboard.TargetProperty="Opacity" Duration="0:0:0.6" /> </Storyboard> </Grid.Resources> <Image x:Name="yourImage" Source="{Binding ...}"/> ... 

Then add a handler to the ImageOpened event image:

 <Image x:Name="yourImage" Source="{Binding ...}" ImageOpened="OnImageOpened"/> 

And in encoding:

 private void OnImageOpened(object sender, RoutedEventArgs e) { ImageFadeInStoryboard.Begin(); } 

Hope that helps :)

Answer 2

Another approach is to create an attached behavior that “listens” for the logical binding to start the theme animation:

 static class VisibilityAnimationBehavior { public static readonly DependencyProperty IsVisibleProperty = DependencyProperty.RegisterAttached( "IsVisible", typeof( bool ), typeof( VisibilityAnimationBehavior ), new PropertyMetadata( true, IsVisibleChanged ) ); public static bool GetIsVisible( DependencyObject Target ) { return ( bool )Target.GetValue( IsVisibleProperty ); } public static void SetIsVisible( DependencyObject Target, bool Value ) { Target.SetValue( IsVisibleProperty, Value ); } static void IsVisibleChanged( DependencyObject Source, DependencyPropertyChangedEventArgs Arguments ) { bool OldValue = ( bool )Arguments.OldValue; bool NewValue = ( bool )Arguments.NewValue; DependencyObject ParentObject = Source as DependencyObject; if( ParentObject == null ) return; if( NewValue == true && OldValue != true ) { Storyboard TransitionStoryboard = new Storyboard(); Storyboard.SetTarget( TransitionStoryboard, ParentObject ); TransitionStoryboard.Children.Add( new FadeInThemeAnimation() ); TransitionStoryboard.Begin(); } else if( NewValue == false && OldValue != false ) { Storyboard TransitionStoryboard = new Storyboard(); Storyboard.SetTarget( TransitionStoryboard, ParentObject ); TransitionStoryboard.Children.Add( new FadeOutThemeAnimation() ); TransitionStoryboard.Begin(); } } } 

To associate the behavior with a XAML DependencyObject (mesh in this example), use the following:

 <Grid local:VisibilityAnimationBehavior.IsVisible="{Binding Path=TheBooleanBinding}">