Sort Desription in Datagrid in Silverlight

I.Introduction

Trong bài này mình xin chia sẽ cách Sắp xết dữ liệu trên Datagrid trong Silverlight .

II.Creating Silverlight Application

Fire Visual Studio 2010 and Create Silverlight Application Project :

image

Tiếp theo chúng ta làm một giao diện đơn giản  gồm 1 DataGrid để chúng ta show dữ liệu:

image

Sau đây là code XAML giao diện :

<UserControl x:Class="SortDescriptionDataGrid.MainPage"

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

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

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

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

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

    mc:Ignorable="d"

    d:DesignHeight="300" d:DesignWidth="400" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">


    <Grid x:Name="LayoutRoot">

        <Grid.RowDefinitions>

            <RowDefinition Height="80"/>

            <RowDefinition Height="20"/>

            <RowDefinition Height="*"/>

            <RowDefinition Height="40"></RowDefinition>

        </Grid.RowDefinitions>

        <TextBlock FontSize="20" Margin="70,23,68,21">Sort Description in DataGrid</TextBlock>

        <StackPanel Grid.Row="1">

            <StackPanel.Background>

                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                    <GradientStop Color="Black" Offset="0" />

                    <GradientStop Color="Black" Offset="1" />

                    <GradientStop Color="#FF757575" Offset="0.5" />

                </LinearGradientBrush>

            </StackPanel.Background>

        </StackPanel>

        <data:DataGrid Grid.Row="2" Name="myData" AutoGenerateColumns="True"/>

        <Button Grid.Row="3"></Button>

        <Grid.Background>

            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                <GradientStop Color="#FF83BEBE" Offset="0" />

                <GradientStop Color="White" Offset="1" />

            </LinearGradientBrush>

        </Grid.Background>

    </Grid>

</UserControl>

Bây giờ chúng ta tạo một Basic Database :

public class User

    {

        string name;

        public string Name { get { return name; } set { name = value; } }

        string gender;

        public string Gender { get { return gender; } set { gender = value; } }

        int age;

        public int Age { get { return age; } set { age = value; } }

        string country;

        public string Country { get { return country; } set { country = value; } }

    }

Tiếp theo là chúng ta xử lý việc đưa Dữ liệu ra DataGrid trong Fille MainPage.XAML.cs :

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using System.Windows.Data;

using System.ComponentModel;


namespace SortDescriptionDataGrid

{

    public partial class MainPage : UserControl

    {

        List<User> myList;

        public MainPage()

        {

            InitializeComponent();

            this.Loaded += new RoutedEventHandler(MainPage_Loaded);

        }


        void MainPage_Loaded(object sender, RoutedEventArgs e)

        {

            myList = new List<User>{

                new User{Name = "Phạm Nguyên",Gender="M",Age = 20,Country = "Viet Nam"},

                new User{Name = "Phi Diệp",Gender="FM",Age = 20,Country = "Viet Nam"},

                new User{Name = "Nhạc Linh Sang",Gender="FM",Age = 30,Country = "Hoa Sơn"},

                new User{Name = "Lệnh Hồ Sung",Gender="M",Age = 20,Country = "Hoa Sơn"},

                new User{Name = "Lý Tầm Quan",Gender="M",Age = 20,Country = "Trung Quốc"},

                new User{Name = "Lâm Thi Âm",Gender="FM",Age = 20,Country = "Trung Quốc"},

                new User{Name = "Ngọc Sơn",Gender="M",Age = 20,Country = "An Khê"},

                new User{Name = "Chí Khang",Gender="M",Age = 20,Country = "Campuchia"},

                new User{Name = "Trong Khoa",Gender="M",Age = 20,Country = "Campuchia"},

                new User{Name = "Minh Phúc",Gender="M",Age = 20,Country = "Phat Xit Đức"},

                new User{Name = "Quang Huy",Gender="M",Age = 20,Country = "Mỹ"},

                new User{Name = "Ngọc Hiển",Gender="M",Age = 20,Country = "Lào"},

                new User{Name = "Minh Sang",Gender="M",Age = 20,Country = "Mỹ"},

                new User{Name = "Chân Tử Đan",Gender="M",Age = 20,Country = "Trung Quốc"},

            };

            myData.RowHeight = 30;

            myData.ItemsSource = myList;

        }

    }

}

Bây giờ chúng ta thử Run Application(Ctrl + F5):

image

Tiếp theo chúng ta Sử dụng lớp PagedCollectionView để tạo một Collection dữ liệu và Sort nó khi Show ra ngoài :

   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: using System.ComponentModel;

  14:

  15: namespace SortDescriptionDataGrid

  16: {

  17:     public partial class MainPage : UserControl

  18:     {

  19:         List<User> myList;

  20:         public MainPage()

  21:         {

  22:             InitializeComponent();

  23:             this.Loaded += new RoutedEventHandler(MainPage_Loaded);

  24:         }

  25:

  26:         void MainPage_Loaded(object sender, RoutedEventArgs e)

  27:         {

  28:             myList = new List<User>{

  29:                 new User{Name = "Phạm Nguyên",Gender="M",Age = 20,Country = "Viet Nam"},

  30:                 new User{Name = "Phi Diệp",Gender="FM",Age = 20,Country = "Viet Nam"},

  31:                 new User{Name = "Nhạc Linh Sang",Gender="FM",Age = 30,Country = "Hoa Sơn"},

  32:                 new User{Name = "Lệnh Hồ Sung",Gender="M",Age = 20,Country = "Hoa Sơn"},

  33:                 new User{Name = "Lý Tầm Quan",Gender="M",Age = 20,Country = "Trung Quốc"},

  34:                 new User{Name = "Lâm Thi Âm",Gender="FM",Age = 20,Country = "Trung Quốc"},

  35:                 new User{Name = "Ngọc Sơn",Gender="M",Age = 20,Country = "An Khê"},

  36:                 new User{Name = "Chí Khang",Gender="M",Age = 20,Country = "Campuchia"},

  37:                 new User{Name = "Trong Khoa",Gender="M",Age = 20,Country = "Campuchia"},

  38:                 new User{Name = "Minh Phúc",Gender="M",Age = 20,Country = "Phat Xit Đức"},

  39:                 new User{Name = "Quang Huy",Gender="M",Age = 20,Country = "Mỹ"},

  40:                 new User{Name = "Ngọc Hiển",Gender="M",Age = 20,Country = "Lào"},

  41:                 new User{Name = "Minh Sang",Gender="M",Age = 20,Country = "Mỹ"},

  42:                 new User{Name = "Chân Tử Đan",Gender="M",Age = 20,Country = "Trung Quốc"},

  43:             };

  44:

  45:             PagedCollectionView Collection = new PagedCollectionView(myList);

  46:             Collection.SortDescriptions.Add(new SortDescription("Name",ListSortDirection.Ascending));

  47:             Collection.SortDescriptions.Add(new SortDescription("Country",ListSortDirection.Descending));

  48:

  49:             myData.RowHeight = 30;

  50:             myData.ItemsSource = myList;

  51:         }

  52:     }

  53: }

Với một vài dòng Code sử dụng PagedCollectionView chúng ta được kết quả sau :

image

Leave a comment