WPF and Silverlight Grid Control - Advanced Banded View Layout (a cool workaround)

Thinking Out Loud
21 September 2011

In the next minor release of DXperience (11.1.8), we will be extending the capabilities of our WPF and Silverlight Data Grid with a cool "workaround" to generate Banded View Layouts - allowing you to arrange column headers and corresponding data cells across multiple rows. This new view also allows you to create cells that occupy multiple rows. Gotta love pictures and as such, here are two that illustrate what an Advanced Banded View looks like:

WPF Silverlight Grid Banded View 

WPF Silverlight Grid Banded View 

To generate these banded columns for the DXGrid (WPF and Silverlight), our engineers created a special attached behavior for the DXGrid TableView - BandedViewBehavior.

This class contains two properties that describe the column header's layout: ColumnDefinitions and RowDefinitions (just like the standard Grid panel).
The ColumnDefinitions property is a collection of ColumnDefinition elements that defines the horizontal layout of column headers.
You can customize each ColumnDefinition by setting its properties: Width(GridLength), MinWidth(double). This property works much like the standard Grid panel.
You can also customize vertical column layout by modifying the view’s RowDefinitions collection.
To indicate the position of a grid column, specify the attached properties:  BandedViewBehavior.Column, BandedViewBehavior.Row, BandedViewBehavior.ColumnSpan, BandedViewBehavior.RowSpan
You can also declare a special column for grouping by setting the BandedViewBehavior.IsBand attached property. Cells will not be created for this column and its header will be bold.

With this approach you can create both groups of columns and rows (In general, you can create any layout)..
Additionally, BandedViewBehavior supports all associated features of the DXGrid you've come to expect: resizing columns, column grouping, navigation, editing, etc.
Let's look at a simple example:
1. Define a simple layout: two columns and two rows.

                             <dxgext:ColumnDefinition Width="*"/> 
                             <dxgext:ColumnDefinition Width="*"/> 
                             <dxgext:RowDefinition Height="Auto"/> 
                             <dxgext:RowDefinition Height="Auto"/> 

2. Define three grid columns: one that will be common, two columns will be inside the common column.
             <dxg:GridColumn FieldName="Common" dxgext:BandedViewBehavior.ColumnSpan="2" dxgext:BandedViewBehavior.IsBand="True"/> 
             <dxg:GridColumn FieldName="First" dxgext:BandedViewBehavior.Row="1"/> 
             <dxg:GridColumn FieldName="Second" dxgext:BandedViewBehavior.Row="1" dxgext:BandedViewBehavior.Column="1"/> 

You'll see that we used the same logic as that in the standard grid. 
The Result:

Silverlight WPF Grid Banded View
We are looking forward to providing an even more advanced LayoutView in the future with the ability to customize rows/header layouts at runtime as well as on the design surface. 
This approach will be presented as an example in our code central for v2011 vol 1. In the next major release, we will provide a special Extensions Library that contains this killer new feature.

Free DevExpress Products - Get Your Copy Today

The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the DevExpress Support Center at your convenience. We'll be happy to follow-up.
No Comments

Please login or register to post comments.