UWP开发入门——下拉刷新

Posted 2020-06-13

　　本篇意在给这几天Win10 Mobile负面新闻不断的某软洗地，想要证明实现一个简单的下拉刷新并不困难。UWP开发更大的困难在于懒惰，缺乏学习的意愿。而不是“某软连下拉刷新控件都没有”这样的想法。

　　之前我也没有进行过下拉刷新的研究。于是先去google了几篇blog学习了一下，然后再看了某软官方的Sample。（同学们啊官方有下拉刷新的Sample啊！就在Git上啊！不要钱无门槛啊！）学习之后发现实现的方式大体分为两类。

　　一类是以某软Sample和博客园MS-UAP封装的PullToRefreshBox为代表，将一片“释放刷新”区域和一个ListView上下排列放置到一个ScrollView中。初始通过向下滚动ScrollView将“释放刷新”区域上移至不可见，在每次向上滚动显示“释放刷新”区域时，触发ScrollView的ViewChanged事件来进行加载新数据。完成新数据加载后，再次将“释放刷新”区域上移隐藏。

　　另一类是通过附加属性来获取ListView内部的ScrollView，并检测内部ScrollView的相关Manpulation事件来实现数据刷新。

　　考虑到附加属性稍稍超出入门范围，且第一类代码可以写得较为简单。故采用ScrollView嵌套的方法，给出一个极简的下拉刷新实现，虽并不能应对所有的需求，但考虑到30行不到的代码量，绝对你值得拥有！

　　首先是XAML的代码，平淡无奇没有任何高深的技巧：

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        
        <ScrollViewer x:Name="scrollViewer"
                     Loaded="scrollViewer_Loaded"
                      ViewChanged="scrollViewer_ViewChanged">

            <StackPanel Orientation="Vertical">
                <ProgressRing IsActive="{x:Bind IsPullRefresh,Mode=OneWay}" Height="30"></ProgressRing>
                <ListView x:Name="list" ItemsSource="{x:Bind Items}" ></ListView>
            </StackPanel>
            
        </ScrollViewer>
    </Grid>

　　再来看cs文件。首先是Items和IsPullRefresh属性的定义，前者是ListView中的数据集，后者Binding到ProgressRing的IsActive属性，这里略过不表。

　　值得注意的仅有scrollViewer_Loaded和scrollViewer_ViewChanged两个方法。scrollViewer的Load方法里，我们在初始状态下将ScrollViewer向上滚动了30个px，正好将ProgressRing隐藏了起来。然后是scrollViewer_ViewChanged方法，IsIntermediate属性指出滑动是否还在进行中，如果不是并且到达顶部了，就去加载新的数据，同时控制ProgressRing的菊花转圈圈。最后，再将ScrollViewer向上滚动30px藏起ProgressRing。

    public sealed partial class MainPage : Page, INotifyPropertyChanged
    {
        public ObservableCollection<object> Items { get; set; }

        public bool IsPullRefresh
        {
            get
            {
                return _isPullRefresh;
            }

            set
            {
                _isPullRefresh = value;
                OnPropertyChanged(nameof(IsPullRefresh));
            }
        }

        bool _isPullRefresh = false;

        public MainPage()
        {
            this.InitializeComponent();

            Items = new ObservableCollection<object>();
            for (int i = 0; i < 40; i++)
            {
                Items.Add(i);
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;

        public void OnPropertyChanged(string name)
        {
            this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
        }

        private void scrollViewer_Loaded(object sender, RoutedEventArgs e)
        {
            scrollViewer.ChangeView(null, 30, null);
        }

        private async void scrollViewer_ViewChanged(object sender, ScrollViewerViewChangedEventArgs e)
        {
            var sv = sender as ScrollViewer;

            if (!e.IsIntermediate)
            {
                if (sv.VerticalOffset == 0.0)
                {
                    IsPullRefresh = true;
                    await Task.Delay(2000);
                    for (int i = 0; i < 5; i++)
                    {
                        Items.Insert(0, i);
                    }
                    sv.ChangeView(null, 30, null);
                }
                IsPullRefresh = false;
            }
        }
    }

　　打完收工，是不是觉得挺简单的？UWP开发即是如此，困难确实有，经验的确没有。跟相对成熟的ios和android开发相比，是需要更多的汗水和努力。但是微软是否要倒了？微软技术又是否没前途？Windows 10是否废品？有空在网上搜这种没有卵用的东西，不如多多学习。

　　继续打广告，这种ScrollViewer嵌套ListView的方式呢，确实可以解决问题。但偶尔也会发现和ListView控件自身的ScrollViewer滑动冲突，以及不能精确定位ListViewItem等问题。那么如果想要更加精进的话？记得看俺下一篇哦，随手点个赞吧……嘿嘿嘿……

Microsoft/Windows-universal-samples