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?

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 :)