适用于iOS的Xamarin Forms ListView：始终显示ScrollBar

Question

我的ProductList类型为ObservableCollection<Product>，其中Product是下面给出的类：

public class Product
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Path { get; set; }
}

在我的Xamarin Forms iOS应用程序中，我有ListView ItemSource为ProductList。如果ProductList中的商品数量使得ListView的高度不足以显示所有商品，则可以通过滚动ListView来获得其他商品。但是，我希望仅在滚动ListView时才显示ScrollBar。是否可以或者我应该尝试除ListViev之外的其他用户界面以便始终显示ScrollBar。

Xamarin.Android有一些解决方案，但我找不到任何有效的iOS应用程序解决方案。

非常感谢...

Answer 1

正如@Cole评论的那样，flashScrollIndicators只能在短时间内显示指标。

因此，您必须自定义滚动指示器。

创建ListView的自定义渲染器并添加自定义滚动指示器，如下所示：

    public class MyListViewRenderer : ListViewRenderer
    {
        public UIView bar;
        protected override void OnElementChanged(ElementChangedEventArgs<ListView> e)
        {
            base.OnElementChanged(e);

            //Hide the default Scroll Indicator.
            Control.ShowsVerticalScrollIndicator = false;


            //Set Delegate
            CustomScrollDelegate customScrollDelegate = new CustomScrollDelegate();
            Control.Delegate = customScrollDelegate;

            //Create the background view of custom indicator.
            double frameHeight = Control.Frame.Size.Height;
            double frameWidth = Control.Frame.Size.Width;

            double barBackgroundWidth = 6;
            double statusBarHeight = 20;

            UIView barBackgroundView = new UIView();
            CGRect barBVRect = new CGRect(frameWidth - barBackgroundWidth, statusBarHeight, barBackgroundWidth, frameHeight);
            barBackgroundView.Frame = barBVRect;
            barBackgroundView.BackgroundColor = UIColor.Gray;
            barBackgroundView.Layer.CornerRadius = 2;
            barBackgroundView.Layer.MasksToBounds = true;


            //Create the bar of the custom indicator.
            bar = new UIView();
            CGRect barRect = new CGRect(1, 0, 4, 0);
            bar.Frame = barRect;
            bar.BackgroundColor = UIColor.Black;
            bar.Layer.CornerRadius = 2;
            bar.Layer.MasksToBounds = true;

            //Add the views to the superview of the tableview.
            barBackgroundView.AddSubview(bar);
            Control.Superview.AddSubview(barBackgroundView);

            //Transfer the bar view to delegate.
            customScrollDelegate.bar = bar;

        }

        public override void LayoutSubviews()
        {
            base.LayoutSubviews();
            Console.WriteLine("End of loading!!!");
            double contentHeight = Control.ContentSize.Height;
            double frameHeight = Control.Frame.Size.Height;
            double barHeight = frameHeight * frameHeight / contentHeight;


            //Reset the bar height when the table view finishes loading.
            CGRect barRect = new CGRect(bar.Frame.X, bar.Frame.Y, bar.Frame.Width, barHeight);
            bar.Frame = barRect;
        }

    }

实现跟踪scrollView滚动操作的Scrolled委托。您可以更新委托中指标的位置。

    public class CustomScrollDelegate : UIKit.UITableViewDelegate
    {
        public UIView bar;
        double barY;

        public override void Scrolled(UIScrollView scrollView)
        {
            double y = scrollView.ContentOffset.Y;
            double contentHeight = scrollView.ContentSize.Height;
            double frameHeight = scrollView.Frame.Size.Height;

            double barHeight = frameHeight * frameHeight / contentHeight;
            barY = y / (contentHeight - frameHeight) * (frameHeight - barHeight);

            //Cut the bar Height when it over the top.
            if (barY < 0)
            {
                barHeight = barHeight + barY;
                barY = 0;
            }

            //Cut the bar height when it over the bottom.
            if (barY > (frameHeight - barHeight))
            {
               barHeight = barHeight - (barY - (frameHeight - barHeight));
            }

            //Reset the barView rect. Let's move!!!
            CGRect barRect = new CGRect(bar.Frame.X, barY, bar.Frame.Width, barHeight);
            bar.Frame = barRect;

        }

    }

它的工作原理如下：