how to get a Slide-In and Slide-out animation ? RRS feed

  • Question

  • Hi,

    i have a following Grid, occupies the entire height of the screen and is docked to the left of the screen like this 

    <Grid HorizontalAlignment="Left" >

    //There are other elements here 


    based on some action i want to slide-in/slide-out this grid item from the screen ( like the way AppBar shows up and gets hidden ) 

    how do i do this ? 

    i went through the AppBar ControlTemplate  


    but didnt quite understand how the slide-in is working - they are setting padding and thickness of the Border and i didnt quite get how it is related/affects the slide-in/out animation of the bar.

    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot"
    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource AppBarBottomBorderThemeThickness}" />
    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot"
    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource AppBarBottomThemePadding}" />

    i understand StoryBoard - i can do something like the following 



    // set the targetproperty as (UIElement.RenderTransform).(CompositeTransform.TranslateX)"  and give some value



    Is is right way to do ? in the above case, how do i set the value of X to the Width of the Grid ( i haven't specified any explicit width on my Grid and the width depends on the children ), so that it translate by the amount equal to width of the grid ? 



    • Edited by naiveCoder Thursday, June 6, 2013 2:38 PM
    Thursday, June 6, 2013 2:35 PM