UWP development portal (7) -- pull-down refresh, uwp development portal drop-down

UWP development portal (7) -- pull-down refresh, uwp development portal drop-down

This article is intended to give Win10 Mobile negative news a soft bath over the past few days. It is not difficult to implement a simple pull-down refresh. The biggest difficulty in UWP development lies in laziness and lack of willingness to learn. Instead of the idea that "a soft pull-down refresh control does not exist.

I have not studied pull-down refresh before. So I went to google and learned a few blogs, and then looked at the official Sample of a software program. (Students, there are pull-down and refresh samples on the official website! It's on Git! No money, no threshold !) After learning, we can find that there are two ways to implement it.

The first type is represented by a soft Sample and the PullToRefreshBox encapsulated by the blog garden MS-UAP. A "Release refresh" area and a ListView are arranged up and down to a ScrollView. Initially, the "Release refresh" area is moved to invisible by rolling down ScrollView. When the "Release refresh" area is displayed in the upward scroll, The ViewChanged event of ScrollView is triggered to load new data. After the new data is loaded, the "Release refresh" area is moved up and hidden again.

The other is to obtain the internal ScrollView of the ListView by attaching properties, and check the Manpulation events of the internal ScrollView to refresh the data.

Considering that the additional attributes are slightly out of the scope of the entry, and the first type of code can be easily written. Therefore, the ScrollView nesting method is used to provide a simple pull-down refresh implementation. Although it cannot meet all the requirements, you are definitely worth it considering the amount of code less than 30 lines!

The first is the code of the XAML. It is plain and has no advanced skills:

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

Let's take a look at the cs file. The first is the definition of the Items and IsPullRefresh attributes. The former is the dataset in ListView, and the latter is bound to the IsActive attribute of ProgressRing, Which is skipped here.

It is worth noting that only scrollViewer_Loaded and scrollViewer_ViewChanged methods are available. In the Load method of scrollViewer, we initially rolled ScrollViewer up to 30 px, just to hide ssssring. Then there is the scrollViewer_ViewChanged method. The IsIntermediate attribute specifies whether the slide is still in progress. If it is not in progress and reaches the top, it loads new data and controls the chrysanthemum circle of ProgressRing. Finally, scroll up to 30px in ScrollViewer to hide 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;            }        }    }

Is it easy to close the job? This is true for UWP development. There are indeed difficulties and no experience. Compared with mature iOS and Android development, it requires more effort and effort. But Will Microsoft be down? Is Microsoft technology promising? Is Windows 10 a waste product? If you are free to search for such useless things on the Internet, it is better to learn more.

Continue to advertise. This ScrollViewer nested ListView method can indeed solve the problem. However, it is occasionally found that the slide conflicts with the ScrollViewer of the ListView control, and the ListViewItem cannot be precisely located. So what if you want to be more refined? Remember to look at the next article. Just give me a compliment ...... Hey, hey ......

Microsoft/Windows-universal-samples