Styling Merged Column and Row Header cells in SL DataGrid

Silverlight has been a revolution when it comes to the flexibility of designing and changing the UI of an application. Silverlight suite from ComponentOne leverages on this advantage to provide further customization options to its users. This blog focuses on the customizing the special Row Headers and Column Headers for C1DataGrid which are used for displaying Merged cells in the Headers. Merging in the headers are done using DataGridRowHeaderColumn and DataGridColumnHeaderRow. With the assistance of helper class file MergingHelper.cs, merging is implemented. We will not get into depth of the merging. In caseyou wish to have a look at the merging implementation, you can check the same in our online demo sample from [here]. Code for the implementation is also available with Control Explorer sample which comes with our Silverlight Suite installer. Before customizations, C1DataGrid with merging appears as shown below. I will explain the customizations in two sections. 1. Customizing the Column Headers. 2. Customizing the Row Headers.

Customize Column Headers (DataGridColumnHeaderRow)

Column headers can be customized through both XAML and Code. I will first focus on the customization through XAML in this section. Code implementation will be explained in the next section along with Row header customization process. Let’s start by defining a Gradient brush to be applied on the headers.

<LinearGradientBrush x:Key="DataGridHeaderBackGround" EndPoint="0.5,1" StartPoint="0.5,0">  
<GradientStop Color="#FFC8FFC8" Offset="1" />  
<GradientStop Color="#FF64FF64" Offset="0" />  
</LinearGradientBrush&gt;

Second step involves creating a Style to be applied on the Column headers. Since the column headers are defined by ‘DataGridColumnHeaderPresenter’, it will act as the TargetType for this style.

<!-- Column header style -->  
<Style x:Key="C1ColumnHeader" TargetType="c1:DataGridColumnHeaderPresenter">  
<Setter Property="Background" Value="{StaticResource DataGridHeaderBackGround}"/>  
<Setter Property="HorizontalContentAlignment" Value="Center" />  
<Setter Property="Foreground" Value="Red"/>  
</Style>

Now simply pass on the style to the C1DataGrid.

<!-- Set Style on DataGrid -->  
<Style TargetType="c1:C1DataGrid">  
<Setter Property="ColumnHeaderStyle" Value="{StaticResource C1ColumnHeader}"/>  
</Style>

After implementing the above XAML snippets, C1DataGrid will appear like this.

Customize Row Headers (DataGridRowHeaderColumn)

Now we have seen how to customize the Column Headers, you might think that customizing the Row headers will get into the same path. But here is the catch. At the time of writing this blog, customizing these special Row Headers through XAML is not available. This section explains the way to customize the Row Headers along with Column Headers through code. In the architecture of the DataGridRowHeaderColumn, ‘DataGridRowHeaderPresenter’ acts as a child object for ‘DataGridCellPresenter’. Using the LoadedCellPresenter() event, we search for the child object and assign the required style.

void grid_LoadedCellPresenter(object sender, DataGridCellEventArgs e)  
{  
   if (e.Cell.Presenter.Content.GetType() == typeof(C1.Silverlight.DataGrid.DataGridRowHeaderPresenter))  
   {  
     System.Windows.Controls.ContentControl cc = (e.Cell.Presenter.Content as System.Windows.Controls.ContentControl);  
     cc.Background = (LinearGradientBrush)this.Resources["DataGridHeaderBackGround"];  
     cc.HorizontalContentAlignment = System.Windows.HorizontalAlignment.Center;  
   }  
}

Similarly we can customize the Column headers by applying the style on the ‘DataGridColumnHeaderPresenter’.

if (e.Cell.Presenter.Content.GetType() == typeof(C1.Silverlight.DataGrid.DataGridColumnHeaderPresenter))  
{  
   System.Windows.Controls.ContentControl cc = (e.Cell.Presenter.Content as System.Windows.Controls.ContentControl);  
   cc.Background = (LinearGradientBrush)this.Resources["DataGridHeaderBackGround"];  
   cc.HorizontalContentAlignment = System.Windows.HorizontalAlignment.Center;  
}

Now once we have all the code snippets in their places, the final output for C1DataGrid would appear as shown in the image below. So it brings us to the end of this blog. You can see the entire implementation by downloading the source code. Download Sample

GrapeCity

GrapeCity Developer Tools
comments powered by Disqus