Animate a grid to move or slide WPF right

Question

I have a grid with elements in it. I want to move all of these elements, so you can’t just move the grid together? This does not affect what I see, and I tried even ScaleX and so well.

<Grid x:Name="HancockDetails" HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100" Grid.Column="1" RenderTransformOrigin="0.5,0.5"> <Rectangle HorizontalAlignment="Left" Height="100" Stroke="Black" VerticalAlignment="Top" Width="100"/> <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" Foreground="#FFF30000"/> </Grid> </Grid> </s:ScatterViewItem> 

My function:

 Storyboard sb = new Storyboard(); DoubleAnimation slide = new DoubleAnimation(); slide.To = 3000.0; slide.From = 0; slide.Duration = new Duration(TimeSpan.FromMilliseconds(40.0)); // Set the target of the animation Storyboard.SetTarget(slide,HancockDetails); Storyboard.SetTargetProperty(slide, new PropertyPath("RenderTransform.(ScaleTransform.ScaleY)")); // Kick the animation off sb.Children.Add(slide); sb.Begin(); 

Answer 1

You need to add RenderTransform to the markup first, otherwise the runtime cannot find it:

 <Grid x:Name="HancockDetails" ...> <Grid.RenderTransform> <TranslateTransform /> </Grid.RenderTransform> </Grid> 

I assume that you want to use TranslateTransform rather than ScaleTransform , since the goal is to move the grid, rather than resize it?

 Storyboard.SetTargetProperty(slide, new PropertyPath("RenderTransform.(TranslateTransform.X)")); 

Answer 2

Instead of trying to create a storyboard manually, muuuuuuuch is easier to use Expression Blend. This is a free design tool that complements Visual Studio. The storyboard you explain will take all 30 seconds to do there, and there will be no code. Then when you want to run it, it will just be StoryBoardName.Begin()

Is it easy? This is a resource. http://msdn.microsoft.com/en-us/expression/cc197141.aspx