Silverlight Tips provides simple and useful tutorials and tips with real life examples, live demos and sample codes to download.
About authors:
Damon Serji
Damon Serji,
Silverlight developer working at Metia in London.
Gavin Wignall
Gavin Wignall,
Interactive Design Lead, working in design for over 10 years, the last 3 being in Silverlight.
Allan Muller
Allan Muller,
Developer, working on various types of Silverlight and WCF projects.
Recent comments
Get Microsoft Silverlight  Silverlight pagination

Pagination (DataPager) is a built-in control in Silverlight 3.0. You simply bind your data to the DataContext through a PagedCollectionView variable.

PagedCollectionView is a class that could store collection of your data with IEnumerable interface. Through this class you are then able to use cool features such as sorting, filtering and paging functionalities.

To test pagination in this post I created a class of type “Contact” to store name, surname and tel number for each contact.

public class Contact
{
    public string Name { get; set; }
    public string Surname { get; set; }
    public int Telephone { get; set; }
}

To get a better visual and have different fields display for each of my contacts I created a ContactTemplate.xaml. This simply contains the template for each of my contacts:


<Grid x:Name="LayoutRoot" Height="50">
    <TextBlock Text="{Binding Name}" HorizontalAlignment="Left" VerticalAlignment="Top" Height="19" />
    <TextBlock Text="{Binding Surname}" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="100,2,0,19" />
    <TextBlock Text="Tel:" Margin="0,17,0,6" HorizontalAlignment="Left" />
    <TextBlock Text="{Binding Telephone}" Margin="25,17,0,7" />
</Grid>

In my Mainpage.xaml I use an ItemsControl to list all contacts that have created using Contact class, and since I want each contact to be displayed within my ContactTemplate I display a reference to the ContactTemplate.xaml page and bind each contact to that:


<ItemsControl x:Name="Contacts" ItemsSource="{Binding}" >
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Local:ContactTemplate />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

To create a reference to the ContactTemplate.xaml you first need to create a namespace in your MainPage.xaml that refers to the project which ContactTemplate.xaml exists (the same project in our case). So don’t forget to add this to the top of the MainPage.xaml in order for your above code to work:


xmlns:Local="clr-namespace:SilverlightPagination"

Last thing we need to do in the MainPage.xaml is to add a reference to the pagination control (DataPager):

First add the reference:


xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"

Now add the control:


<data:DataPager DisplayMode="PreviousNext" Margin="0,0,0,4" HorizontalAlignment="Center" Source="{Binding}" NumericButtonCount="{Binding Value, ElementName=numericButtonCount}" AutoEllipsis="{Binding IsChecked, ElementName=autoEllipsis}" IsTotalItemCountFixed="{Binding IsChecked, ElementName=totalItemCountFixed}" />

And to get it working your MainPage.xaml.cs should look something like this:

private List<Contact> allContacts;

public MainPage()
{
    InitializeComponent();
    this.Loaded += new RoutedEventHandler(MainPage_Loaded);
}

private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
    allContacts = new List<Contact>();
    AddData();

    PagedCollectionView pcv = new PagedCollectionView(allContacts);
    pcv.PageSize = 6;
    DataContext = pcv;
}

private void AddData()
{
    for (int i = 0; i <25; i ++)
    {
        Contact contact = new Contact();
        contact.Name = "DummyName " + i;
        contact.Surname = "DummySurname " + i;
        contact.Telephone = 020711111 + i;

        allContacts.Add(contact);
    }
}

In summary, AddData() creates some contacts so that we can test this project, and the rest happens in the MainPage_Loaded. As I explained at the beginning of this post, if you add your list of data to a variable of type PagedCollectionView then you can use the pagination feature of this class. Set the page size, and set the DataContext of the page to your PagedCollectionView variable. The DataContext simply binds your data where ever it is asked to down your code (even in your ContactTemplate.xaml page that you had already added in the ItemsControl.

Posted by Allan Muller on 14. December 2009 19:33 under: Intermediate
 with 1 Comments