UWP開發入門（七）——下拉刷新

時間 2019-11-19

標籤 uwp 開發入門下拉刷新简体版

原文原文鏈接

　　本篇意在給這幾天Win10 Mobile負面新聞不斷的某軟洗地，想要證實實現一個簡單的下拉刷新並不困難。UWP開發更大的困難在於懶惰，缺少學習的意願。而不是「某軟連下拉刷新控件都沒有」這樣的想法。git

　　以前我也沒有進行過下拉刷新的研究。因而先去google了幾篇blog學習了一下，而後再看了某軟官方的Sample。（同窗們啊官方有下拉刷新的Sample啊！就在Git上啊！不要錢無門檻啊！）學習以後發現實現的方式大致分爲兩類。github

　　一類是以某軟Sample和博客園MS-UAP封裝的PullToRefreshBox爲表明，將一片「釋放刷新」區域和一個ListView上下排列放置到一個ScrollView中。初始經過向下滾動ScrollView將「釋放刷新」區域上移至不可見，在每次向上滾動顯示「釋放刷新」區域時，觸發ScrollView的ViewChanged事件來進行加載新數據。完成新數據加載後，再次將「釋放刷新」區域上移隱藏。async

　　另外一類是經過附加屬性來獲取ListView內部的ScrollView，並檢測內部ScrollView的相關Manpulation事件來實現數據刷新。學習

　　考慮到附加屬性稍稍超出入門範圍，且第一類代碼能夠寫得較爲簡單。故採用ScrollView嵌套的方法，給出一個極簡的下拉刷新實現，雖並不能應對全部的需求，但考慮到30行不到的代碼量，絕對你值得擁有！this

　　首先是XAML的代碼，平淡無奇沒有任何高深的技巧：google

    <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屬性，這裏略過不表。spa

　　值得注意的僅有scrollViewer_Loaded和scrollViewer_ViewChanged兩個方法。scrollViewer的Load方法裏，咱們在初始狀態下將ScrollViewer向上滾動了30個px，正好將ProgressRing隱藏了起來。而後是scrollViewer_ViewChanged方法，IsIntermediate屬性指出滑動是否還在進行中，若是不是而且到達頂部了，就去加載新的數據，同時控制ProgressRing的菊花轉圈圈。最後，再將ScrollViewer向上滾動30px藏起ProgressRing。code

    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;
            }
        }
    }