WPF Animation: Moving images in Grid cells

I'm a beginner of WPF, I have a an array images to be displayed in the grid, then there is this button, left and right, so that when I click left I will move the images to the left to display another set of images from the array. Same also wit开发者_如何学Ch the right button to move the images to the right. Its like in www.yahoo.com main page when browsing the top news of the day. How can that be done in WPF? Thanks!

One way to do this would be to put a Canvas in each cell in the grid and then put the image in the Canvas. This way you animate the image's Canvas.Left property to move it left & right. One gotcha to watch out for (speaking from experience!) is to get the binding right in the animation ...for attached properties the binding syntax needs parentheses like this...

<DoubleAnimation Storyboard.TargetProperty="(Canvas.Left)" ...etc...

UPDATE: Actually I think I misunderstood what you were going for - maybe this is more like what you need? It talks about animating a ScrollViewer without the scrollbars.

You can do that using itemscontrol and changing the source of items on button click...

look at the sample below in this sample i am taking a items control with stackpanel as itemshost... and image in data template....

on click of left or right button you can change the itemssource of the itemscontrol...

  <ItemsControl ItemsSource="{Binding Images}" >
                                            <ItemsControl.ItemTemplate>
                                                <DataTemplate>
                                                    <Image Source={Binding}></Image>
                                                </DataTemplate>
                                            </ItemsControl.ItemTemplate>
                                            <ItemsControl.ItemsPanel>
                                                <ItemsPanelTemplate>
                                                    <Stackpanle Orientation="Horizontal" IsItemsHost="True" />
                                                </ItemsPanelTemplate>
                                            </ItemsControl.ItemsPanel>
                                        </ItemsControl>

Edit: Before changing the data context you can animate the itemscontrol and change the datacontext and bring it in..