Using a FadeInThemeAnimation as a Transition in WinRT

Question

I am using an image hosted on a server in my C#/XAML WinRT app. When that image is downloaded, I want it to fade in. I noticed the FadeInThemeAnimation which is what I was hoping to use. But, I want to use it like a EntranceThemeTransition. Is there a way to do this? if so, how?

Allomorph

Answer 1

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

Apparently FadeInThemeAnimation is a special kind of animation that doesn't work on Opacity and Visibility as you may think, but on an item's RenderTransform. I've only managed to make it work when fading out the item first with FadeOutThemeAnimation.

But here's a workaround. In your XAML, add a Storyboard to your image's container's Resources, like this:

<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 an handler to the image's ImageOpened event:

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

And in code-behind:

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

Hope that helps :)

Bedplate

Personally I can't use this because it has code-behind. It appears there is STILL no reusable, simple way to do this. I mean, who ever has not wanted to fade an image in on load (even from disk). Unbelievable. – Haught

There is, you could create a new class that inherits from Image and encapsulates this behavior. You could also create an image behavior or attached dependency property. There are many ways to do this without code-behind. – Bedplate

Answer 2

Another approach is to create an attached behavior that "listens" to a boolean binding to fire 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();
        }
    }
}

In order to attach the behavior to a XAML DependencyObject (a Grid in this example) use the following:

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

Efficacy

Thanks. I like this approach with attachable properties. – Junejuneau

Answer 3

This is not the solution but I hope to help you,

In XAML use something like this:

<StackPanel>
    <StackPanel.Resources>
        <Storyboard x:Name="EnterStoryboard">
            <FadeOutThemeAnimation Storyboard.TargetName="MyImage" />
        </Storyboard>
        <Storyboard x:Name="ExitStoryboard">
            <FadeInThemeAnimation Storyboard.TargetName="MyImage" />
        </Storyboard>
    </StackPanel.Resources>
    <Image x:Name="MyImage"
           PointerEntered="MyImage_PointerEntered" 
           PointerExited="MyImage_PointerExited"   
           Fill="Blue" Width="200" Height="300" />
</StackPanel>

and in code:

private void MyImage_PointerEntered(object sender, PointerRoutedEventArgs e)
{
    EnterStoryboard.Begin();
}

private void MyImage_PointerExited(object sender, PointerRoutedEventArgs e)
{
    ExitStoryboard.Begin();
}

Asberry

This answer seems to come straight from the docs. So to add attribution, see: learn.microsoft.com/en-us/uwp/api/… – Lodie