Windows Phone 8 - Creating a “Fade-in and slide-in

Question

I've seen posts on here on how to create an Image slide-in effect, I am however currently trying to animate a TextBlock in a Windows Phone 8 project to "Slide-in and fade-in" both at the same time, just to give my app that "snazzy" feel. My current code targets the StoryBoard.Target Property for Opacity and that works, I'm just confused on how to animate both the opacity and I'm guessing for the "slide-in" effect it would be the "X" property of the TextBlock, both at the same time. The code I have currently for Opacity is as follows:

<phone:PhoneApplicationPage.Resources>
    <Storyboard x:Name="StoryBoard1">
        <DoubleAnimation Storyboard.TargetName="Txt2"
                         Storyboard.TargetProperty="Opacity"
                         From="0" To="1" Duration="0:0:1"
                         Completed="DoubleAnimation_Completed_1"/>
    </Storyboard>

Nice and simple, now how would I combine this with a "Slide-in" movement animation, could anyone guide me as to what changes I would need to make to the code to achieve the desired effect as stated previously? Any written out samples would be a big bonus.

Thanks in advance.

Answer 1

It can be tricky to animate a "slide-in", depending on the layout -- the problem is that you really need to animate X from "width of container", which can be harder than it sounds. But often it's good-enough just to hard-code a value.

So, if you have a Canvas, then you can simply animate Canvas.X. Otherwise, you'll have to add a TranslateTransform to the target element, and animate its X property.

<Grid>
    <TextBlock x:Name="Txt2" Text="foo">
        <TextBlock.RenderTransform>
            <TranslateTransform x:Name="translateTransform" X="500" />
        </TextBlock.RenderTransform>
    </TextBlock>
</Grid>

Then add the second animation to the Storyboard:

<Storyboard x:Name="StoryBoard1">
    <DoubleAnimation Storyboard.TargetName="Txt2"
                     Storyboard.TargetProperty="Opacity"
                     From="0" To="1" Duration="0:0:1"
                     Completed="DoubleAnimation_Completed_1"/>
    <DoubleAnimation Storyboard.TargetName="translateTransform"
                     Storyboard.TargetProperty="X"
                     From="500" To="0" Duration="0:0:1"/>
</Storyboard>