ScrollViewer: Disable Snap (elastic band effect)

Question

I have a ScrollViewer on my MainPage that contains all other elements (except the AppBars of course). Scrolling works fine, but I want to disable the snap behavior (you drag the whole page to the left, release it and it will snap back). See the image (Background of ScrollViewer: Black, Background of Grid: White). So how can I disable this behavior? Also known as overscroll or bounce effect.

I just found out about IsScrollInertiaEnabled, but setting this to false doesn't help.

<ScrollViewer VerticalScrollMode="Disabled" 
                  VerticalScrollBarVisibility="Disabled" 
                  HorizontalScrollBarVisibility="Visible" 
                  ZoomMode="Disabled" 
                  HorizontalSnapPointsType="None" 
                  VerticalSnapPointsType="None" 
                  ZoomSnapPointsType="None">
    <VisualStateManager>...</VisualStatemanager>
    <Grid Style="{StaticResource LayoutRootStyle}">
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- Back button and page title -->
        ...
        <!-- My content grid -->

     </Grid>
</ScrollViewer>

Answer 1

Sorry misunderstood what you meant.. Post some additional xaml if you can.. scrollviewer container xaml might help

try something like this

<Grid Style="{StaticResource LayoutRootStyle}">
    <Grid.RowDefinitions>
        <RowDefinition Height="140"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!-- Back button and page title -->
    ...
    <!-- My content grid -->
    <ScrollViewer Grid.Row="1"
      VerticalScrollMode="Disabled" 
        VerticalScrollBarVisibility="Disabled" 
        HorizontalScrollBarVisibility="Visible" 
        ZoomMode="Disabled" 
        HorizontalSnapPointsType="None" 
        VerticalSnapPointsType="None" 
        ZoomSnapPointsType="None">

        // put your content here directly or in a grid
    </ScrollViewer>
    <VisualStateManager>...</VisualStatemanager>
</Grid>

Answer 2

To solve the problem set height of the object inside the scroll viewer, let say.. if you have a stack panel, set the Height="2000" or else... and DONE. Note: Don't put any height in scroll viewer.

Answer 3

I have other suggestion, i have faced similar problem, but i wanted to disable bounce, when only 1 element is in flipview.

So i did this:

Created a TemplatedControl:

CustomFlipView and it inherited from FlipView:

public sealed class CustomFlipView : FlipView

Next, i edited the FlipViewStyle to get the style code of FlipView ( yea, that big one ).

And copy-pasted into the Generic.xaml, into generated

<Style TargetType="local:CustomFlipView">

So this gives me an opportunity to add names to such xaml controls, that by default are not named.

I have added a name to ItemsPresenter:

<ScrollViewer x:Name="ScrollingHost" AutomationProperties.AccessibilityView="Raw" BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalSnapPointsType="MandatorySingle" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" IsTabStop="False" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}" IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" Padding="{TemplateBinding Padding}" TabNavigation="{TemplateBinding TabNavigation}" VerticalSnapPointsType="MandatorySingle" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" ZoomMode="Disabled">
    <ItemsPresenter x:Name="FlipViewItemsPresenter"/>
</ScrollViewer>

Next in the code of CustomFlipView i did this:

public sealed class CustomFlipView : FlipView //this line is indented.
{
    private ItemsPresenter itemsPresenter;

    public CustomFlipView()
    {
        this.DefaultStyleKey = typeof(CustomFlipView);
    }

    protected override void OnApplyTemplate()
    {
        base.OnApplyTemplate();
        itemsPresenter = GetTemplateChild("FlipViewItemsPresenter") as ItemsPresenter;
        FixateItems();
    }

    protected override void OnItemsChanged(object e)
    {
        base.OnItemsChanged(e);
        FixateItems();
    }

    private void FixateItems()
    {
        if (itemsPresenter != null)
        {
            if (this.Items.Count < 2)
            {
                itemsPresenter.ManipulationMode = ManipulationModes.None;
            }
            else
            {
                itemsPresenter.ManipulationMode = ManipulationModes.System;
            }
        }
    }
}

Hope this could give you a hint.