Sử dụng DataPager trong Silverlight

I.Introduction

-DataPager là một khái niệm chắc có lẽ khá quen thuộc với các bạn, nếu bạn nào đã từng phát triển web với ASP.NET thì các bạn ắt hẳn đã từng sử dụng DataPager.

-DataPager dùng để phân trang dữ liệu khi View, giúp chúng ta giải quyết vấn đề dữ liệu quá nhiều có thể phân trang để xem dể dàng hơn

-Trong bài này mình xin chia sẻ cách sử dụng DataPager trong Silverlight

II.Creating project and Coding

Các bạn mở VS 2010 lên vào tạo Silverlight Application

chúng ta tạo một giao diện đơn giản gồm DataPager, và DataGrid như đoạn code XAML sau:

   1: <UserControl x:Class="DataPager.MainPage"

   2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

   3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   4:     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

   5:     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

   6:     mc:Ignorable="d"

   7:     d:DesignHeight="300" d:DesignWidth="400"

   8:     xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">

9:

  10:     <Grid x:Name="LayoutRoot" Background="White">

  11:             <sdk:DataGrid Margin="1,1,1,27" Name="DataView"></sdk:DataGrid>

  12:             <sdk:DataPager Margin="1,270,1,2" Name="page" PageSize="4"/>

  13:     </Grid>

  14: </UserControl>

tiếp theo chúng ta tạo một CSDL đơn giản :

   1: public class Student

   2:     {

   3:         public List<Student> getData()

   4:         {

   5:             List<Student> std = new List<Student>

   6:             {

   7:                 new Student{ID = 1, Name = "Pham Nguyen"},

   8:                 new Student{ID = 2, Name = "Phi Diep"},

   9:                 new Student{ID = 3, Name = "Ngoc Hien"},

  10:                 new Student{ID = 4, Name = "Trong Khoa"},

  11:                 new Student{ID = 5, Name = "Chi Khang"},

  12:                 new Student{ID = 6, Name = "Minh Phuc"},

  13:                 new Student{ID = 7, Name = "Quang Huy"},

  14:                 new Student{ID = 8, Name = "Ngoc Son"},

  15:                 new Student{ID = 9, Name = "Minh Sang"},

  16:             };

  17:             return std;

  18:         }

19:

  20:         public int ID { get; set; }

21:

  22:         public string Name { get; set; }

  23:     }

Bây giờ chúng ta vào xử lý code XAML để thực hiện việc Show dữ liệu ra ngoài, và phân trang, mỗi trang 4 items (trong file MainPage.xaml.cs):

   1: using System;

   2: using System.Collections.Generic;

   3: using System.Linq;

   4: using System.Net;

   5: using System.Windows;

   6: using System.Windows.Controls;

   7: using System.Windows.Documents;

   8: using System.Windows.Input;

   9: using System.Windows.Media;

  10: using System.Windows.Media.Animation;

  11: using System.Windows.Shapes;

  12: using System.Windows.Data;

13:

  14: namespace DataPager

  15: {

  16:     public partial class MainPage : UserControl

  17:     {

  18:         Student t = new Student();

  19:         public MainPage()

  20:         {

  21:             InitializeComponent();

  22:             PagedCollectionView collection = new PagedCollectionView(t.getData());

  23:             DataView.ItemsSource = collection;

  24:             page.Source = DataView.ItemsSource;

  25:         }

  26:     }

  27: }

Bây giờ chúng ta thử chạy ứng dụng để xem kết quả:

Để quy định một trang có bao nhiêu Item, các bạn tùy chỉ thuộc tính PageSize = “Số Item” , trong code XAML như sau :

   1: <sdk:DataPager Margin="1,270,1,2" Name="page" PageSize="4"/>

Ngoài ra chúng ta có thể tùy chỉnh DataPager qua thuộc tính DisplayMode (Mặc định DisplayMode = “FirstLastPreviousNext”):Các bạn dể dàng thấy sự khác biệc giữa các kiểu DisplayMode ở các minh họa phía sau

DisplayMode="FirstLastNumeric" : Với kiểu DisplayMode này DataPager sẽ phân thành các Trang với chỉ số sang hiện có (vd như có 3 trang thì DataPager sẽ hiện ra chỉ số từ 1 2 3 )