Multi Grouping In DataGrid In Silverlight Application

Trong Bày này mình xin giới thiệu về cách Trình diễn Database sử dụng Multi Group tring DataGrid

Creating Silverlight Project

Fire up Visual Studio 2010 and Create Silverlight Project :

image

Tiếp theo các bạn Design một giao diện đơn giản (có thể dùng Expression Blend 4):

Đây là Code XAML của giao diện :

   1: <UserControl x:Class="GroupInDataGrid.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:     xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"

   7:     mc:Ignorable="d"

   8:     d:DesignHeight="600" d:DesignWidth="800" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">

   9:     <Grid x:Name="LayoutRoot" Width="600" Height="400">

  10:         <Grid.Background>

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

  12:                 <GradientStop Color="#FFD194D1" Offset="0" />

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

  14:             </LinearGradientBrush>

  15:         </Grid.Background>

  16:         <data:DataGrid AutoGenerateColumns="False" Height="286" HorizontalAlignment="Left" Margin="54,56,0,0" Name="dataGrid" VerticalAlignment="Top" Width="493" >

  17:             <data:DataGrid.Columns>

  18:                 <data:DataGridTextColumn Header="Họ Tên" Binding="{Binding Name}" MinWidth="120" Width="SizeToCells"/>

  19:                 <data:DataGridTextColumn Header="Giới Tính" Binding="{Binding Gender}" MinWidth="120" Width="SizeToCells"/>

  20:                 <data:DataGridTextColumn Header="Tuổi" Binding="{Binding Age}" MinWidth="120" Width="SizeToCells"/>

  21:                 <data:DataGridTextColumn Header="Quốc Gia" Binding="{Binding Country}" MinWidth="120" Width="SizeToCells"/>

  22:             </data:DataGrid.Columns>

  23:         </data:DataGrid>

  24:     </Grid>

  25: </UserControl>

Tiếp theo chúng ta tạo một Basic Database :

   1: using System;

   2: using System.Collections.Generic;

   3: using System.Linq;

   4: using System.Text;

   5:

   6: namespace GroupInDataGrid

   7: {

   8:    public class Users

   9:     {

  10:         public List<Users> CreateUsers()

  11:         {

  12:             List<Users> users = new List<Users>

  13:             {

  14:                 new Users

  15:                 {

  16:                     Name="Phạm Nguyên",Gender="M",Age=20,Country="Việt Nam",

  17:                 },

  18:                 new Users

  19:                 {

  20:                     Name="Phi Diệp",Gender="FM",Age=20,Country="Việt Nam",

  21:                 },

  22:                 new Users

  23:                 {

  24:                     Name="Chí Khang",Gender="M",Age=20,Country="Capuchia",

  25:                 },

  26:                 new Users

  27:                 {

  28:                     Name="Minh Phúc",Gender="M",Age=20,Country="Capuchia",

  29:                 },

  30:                 new Users

  31:                 {

  32:                     Name="Ngọc Sơn",Gender="M",Age=18,Country="Lào",

  33:                 },

  34:                 new Users

  35:                 {

  36:                     Name="Trọng Khoa",Gender="M",Age=20,Country="Lào",

  37:                 },

  38:                 new Users

  39:                 {

  40:                     Name="Minh Sang",Gender="M",Age=20,Country="Mỹ",

  41:                 },

  42:                 new Users

  43:                 {

  44:                     Name="Quang Huy",Gender="M",Age=20,Country="Mỹ",

  45:                 },

  46:                 new Users

  47:                 {

  48:                     Name="Song Hye Kyo",Gender="FM",Age=20,Country="Hàn Quốc",

  49:                 },

  50:                 new Users

  51:                 {

  52:                     Name="BoA",Gender="FM",Age=20,Country="Hàn Quốc",

  53:                 },

  54:             };

  55:             return users;

  56:         }

  57:

  58:         public string Name { get; set; }

  59:

  60:         public string Gender { get; set; }

  61:

  62:         public int Age { get; set; }

  63:

  64:         public string Country { get; set; }

  65:     }

  66: }

Và bây giờ Chúng ta thử Load dữ liệu ra ứng dụng :

   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:

  13: namespace GroupInDataGrid

  14: {

  15:     public partial class MainPage : UserControl

  16:     {

  17:

  18:         public MainPage()

  19:         {

  20:             InitializeComponent();

  21:             Binding();

  22:         }

  23:         /// <summary>

  24:         /// Phương Thức Binding đưa dữ liệu vào DataGrid

  25:         /// </summary>

  26:         private void Binding()

  27:         {

  28:             Users users = new Users();

  29:             List<Users> myList = new List<Users>();

  30:             myList = users.CreateUsers();

  31:             dataGrid.ItemsSource = myList;

  32:         }

  33:     }

  34: }

Và Đây là kết quả khi chạy ứng dụng:

image

Bây giờ chúng ta tiếp tục Xử Lý Multi Group:

  • để thực hiện Multi Group các bạn sử dụng Lớp PagedCollectionView để tạo một Collection và tùy chỉnh theo ý mình :
   1: namespace GroupInDataGrid

   2: {

   3:     public partial class MainPage : UserControl

   4:     {

   5:         private PagedCollectionView Collection;

   6:

   7:         public MainPage()

   8:         {

   9:             InitializeComponent();

  10:             Binding();

  11:         }

  12:         /// <summary>

  13:         /// Phương Thức Binding đưa dữ liệu vào DataGrid

  14:         /// </summary>

  15:         private void Binding()

  16:         {

  17:             Users users = new Users();

  18:             List<Users> myList = new List<Users>();

  19:             myList = users.CreateUsers();

  20:             // Đua dữ liệu vào Collection

  21:             Collection = new PagedCollectionView(myList);

  22:             // Tạo Group theo Gender và Country

  23:             Collection.GroupDescriptions.Add(new PropertyGroupDescription("Gender"));

  24:             Collection.GroupDescriptions.Add(new PropertyGroupDescription("Country"));

  25:             //Load dữ liệu vào DataGrid

  26:             dataGrid.ItemsSource = Collection;

  27:         }

  28:     }

  29: }

và sau đây là kết quả sau khi Run Application:

image

Leave a comment