[Silverlight] How to make a simple PivotTable extended from Silverlight DataGrid

男娘i 2021-12-18 05:43 250阅读 0赞

Recently, I have recieved a few questions about Silverlight DataGrid. It's about how to change one row to be columns just like we see in an Excel book sheet. Actually, we call this kind of table as a PivotTable or PivotGrid.

As this is another control which has not been included as a build-in control, so the best way is to create this kind of controls by ourselves, but it need a lot of labor time. By the way, there are many third-part Silverlight control manufactures have already create it, if you need good support, good built-in styles for your control and also you have the budget, then buy one and you don't need to read the later part of this blog.

This is a simple sample which talked about how to extend the build-in DataGrid to be a PivotTable for those people who has no spare money or a Silverlight-lover.

So let's start the topic and show the preview image.

![2011062921021310.png][]

The left part of the preview image is the PivotDataGrid, the right part is a common datagrid with the same ItemsSource.

Step 1, please open the Visual Studio, and create a Silverlight Application project, and also you need to install the Silverlight toolkit([http://silverlight.codeplex.com][http_silverlight.codeplex.com])

Step 2, please create a Silverlight Class Library for the PivotDataGrid class, name it and change the namespace.

Step 3, let me post all the codes and please read the comments in the codes.

namespace  System.Windows.Controls.Extend  
\{  
 public  class  PivotDataGrid : DataGrid  
\{  
 //  tempdata used to make a new pivoted collection and bind it  
 //  to the datagrid.   
  private  ObservableCollection < PivotDataGridItem >  tempdata;  
 //  columnHeaderValues used temporarily to store the all the data  
 //  which used to be the new headers.   
  private  List < object >  columnHeaderValues;  
 //  rowdata used temporarily to store the other data which used  
 //  to be the left rows.   
  private  Dictionary < object , List < object >>  rowdata;  
  
 private  IEnumerable \_workSource;  
 //  we hide the base ItemsSource because we need to make them two  
 //  available at the same time.   
  public  new  IEnumerable ItemsSource  
\{  
 get   
\{  
 return  \_workSource;  
\}  
 set   
\{  
\_workSource  =  value;  
 //  we pivot the collection here and  
 //  create the new collection to bind.   
  ApplyWorkDataSource(value);  
\}  
\}  
  
 //  we should know which property will be changed to column header.   
  public  string  HeaderProperty \{  get ;  set ; \}  
  
 public  PivotDataGrid()  
:  base ()  
\{  
  
 this .HeadersVisibility  =  DataGridHeadersVisibility.All;  
 this .LoadingRow  \+=  new  EventHandler < DataGridRowEventArgs > (PivotGrid\_LoadingRow);  
\}  
  
  
 private  void  ApplyWorkDataSource(IEnumerable source)  
\{  
 //  generate the new source   
  this .convertItemsSourceForPivotGrid(source);  
 this .AutoGenerateColumns  =  false ;  
 int  i  =  0 ;  
 //  generate the new columns according to the new source   
  foreach  ( object  obj  in  columnHeaderValues)  
\{  
  
 this .Columns.Add( new  DataGridTextColumn()  
\{  
Header  =  obj.ToString(),  
Binding  =  new  Binding( " Cells\[ "  \+  i.ToString()  \+  " \] " )  
\});  
  
i \++ ;  
\}  
 //  generate the new collection   
  tempdata  =  new  ObservableCollection < PivotDataGridItem > ();  
 foreach  ( object  objkey  in  rowdata.Keys)  
\{  
PivotDataGridItem item  =  new  PivotDataGridItem();  
 foreach  ( object  obj2  in  rowdata\[objkey\])  
\{  
item.Cells.Add(obj2);  
\}  
item.RowHeader  =  objkey;  
tempdata.Add(item);  
\}  
 //  bind the source to the base datagrid   
  base .ItemsSource  =  tempdata;  
\}  
  
 private  void  convertItemsSourceForPivotGrid(IEnumerable original)  
\{  
 this .columnHeaderValues  =  new  List < object > ();  
 this .rowdata  =  new  Dictionary < object , List < object >> ();  
 //  the principle is to use Reflection to get all the public  
 //  properties which need to be show in the columns.  
 //  we can extend this part to meet different requirements.   
  foreach  ( object  obj  in  original)  
\{  
 if  (obj  ==  null )  
 continue ;  
  
 foreach  (PropertyInfo pinfo  in  obj.GetType().GetProperties())  
\{  
 if  (pinfo  !=  null )  
\{  
 if  (pinfo.Name  ==  this .HeaderProperty)  
\{  
 this .columnHeaderValues.Add(pinfo.GetValue(obj,  null ));  
\}  
 else   
\{  
 if  ( ! rowdata.ContainsKey(pinfo.Name))  
\{  
 this .rowdata.Add(pinfo.Name,  new  List < object > ());  
\}  
 this .rowdata\[pinfo.Name\].Add(pinfo.GetValue(obj,  null ));  
\}  
\}  
\}  
\}  
\}  
  
 private  void  PivotGrid\_LoadingRow( object  sender, DataGridRowEventArgs e)  
\{  
 //  set the new row header.   
  if  (tempdata  !=  null  &&  tempdata.Count  >=  e.Row.GetIndex()  \+  1 )  
e.Row.Header  =  tempdata\[e.Row.GetIndex()\].RowHeader;  
\}  
\}  
\}

namespace  System.Windows.Controls.Extend  
\{  
 public  class  PivotDataGridItem  
\{  
 private  ObservableCollection < object >  \_items  =  new  ObservableCollection < object > ();  
 public  ObservableCollection < object >  Cells \{  get  \{  return  \_items; \} \}  
 public  object  RowHeader \{  get ;  set ; \}  
\}  
\}

Step 4, then we can test the control.

< UserControl  x:Class ="SLPivotTableGrid.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"   
mc:Ignorable ="d"   
d:DesignHeight ="300"  d:DesignWidth ="400"  xmlns:sdk ="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" >   
  
 < Grid  x:Name ="LayoutRoot"  Background ="White" >   
 < Grid.ColumnDefinitions >   
 < ColumnDefinition ></ ColumnDefinition >   
 < ColumnDefinition ></ ColumnDefinition >   
 </ Grid.ColumnDefinitions >   
 </ Grid >   
 </ UserControl >

namespace  SLPivotTableGrid  
\{  
 public  partial  class  MainPage : UserControl  
\{  
 public  MainPage()  
\{  
InitializeComponent();  
 //  generate a sample data   
  ObservableCollection < PivotGridSampleItem >  source  =  new  ObservableCollection < PivotGridSampleItem > ();  
DateTime nextMonday  =  DateTime.Now.AddDays(( double )(( 8  \-  ( int )DateTime.Now.DayOfWeek)  %  7 ));  
 for  ( int  i  =  0 ; i  <  10 ; i \++ )  
\{  
source.Add( new  PivotGridSampleItem()  
\{  
Date  =  nextMonday.AddDays( 28  \*  i),  
RowA  =  " RowA\_ "  \+  i,  
RowB  =  new  Random(i).Next( 100 ,  9999 ),  
RowC  =  Convert.ToBoolean(i  %  2 )  
\});  
\}  
  
 //  create a PivotDataGrid   
  PivotDataGrid pGrid  =  new  PivotDataGrid();  
pGrid.HeaderProperty  =  " Date " ;  
pGrid.ItemsSource  =  source;  
pGrid.Loaded  \+=  (se, ev)  =>   
\{  
 foreach  (DataGridColumn dgc  in  pGrid.Columns)  
\{  
dgc.Header  =  DateTime.Parse(dgc.Header.ToString()).ToString( " yyyy-MM-dd " );  
\}  
\};  
Grid.SetColumn(pGrid,  0 );  
 this .LayoutRoot.Children.Add(pGrid);  
  
 //  create a common DataGrid   
  DataGrid dg  =  new  DataGrid();  
dg.ItemsSource  =  source;  
Grid.SetColumn(dg,  1 );  
 this .LayoutRoot.Children.Add(dg);  
\}  
\}  
  
 public  class  PivotGridSampleItem  
\{  
 public  DateTime Date \{  get ;  set ; \}  
 public  string  RowA \{  get ;  set ; \}  
 public  int  RowB \{  get ;  set ; \}  
 public  bool  RowC \{  get ;  set ; \}  
\}  
  
  
\}

That's all, hope this is helpful.

Attach the sample project:

[http://files.cnblogs.com/JerryWeng/SLPivotDataGrid.zip][http_files.cnblogs.com_JerryWeng_SLPivotDataGrid.zip]

转载于:https://www.cnblogs.com/JerryWeng/archive/2011/06/29/2093629.html

[2011062921021310.png]: /images/20211218/cbd8f4312d1d4620b0213f7ac7669863.png
[http_silverlight.codeplex.com]: http://silverlight.codeplex.com
[http_files.cnblogs.com_JerryWeng_SLPivotDataGrid.zip]: http://files.cnblogs.com/JerryWeng/SLPivotDataGrid.zip