Home > WPF > CodeFluent Entities and WPF: Paging Data

CodeFluent Entities and WPF: Paging Data


Surprisingly, WPF DataGrid and ListView controls don’t provide built-in support to page data, nonetheless you can implement it pretty easily as illustrated with the WPF Pager Control example provided by Microsoft and available here: http://cid-51b2fdd068799d15.office.live.com/self.aspx/.Public/Samples%5E_2010/20100929%5E_DataPagerForWPF.zip

The DataPager control is a simple stack panel with buttons allowing to navigate pages. As provided in the sample, pages are built when assigning the full collection of elements, and it exposes a CurrentPage property which other controls can bind to. Consequently, here’s our paged window:

<StackPanel> 
    <ListView ItemsSource="{Binding ElementName=_dataPager, Path=CurrentPage}"> 
        <ListView.View> 
            <GridView> 
                <GridView.Columns> 
                    <GridViewColumn Header="FirstName" Width="100" DisplayMemberBinding="{Binding FirstName}"/> 
                    <GridViewColumn Header="LastName" Width="100" DisplayMemberBinding="{Binding LastName}"/> 
                </GridView.Columns> 
            </GridView> 
        </ListView.View> 
    </ListView> 
    <local:DataPager x:Name="_dataPager" ItemsPerPage="4" /> 
</StackPanel>

And here’s the code-behind of our window:

public PagingData() 
{ 
    InitializeComponent();
    _dataPager.ItemsSource = ContactCollection.LoadAll(); 
}

As you can see once initialized, we’re assigning the complete collection of items to our DataPager control, and our ListView is bound to the CurrentPage property of the pager.

Note 1: To use actual pages of data from database, you’d have to change the DataPager control so it uses behind the scenes the PageLoadAll method with the proper page index and page sizes, instead of loading everything and creating pages.

Note 2: for this sample to work, we slightly modified the DataPager provided so it uses the IList type (implemented by CodeFluent Entities generated classes) instead of the ObservableCollection<object> type.

Here’s the result:

image image

  1. No comments yet.
  1. December 6, 2011 at 1:48 pm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s