Windows Phone 8中图像的自动连续滚动

Question

Let's say I have an image with size 480x800. I would like to have a square control (size 480x480) on the screen that first shows the topmost part of the image and then slowly vertically scrolls to the end of the image and when it reaches it, it scrolls back up and then down again etc. It is quite crucial that the control is smaller than the image itself since the main problem here is that if the whole image is on the screen it takes up too much space.

I also don't want the user to be able to scroll the image manually since this control would be used in LongListSelector and clicking on it would take you to a new page with the whole image displayed, so the control would offer a kind of a scrollable preview of the image displayed in it and there is no need for the user to scroll manually.

I have tried to achieve this functionality with a ScrollViewer and tried to look up other ways of doing it, but I did not find anything that would work. My question is if there is anything that would support this or is the best way to make a custom control that would support this kind of behavior? And also if anyone has any tips of how to achieve this with a custom control, I would really appreciate it. Thanks.

Answer 1

I have figured out that making a custom control will not be needed. With some more research I was able to figure out a suitable solution. I used a Border with the image set as the background with an ImageBrush and animated it with an animation that reverses automatically and repeats forever. I will post the solution below, it might be useful for someone.

<Border Height="480" Width="480" Tap="animBegin">
    <Border.Resources>
        <Storyboard x:Name="transformAnimation">
            <DoubleAnimation Storyboard.TargetName="transform" 
                             Storyboard.TargetProperty="TranslateY" 
                             From="0" To="-320" Duration="0:0:5" 
                             AutoReverse="True" RepeatBehavior="Forever" />
        </Storyboard>
    </Border.Resources>
    <Border.Background>
        <ImageBrush Stretch="UniformToFill" 
                    ImageSource="/Assets/sample.jpg"
                    AlignmentY="Top">
            <ImageBrush.Transform>
                <CompositeTransform x:Name="transform" TranslateY="0"/>
            </ImageBrush.Transform>
        </ImageBrush>
    </Border.Background>
</Border>