WPF implementation Datagrid/listview Paging control

In WPF, Datagrid/listview is usually used for data presentation, and if the amount of data is not much, it can be displayed directly on a page. If the amount of data is large, 2000 data, one-time display in a page, not only consumes resources, but also bad user experience. This blog will show you how to create a paging control.

For the sake of simplicity, this paging control currently has features such as first page/previous/Next/last Page/Total pages/pages. Implementation ideas, Home/previous/next/last four are implemented by routed events, which can be used to bind using commands, or to use them directly. The total pages and pages are implemented by dependency properties, and the pages are bound to display when used. The sample code is as follows:

Pager controls:

    <UserControl.Resources> <style targettype= "{x:type button}" > <setter property= "Width" Value= "/>" <setter property= "Height" value= "All"/> </Style> &LT;/USERCONTROL.RESOURC es> <Grid> <stackpanel orientation= "Horizontal" > <button x:name= "Firstpagebutton" M Argin= "5,0" click= "Firstpagebutton_click" > <path width= "7" height= "ten" Data= "m0,0l0,10 m0,5l6,2 6,8 0            , 5 "stroke=" Black "strokethickness=" 1 "fill=" Black "verticalalignment=" center "horizontalalignment=" center "/>                 </Button> <button x:name= "Previouspagebutton" margin= "0,0,5,0" click= "Previouspagebutton_click" > <path width= "8" height= "8" data= "m0,4l8,0 8,8z" stroke= "Black" fill= "Black" verticalalignment= "Center"                horizontalalignment= "center"/> </Button> <textblock verticalalignment= "center" > <run text="section"/> <run x:name= "rcurrent" text= "0"/> <run text= "page"/> </textb lock> <button margin= "5,0" x:name= "Nextpagebutton" click= "Nextpagebutton_click" > <Pa Th width= "8" height= "8" data= "m0,4l8,0 8,8z" stroke= "Black" fill= "Black" verticalalignment= "Center" Horizontalalignment= "Center" > <Path.RenderTransform> <rotatetransfor            M angle= "centerx=" 4 "centery=" 4 "/> </Path.RenderTransform> </Path>                 </Button> <button margin= "0,0,5,0" x:name= "Lastpagebutton" click= "Lastpagebutton_click" > <path x:name= "Mainpath" width= "7" height= "ten" Data= "m0,0l0,10 m0,5 l6,2 6,8 0,5" stroke= "Black" Stroket hickness= "1" fill= "Black" verticalalignment= "center" horizontalalignment= "Center" > &LT;PATH.RENDERTR Ansform> <rotatetRansform angle= "centerx=" 3 "centery=" 5 "/> </Path.RenderTransform> </pa th> </Button> <textblock verticalalignment= "Center" > <run text= "Total"/ > <run x:name= "rtotal" text= "0"/> <run text= "page"/> &LT;/TEXTBLOCK&G        T </StackPanel> </Grid>

C#:

View Code

In the MainWindow,
Xaml:

    <Grid> <Grid.RowDefinitions> <rowdefinition height= "*"/> <rowdefinit Ion height= "Auto"/> </Grid.RowDefinitions> <datagrid grid.row= "0" itemssource= "{Binding fakesour CE} "autogeneratecolumns=" false "Canuseraddrows=" false "> <DataGrid.Columns> <datagri Dtextcolumn header= "Item ID" binding= "{Binding id}" width= "/> <datagridtextcolumn header=" Item Nam E "binding=" {Binding itemname} "width="/> </DataGrid.Columns> </DataGrid> <                      Local:pager totalpage= "{Binding totalpage}" currentpage= "{Binding currentpage, Mode=twoway}" Horizontalalignment= "Center" grid.row= "1" > <i:interaction. triggers> <i:eventtrigger eventname= "FirstPage" > <i:invokecommandaction Comm And= "{Binding firstpagecommand}"/>               </i:EventTrigger> <i:eventtrigger eventname= "PreviousPage" > &                Lt;i:invokecommandaction command= "{Binding previouspagecommand}"/> </i:EventTrigger> <i:eventtrigger eventname= "NextPage" > <i:invokecommandaction command= "{Binding Nextpagecomma                    nd} "/> </i:EventTrigger> <i:eventtrigger eventname=" LastPage ">            <i:invokecommandaction command= "{Binding lastpagecommand}"/> </i:EventTrigger> </i:interaction. Triggers> </local:Pager> </Grid>

Mainviewmodel class:

View Code

The data source that is bound to the UI is just the data that needs to be displayed, not all of the data is taken out. When you select the number of pages to display, you only need to attach the new data source.

Summary: If you need to extend the paging control, for example, by increasing the number of display bars per page, you only need to add the corresponding dependency property in the pager control.

Thank you for reading, code click here to download.

WPF implementation Datagrid/listview Paging control