[Silverlight] Custom Datapager UserControl

• Download source

Introduction

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.

Background

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:

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">
        <grid.rowdefinitions>
            <rowdefinition height="250" />
            <rowdefinition height="Auto" />
        </grid.rowdefinitions>
        <sdk:datagrid horizontalalignment="Stretch" verticalalignment="
        Stretch" autogeneratecolumns="True" grid.row="0" 
        name="grdEmployeesNew">
        <my:customdatapagercontrol grid.row="1" pagesize="5" 
        x:name="pagerNew">
    </my:customdatapagercontrol></sdk:datagrid></grid>

In my MainPage.Xaml.cs looks like:

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

        public MainPage()
        {
            InitializeComponent();
            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();
            }
        }

</employee></employee>

Finally Page looks like: