Home > Silverlight > Synchronous scrolling DataGrid in Silverlight

Synchronous scrolling DataGrid in Silverlight

If you read the title of this post, you can think WTF. But I have used it in a project… I have used it for hiding some columns in a DataGrid with an expander:

Columns ExpandedColumns not Expanded

You can see in the first image that the first datagrid is expanded and on the second image the first datagrid is not expanded. If you scroll with the first DataGrid the second DataGrid scrolls automatically to the same position of the first DataGrid and vice versa.

You can do this with the following XAML code:

The steps you have to do:

1) Bind the DataGrid wich must scroll synchronous to the current Datagrid on the ‘SynchronousScrollingDataGrid’ property: SynchronousScrollingDataGrid=”{Binding ElementName=firstDataGrid}”
2) Give the ‘RowHeight’ property a hardcoded value, because the back-code of the Synchronous scrolling DataGrid uses this property. If the RowHeight is not set the value is ‘NaN’.
3) As you can see in the example code above you can bind the ‘SynchronousScrollingDataGrid’ property of the second DataGrid to the first DataGrid.

Download sample code

I want to say thanx to my colleague Sandrino Di Mattia for his blog post “Controlling and viewing the ScrollBar positions of your Silverlight DataGrid”. This post was very usefull for me to create my synchronous DataGrid.

  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: