Use Layout Updated Here's code I used and debugged to get the scrolling effect. You might also need to keep a track where the pointer has been pressed and the scroll viewer manipulation completed event. Here's the xaml Add the respective event handler in the code behind.
<ScrollViewer ManipulationCompleted="ScrollViewer_ManipulationCompleted" ManipulationMode="All">
<StackPanel LayoutUpdated="StackPanel_LayoutUpdated" PointerPressed="StackPanel_PointerPressed">
<Grid Height="100" Width="100" Background="Red" ></Grid>
<Grid Height="100" Width="100" Background="Green" ></Grid>
<Grid Height="100" Width="100" Background="Blue" ></Grid>
<Grid Height="100" Width="100" Background="Yellow" ></Grid>
<Grid Height="100" Width="100" Background="Red" ></Grid>
<Grid Height="100" Width="100" Background="Green" ></Grid>
<Grid Height="100" Width="100" Background="Blue" ></Grid>
<Grid Height="100" Width="100" Background="Yellow" ></Grid>
<Grid Height="100" Width="100" Background="Red" ></Grid>
<Grid Height="100" Width="100" Background="Green" ></Grid>
<Grid Height="100" Width="100" Background="Blue" ></Grid>
<Grid Height="100" Width="100" Background="Yellow" ></Grid>
<Grid Height="100" Width="100" Background="Red" ></Grid>
<Grid Height="100" Width="100" Background="Green" ></Grid>
<Grid Height="100" Width="100" Background="Blue" ></Grid>
<Grid Height="100" Width="100" Background="Yellow" ></Grid>
<Grid Height="100" Width="100" Background="Red" ></Grid>
<Grid Height="100" Width="100" Background="Green" ></Grid>
<Grid Height="100" Width="100" Background="Blue" ></Grid>
<Grid Height="100" Width="100" Background="Yellow" ></Grid>
<Grid Height="100" Width="100" Background="Red" ></Grid>
<Grid Height="100" Width="100" Background="Green" ></Grid>
<Grid Height="100" Width="100" Background="Blue" ></Grid>
<Grid Height="100" Width="100" Background="Yellow" ></Grid>
<Grid Height="100" Width="100" Background="Red" ></Grid>
<Grid Height="100" Width="100" Background="Green" ></Grid>
<Grid Height="100" Width="100" Background="Blue" ></Grid>
<Grid Height="100" Width="100" Background="Yellow" ></Grid>
<Grid Height="100" Width="100" Background="Red" ></Grid>
<Grid Height="100" Width="100" Background="Green" ></Grid>
<Grid Height="100" Width="100" Background="Blue" ></Grid>
<Grid Height="100" Width="100" Background="Yellow" ></Grid>
<Grid Height="100" Width="100" Background="Red" ></Grid>
<Grid Height="100" Width="100" Background="Green" ></Grid>
<Grid Height="100" Width="100" Background="Blue" ></Grid>
<Grid Height="100" Width="100" Background="Yellow" ></Grid>
</StackPanel>
</ScrollViewer>
Here's the code behind
public MainPage()
{
this.InitializeComponent();
}
/// <summary>
/// Invoked when this page is about to be displayed in a Frame.
/// </summary>
/// <param name="e">Event data that describes how this page was reached. The Parameter
/// property is typically used to configure the page.</param>
protected override void OnNavigatedTo(NavigationEventArgs e)
{
}
private void ScrollViewer_ManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e)
{
//scroll bar being dragged
}
private void StackPanel_LayoutUpdated(object sender, object e)
{
//if swipe gesture then check for vertical offset and carry on with the //calculations you have to do else do nothing
}
private void StackPanel_PointerPressed(object sender, PointerRoutedEventArgs e)
{
//swipe gesture being made
}
Please let me know if it worked