Simple slide animation in silverlight

This is a simple storyboard that can be used for any of the controls like Grid, Image, Button, TextBox etc.

<Storyboard x:Name="SlideInStart">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="DetailsGrid">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:00.5" Value="-600"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="DetailsGrid">
                <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:00.5" Value="0.0"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>

In the above example, I am moving an object from position 0 to -600 (On sliding to left) and from 0 to 600 (On sliding to right). All you need is to add a render transform to the object you need to animate. You don't even need a canvas.

<Grid x:Name="DetailsGrid" Background="LemonChiffon" RenderTransformOrigin="0.5,0.5">
            <Grid.RenderTransform>
                <CompositeTransform/>
            </Grid.RenderTransform>
            <TextBlock Text="My Sample Application"/>
</Grid>

Click Here to get the sample source code

Comments