CODEWITHSUNDEEP
xamlwindows-phone-8windows-phonescrollviewer
Thought
Thought

Reputation: 5846

ScrollViewer snapping

I have this ScrollViewer, on a Windows Phone 8 project

<ScrollViewer Name="MediaScroll" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Auto" Background="#7FD13E3E" Tap="ScrollViewer_Tap" VerticalAlignment="Top" LayoutUpdated="MediaScroll_LayoutUpdated">
            <ItemsControl ItemTemplate="{StaticResource ItemTemplate2}" ItemsPanel="{StaticResource ItemsPanelTemplate1}" ItemsSource="{Binding listaMedia}">

            </ItemsControl>
        </ScrollViewer>

that uses these templates

    <phone:PhoneApplicationPage.Resources>

    <ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
        <StackPanel Orientation="Horizontal" Margin="0,0,0,0"/>
    </ItemsPanelTemplate>

    <DataTemplate x:Key="ItemTemplate2">

        <StackPanel Width="480">
            <Image Source="/Assets/[email protected]" Width="75" Canvas.ZIndex="10" Margin="203,85,202,0"  />
            <Image Source="{Binding snapshot.path}" Stretch="Fill" VerticalAlignment="Top" Margin="0,-160,0,0" />
        </StackPanel>
        <!--<Image Tag="{Binding id}"  Source="{Binding snapshot.path}" Width="150" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="-10,0,-9,0" Tap="Image_Tap" />-->
        <!--Your other code-->
    </DataTemplate>

</phone:PhoneApplicationPage.Resources>

i get a list with images and the scroll shows them horizontally. When i scroll i want to ScrollViewer to Snap to the nearest image, meaning that if the scroll is showing parts of 2 images, it Scrolls automatically to the nearest image and shows that one. I dont want the scroll to show 2 halfs of 2 images basically

not sure if i can do that with the LayoutUpdated event.

Upvotes: 1

Views: 643

Answers (1)

Toni Petrina
Toni Petrina

Reputation: 7122

You shouldn't use ScrollViwer for that. If you need custom scrolling, you can write the control yourself or you could reuse Pivot if the number of images is low.

So, you need to create your own user control and override Manipulation* events. When user drags the image, you can update its translation withing the RenderTransform. You can detect when user releases the drag whether or not the image has moved past its middle. In that case you manually animate the next image in its place.

For this you need custom Image loading code, custom animations built mostly in code. Don't forget to cancel existing animations if user starts to drag again in mid animation.

I apologize for the lack of code, but either I will post the entire solution here (which might take a few hours) or I could give pointers about the details of the solution.

Upvotes: 1

Related Questions