HowTo: Display Information on Column Headers

Many a times there occurs a need to display some kind of information on a Grid's Column Headers itself. Consider for example, a Company CEO, who wishes to know the total Number of Employees in his company and the salaries paid to them in Total by the company. If the Employee Data is displayed in the grid with Column(s) as Employee Name, Designation and Salary then this desired information could be displayed on the Grid's Column Headers : Employee Name and Salary as TotalEmployees and TotalSalary, respectively. This blog explains an approach to implement the above behaviour in our ComponentOne DataGrid for WPF/Silverlight.

Binding the C1DataGrid

1. Create a underlying class 'Employee' implementing the INotifyPropertyChanged interface. 2. Define a view model class to hold the collection of items of type 'Employee' to be displayed in the C1DataGrid. 3. This class should have the properties that return the total number of employees and the total salary to be displayed in the header of the grid columns. 4. For the binding engine to re-query these properties whenever either of the Employee items in the collection changes, hook up an event handler that raises the PropertyChangedEventHandler for the CountOfEmployees and TotalSalary properties whenever this happens. 5. Set an instance of the view model class as the window's DataContext.

Custom Style for grid Headers in XAML

To display the total number of employees and the total salary in the header of the columns in the C1DataGrid, we need to define a custom Style with a TextBlock that binds to the CountOfEmployees and TotalSalary properties :

<!--Employee (Names) Column : Count of Employees is displayed here-->  
<my:DataGridTextColumn Header="Employees" Binding="{Binding Name}">  
  <my:DataGridTextColumn.HeaderStyle>  
     <Style TargetType="my:DataGridColumnHeaderPresenter">  
       <Setter Property="Template">  
         <Setter.Value>  
           <ControlTemplate TargetType="my:DataGridColumnHeaderPresenter">  
            <Grid>  
             <StackPanel>  
             <TextBlock Text="Employee (Names)" TextAlignment="Center" />  
             <TextBlock TextAlignment="Center" Text="{Binding DataContext.CountOfEmployees, ElementName=grid, Mode=OneWay}"/>  
              </StackPanel>  
             </Grid>  
           </ControlTemplate>  
          </Setter.Value>  
         </Setter>  
      </Style>  
   </my:DataGridTextColumn.HeaderStyle>  
</my:DataGridTextColumn>  

<!--Salary Column : Total Salary is displayed here-->  
<my:DataGridTextColumn Header="Salary" Binding="{Binding Salary}">  
  <my:DataGridTextColumn.HeaderStyle>  
    <Style TargetType="my:DataGridColumnHeaderPresenter">  
     <Setter Property="Template">  
      <Setter.Value>  
       <ControlTemplate TargetType="my:DataGridColumnHeaderPresenter">  
        <Grid>  
         <StackPanel>  
          <TextBlock Text="Salary" TextAlignment="Center" />  
           <TextBlock TextAlignment="Center" Text="{Binding DataContext.TotalSalary, ElementName=grid, Mode=OneWay}"/>  
         </StackPanel>  
        </Grid>  
       </ControlTemplate>  
      </Setter.Value>  
    </Setter>  
  </Style>  
 </my:DataGridTextColumn.HeaderStyle>  
</my:DataGridTextColumn>  

Desired Information could be retrieved easily from the Grid's column Headers by the concerned person. Download WPF Sample Download SL Sample