Click here to Skip to main content
11,806,590 members (64,245 online)
Click here to Skip to main content

[Silverlight] Custom Datapager UserControl

, 24 Aug 2012 CPOL 21.5K 181 3
Rate this:
Please Sign up or sign in to vote.
How to create custom Datapager Usercontrol in Silverlight?


This tip will help you to create a Custom data pager user control in Silverlight. In this tip, I use DependencyProperty and INotifyPropertyChanged for change navigation button effect.


In this tip, I used DependencyProperty for change Value in User control. A DependencyProperty is a static method that changes the value of an instanced object property. Also I used INotifyPropertyChanged for change property value in Custom user control. Any one can use this custom user control in his/her Silverlight project.

My Datapager looks like:

Sample Image - maximum width is 600 pixels

Now I create one class which points to your database List class. In this class, I write one function which returns a List of record.

Then finally create MainPage.Xaml which contains Datagrid and CustomDatapager User control.

Looks like:

<grid horizontalalignment="Left" width="300" 
removed="White" x:name="LayoutRoot">
            <rowdefinition height="250" />
            <rowdefinition height="Auto" />
        <sdk:datagrid horizontalalignment="Stretch" verticalalignment="
        Stretch" autogeneratecolumns="True" grid.row="0" 
        <my:customdatapagercontrol grid.row="1" pagesize="5" 

In my MainPage.Xaml.cs looks like:

 List<employee> objEmployeeList = new List<employee>();
        int pageSize = 5;

        public MainPage()
            EmployeePageData obj = new EmployeePageData();
            objEmployeeList = obj.LoadPageRecord();
            pagerNew.PropertyChanged += 
            new System.ComponentModel.PropertyChangedEventHandler(pagerNew_PropertyChanged);
            pagerNew.CurrentPage = 1;
            pagerNew.TotalRecord = objEmployeeList.Count;
        void pagerNew_PropertyChanged
        (object sender, System.ComponentModel.PropertyChangedEventArgs e)
            if (e.PropertyName == "CurrentPage")
                int currentPage = pagerNew.CurrentPage;
                grdEmployeesNew.ItemsSource = objEmployeeList.Skip
                	((currentPage - 1) * pageSize).Take(pageSize).ToList();


Finally Page looks like:

Sample Image - maximum width is 600 pixels


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Savalia Manoj M
Software Developer (Senior)
India India
No Biography provided

You may also be interested in...

Comments and Discussions

GeneralMy vote of 5 Pin
Rachit Vora27-Oct-12 0:49
memberRachit Vora27-Oct-12 0:49 
GeneralRe: My vote of 5 Pin
Savalia Manoj M28-Oct-12 17:31
memberSavalia Manoj M28-Oct-12 17:31 
GeneralMy vote of 5 Pin
Christian Amado24-Aug-12 16:46
memberChristian Amado24-Aug-12 16:46 
GeneralRe: My vote of 5 Pin
Savalia Manoj M26-Aug-12 17:14
memberSavalia Manoj M26-Aug-12 17:14 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.151002.1 | Last Updated 24 Aug 2012
Article Copyright 2012 by Savalia Manoj M
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid