转载

UWP开发入门(七)——下拉刷新

本篇意在给这几天 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

原文  http://www.cnblogs.com/manupstairs/p/5184386.html
正文到此结束
Loading...