locked
how to get a Slide-In and Slide-out animation ?

    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 

    </Grid>

    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  

    http://msdn.microsoft.com/en-us/library/windows/apps/jj710186.aspx

    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.

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

    i understand StoryBoard - i can do something like the following 

    <Grid.Resources>

    <StoryBoard>

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

    </StoryBoard>

    </Grid.Resources>

    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 ? 

    Thanks



    Raj



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