Xamarin.forms: Scroll bar overlaps content in WPF

[breyed]

On WPF, a ScrollView always displays a vertical scroll bar if the content exceeds the ScrollView's height, regardless of VerticalScrollBarVisibility. The scroll bar overlaps the ScrollView's content. This overlap would be acceptable if the scroll bar were visible only temporarily, but it's permanent, which means the user never sees the content underneath.

Xamarin.Forms 3.1.0.637273

[DennisWelu]

As a quick "improvement" on this behavior I applied the style from this post http://www.thinkbottomup.com.au/site/blog/WPF_Transparent_Scrollbars_in_ScrollView globally to all scrollbars (by not including the x:Key="...") in my WPF project's App.xaml. Now at least the content is visible through the scrollbar until the mouse is over top of the scroller.

[DuncWatts]

I've created a workaround for this issue by extending the ScrollViewRenderer, then manually adjusting the width of the content whenever the size of the DockPanel changes. You do need to ensure the hosted content has the HorizontalOptions set to Start instead of Fill, otherwise the WidthRequest change is ignored.

[DennisWelu]

@DuncWatts Able to share they key code snippet(s)?

[DuncWatts]

Sure, this is the Renderer I added:

    public class ScrollViewRenderer : Xamarin.Forms.Platform.WPF.ScrollViewRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<ScrollView> e)
        {
            base.OnElementChanged(e);

            if (Element?.Content != null)
            {
                DockPanel dockPanel = (DockPanel)Control.Content;
                dockPanel.SizeChanged += OnDockPanelSizeChanged;

                Element.Content.HorizontalOptions = LayoutOptions.Start;
            }
        }

        private double _currentWidth;

        private void OnDockPanelSizeChanged(object sender, SizeChangedEventArgs e)
        {
            if (e.NewSize.Width != _currentWidth)
            {
                _currentWidth = e.NewSize.Width;
                Element.Content.WidthRequest = e.NewSize.Width;
            }
        }
    }