Click here to Skip to main content
Click here to Skip to main content

[Silverlight] Custom Datapager UserControl

By , 24 Aug 2012
Rate this:
Please Sign up or sign in to vote.

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:

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">
        <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:

Sample Image - maximum width is 600 pixels

License

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

Comments and Discussions

 
GeneralMy vote of 5 PinmemberRachit Vora27-Oct-12 0:49 
GeneralRe: My vote of 5 PinmemberSavalia Manoj M28-Oct-12 17:31 
GeneralMy vote of 5 PinmemberChristian Amado24-Aug-12 16:46 
GeneralRe: My vote of 5 PinmemberSavalia 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 | Mobile
Web04 | 2.8.140415.2 | Last Updated 24 Aug 2012
Article Copyright 2012 by Savalia Manoj M
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid