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

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:

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.
 

         <dxg:GridControl.View> 

             <dxg:TableView> 

                 <i:Interaction.Behaviors> 

                     <dxgext:BandedViewBehavior> 

                         <dxgext:BandedViewBehavior.ColumnDefinitions> 

                             <dxgext:ColumnDefinition Width="*"/> 

                             <dxgext:ColumnDefinition Width="*"/> 

                         </dxgext:BandedViewBehavior.ColumnDefinitions> 

                         <dxgext:BandedViewBehavior.RowDefinitions> 

                             <dxgext:RowDefinition Height="Auto"/> 

                             <dxgext:RowDefinition Height="Auto"/> 

                         </dxgext:BandedViewBehavior.RowDefinitions> 

                         <dxgext:BandedViewBehavior.TemplatesContainer> 

                             <dxgext:TemplatesContainer/> 

                         </dxgext:BandedViewBehavior.TemplatesContainer> 

                     </dxgext:BandedViewBehavior> 

                 </i:Interaction.Behaviors> 

             </dxg:TableView> 

         </dxg:GridControl.View>

         <dxg:GridControl.Columns> 

             <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"/> 

         </dxg:GridControl.Columns>

  
 
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