
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 <em>IsScrollInertiaEnabled</em>, 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>
<img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/f1xvO.jpg" data-original="https://i.stack.imgur.com/f1xvO.jpg" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" /><img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/YKpOM.jpg" data-original="https://i.stack.imgur.com/YKpOM.jpg" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" />
Answer1: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>
Answer2: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.
Answer3: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.