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

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

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

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

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

  另一类是通过附加属性来获取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文件。首先是ItemsIsPullRefresh属性的定义,前者是ListView中的数据集,后者BindingProgressRingIsActive属性,这里略过不表。

  值得注意的仅有scrollViewer_LoadedscrollViewer_ViewChanged两个方法。scrollViewerLoad方法里,我们在初始状态下将ScrollViewer向上滚动了30px,正好将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开发即是如此,困难确实有,经验的确没有。跟相对成熟的iOSAndroid开发相比,是需要更多的汗水和努力。但是微软是否要倒了?微软技术又是否没前途?Windows 10是否废品?有空在网上搜这种没有卵用的东西,不如多多学习。

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

Microsoft/Windows-universal-samples

目录
相关文章
|
4月前
|
XML Java 数据格式
Anrodi Studio App开发入门之网格视图GridView的使用及实战(附源码 超详细必看)
Anrodi Studio App开发入门之网格视图GridView的使用及实战(附源码 超详细必看)
30 0
|
9月前
|
XML Android开发 数据格式
Android开发中那些你费力写的控件,其实原生都有
实现一个开关的切换,你会怎么做,写一个layout,一半点击为开,一半点击为关,还是两张图片,点一下开,再点一下关?让你实现一个根据用户的输入弹出一个下拉菜单等等,其实都大可没有必要去自己写,本身Android里都有,下面对各个控件,我会一一举例。
132 0
|
11月前
|
C# Windows
一个WPF开发的、界面简洁漂亮的音频播放器
一个基于C# + WPF开发的,界面外观简洁大方,操作体验良好的音频播放器。
86 0
|
前端开发
autojs优秀UI-自定义控件
牙叔教程 简单易懂
674 0
HarmonyOS实战—实现双击事件
HarmonyOS实战—实现双击事件
139 0
HarmonyOS实战—实现双击事件
|
Windows UED API
[UWP]如何实现UWP平台最佳图片裁剪控件
原文:[UWP]如何实现UWP平台最佳图片裁剪控件 前几天我写了一个UWP图片裁剪控件ImageCropper(开源地址),自认为算是现阶段UWP社区里最好用的图片裁剪控件了,今天就来分享下我编码的过程。
1121 0
|
Windows
[UWP开发]NavigationView基础使用方法
原文:[UWP开发]NavigationView基础使用方法 [UWP开发]NavigationView基础使用方法 NavigationView是秋季创意者更新(16299)引入的新控件,用于生成Windows特色的导航栏。
2180 0
|
Windows
UWP开发随笔——UWP新控件!AutoSuggestBox!
原文:UWP开发随笔——UWP新控件!AutoSuggestBox! 摘要 要开发一款优秀的application,控件肯定是必不可少的,uwp就为开发者提供了各种各样的系统控件,AutoSuggestBox就是uwp极具特色的控件之一,也是相对于之前win8.1的uap较新的控件,今天我们就来谈谈AutoSuggestBox的基本用法及其自定义UI方法。
1169 0
UWP开发入门(十五)——在FlipView中通过手势操作图片
原文:UWP开发入门(十五)——在FlipView中通过手势操作图片   本篇的最终目的,是模拟系统的照片APP可以左右滑动,缩放图片的操作。在实现的过程中,我们会逐步分析UWP编写UI的一些思路和技巧。
1539 0
UWP的一种下拉刷新实现
原文:UWP的一种下拉刷新实现 简介 我们最近实现了一个在UWP中使用的下拉刷新功能,以满足用户的需求,因为这是下拉刷新是一种常见的操作方式,而UWP本身并不提供这一机制。 通过下拉刷新这一机制,可以让移动端的界面设计变得更加简单,更符合广大用户的使用习惯。
1153 0

热门文章

最新文章