Share barley UWP Version development history -03.gridview or ListView scroll bottom automatically load subsequent data

Today, we share with you the Barley UWP client, a small skill used in sorting, ordering, or searching, and the technology is rough and big.

Examples of barley classification, by default, will show users 20 data, when the user scrolls the mouse or use gestures to slide the list to the second-to-last row of the position, automatically load the subsequent 20 data. Increase the startup speed while slightly saving the user's traffic.

The rest is not said, go directly into the code phase.

STEP1, the interface part is very simple, I gave up gridvew own scroll, on the outer bread on a SCROLLVIEWR, monitoring viewchanged events (so the code is relatively simple, directly with the GridView internal data change that way, The GridView must be given a height and so on, trouble)

<scrollviewer x:name= "Scrollroot" verticalscrollbarvisibility= "Hidden" viewchanged= "scrollroot_viewchanged" margin= "10,0" >   
    <GridView>
        ......
    </GridView>
</ScrollViewer/>

STEP2, modify the binding interface of the ViewModel, add a list of the same structure of properties, but to use the ObservableCollection, with this set of variability and automatic notification interface, convenient dynamic notification list, with data updates.

usingSystem.Collections.Generic;usingSystem.Collections.ObjectModel;namespacedamai.windows10.app{/// <summary>    ///Search Page ViewModel/// </summary>     Public classSearchviewmodel {PrivateList<searchresultmodel>_l; /// <summary>        ///Project List/// </summary>         PublicList<searchresultmodel>L {Get            {                return_l; }            Set{_l=value; if(_l = =NULL)return; if(List = =NULL) List =NewObservablecollection<searchresultmodel>(); foreach(varIteminch_l) {list.                ADD (item); }            }        }        /// <summary>        ///for data-bound lists/// </summary>         PublicObservablecollection<searchresultmodel> List {Get;Set; }    }}

Step3, next how to initialize, how to query the first wave of data (of course, this needs our server-side classmate support, if he interface does not allow paging query, we do not have the client), the initialization of data, in the current page to save the ViewModel, and bind it to the GridView control.

        //Loading Data        Private Asynctask<BOOL>LoadData () {Try            {
Your own business logic
                //get the data and show_searchviewmodel =NewSearchviewmodel (); _searchviewmodel=awaitHttpconnectiontool.getdataentity<searchviewmodel>(Tempdatainfo.makeapiurl (URL)); if(_searchviewmodel = =NULL|| _SEARCHVIEWMODEL.L = =NULL|| _searchviewmodel?. L?. Count <=0) {//Exception data processing                }                //Bind data (bound is the list of that ObservableCollection attribute)Gridviewproject.itemssource=_searchviewmodel.list; //trigger event when loading is complete                return true; }            Catch(Exception ex) {return false; }        }

STEP4, handling mouse scrolling events

//Scroll to the bottom to load data dynamically        Private Async voidScrollroot_viewchanged (Objectsender, Scrollviewerviewchangedeventargs e) {            if(Scrollroot.verticaloffset = = _originheight)return; _originheight=Scrollroot.verticaloffset; if(_isloding)return; if(Scrollroot.verticaloffset <= Scrollroot.scrollableheight- -)return; if(_currentpage >= _countpage +1)return; _isloding=true; awaitTask.Factory.StartNew (Async() =            {                //calling the UI thread to add data                await  This. Dispatcher.runasync (Coredispatcherpriority.normal,Async() ={//splicing business query URL//Query new data
Searchviewmodel Tempviewmodel=awaitHttpconnectiontool.getdataentity<searchviewmodel>(Tempdatainfo.makeapiurl (URL)); if(Tempviewmodel! =NULL&& TEMPVIEWMODEL.L! =NULL) _SEARCHVIEWMODEL.L =TEMPVIEWMODEL.L; _isloding=false;            });        }); }

All right, finish the call.

Share barley UWP Version development history -03.gridview or ListView scroll bottom automatically load subsequent data