dimanche 21 février 2010

Footer on WPF DataGrid: by use several synchronized datagrid


Last year, I proposed a version of WPF DataGrid with Footer.

But this version can not apply on new WPF 4.0 Datagrid (because i was make too much changes in source code of the component)

With this new approach, I use several DataGrid in the same Window, and I synchronizes each one on :

  • Scrolling event (horizontal and vertical)
  • Drag and drop column header
  • Change width of column on main DataGrid

Even if it is more complex to apply for each Data window (It is necessary to instanciate several DataGrid, set relatation between each one, etc.) , It seems pretty good because :

  • It can apply on new version WPF 4.0 Datagrid
  • It can manage too the merge header of multiple column (cf demo)
  • It can use to do something like “Microsoft Excel" to freeze some column or row in a global Data grid !

Screenshot of the demo :



Download v1.00 here

  • WPF 3.5 version (on Visual Studio 2008)
  • WPF 4.0 version (on Visual Studio 2010 Beta)


To do this, It is necessary to :

  • Have the same number of column in each DataGrid (except if you merge header column with specific attached property)

    <tk:DataGridTextColumn local:AssociatedDataGrid.ColumnSpan="2"
                           Binding="{Binding A}"/>

  • I use attached Dependency Property to set the link between main grid and another grid

             ItemsSource="{Binding DataSource}"
             local:AssociatedDataGrid.Bottom="{Binding ElementName=xBottom}"
             local:AssociatedDataGrid.Top="{Binding ElementName=xTop}"
             local:AssociatedDataGrid.Right="{Binding ElementName=xRight}"
             local:AssociatedDataGrid.Left="{Binding ElementName=xLeft}"

  • and it’s all !

My demo is a demo … I think lot of thing is not finished by main idea is in it !

Best regards