I am trying to allow a scrollview
to overflow (not clip its children). I have this working with a carousel view but cannot get the same result with a scrollview
.
The idea of this is to center the scrollview
and allow overflow so the content can look centered (being used as tabs).
Use of the scrollview
in Xamarin Forms:
var scrollView = new ScrollView
{
WidthRequest = 200,
HorizontalOptions = LayoutOptions.Center,
Orientation = ScrollOrientation.Horizontal,
Content = scrollViewContent,
IsClippedToBounds = false
};
This is my custom renderer for the scrollview
:
public class CenteredScrollViewRenderer : ScrollViewRenderer
{
protected override void OnElementChanged(VisualElementChangedEventArgs e)
{
base.OnElementChanged(e);
if (e.OldElement != null || this.Element == null)
return;
if (e.OldElement != null)
e.OldElement.PropertyChanged -= OnElementPropertyChanged;
e.NewElement.PropertyChanged += OnElementPropertyChanged;
}
protected void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
{
if (ChildCount > 0)
{
GetChildAt(0).HorizontalScrollBarEnabled = false;
GetChildAt(0).VerticalScrollBarEnabled = false;
GetChildAt(0).OverScrollMode = OverScrollMode.Never;
// Try and disable clip
((ViewGroup)GetChildAt(0)).SetClipToPadding(false);
((ViewGroup)GetChildAt(0)).SetClipChildren(false);
}
}
}
I have also created a function to go through ALL parents to disable clipping just to see if it was a parent causing a problem. This still has not worked.
So how do we allow the scrollview
content to overflow outside of its bounds?
Note: I am tagging android as this could be a simple misunderstanding of the native control.
Tried my best to make an image of the desired effect I am looking for.
So the big blue border is the scrollview
in the middle of the contentview
. The scroll content is only visible when inside the scrollview
itself (how it always works). I am trying to not clip the content so can always see all content (overflow), not just inside the scrollview
.
The following link may explain the effect I am after better then I have. Please take a look, any question let me know.
Paging-enabled UIScrollView With Previews
Note: I have linked the touch events up so it is only disabling clipping bounds that I need to find a fix for.
You could try the same approach as with elevation / shadow clipping.
Add a parent layout, add padding to the parent layout (to achieve the centered item) and set clipToPadding=false
in the parent layout.
Since the question is about Xamarin, I'll just mention that for native Android development you could achieve the same center-locked effect with a RecyclerView and an implementation of the SnapHelper class.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With