How to Animate an Item with a Fade In Fade Out Effect

Question

Based upon certain criteria I need to fade in or fade out items at the top of my page screen. These items contain an Image and possibly some buttons in the future. I came across http://msdn.microsoft.com/en-us/library/windows/apps/xaml/windows.ui.xaml.media.animation.edgeuithemetransition.aspx for WP8.1, but how can I accomplish this in WP8.0?

Answer 1

You should use Blend to create your own custom animation.Fade in or out can be achieved by adjusting the opacity level of your controls. You can follow this link. Another one here link

As an example, if you want to apply fade in effect on an Image here is a sample code.

<phone:PhoneApplicationPage.Resources>
    <Storyboard x:Name="fadeInImage">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="image">
            <EasingDoubleKeyFrame KeyTime="0" Value="0.1"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.3"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0.5"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0.7"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="0.9"/>
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</phone:PhoneApplicationPage.Resources>

and for playing that animation call it when necessary,

fadeInImage.Begin();