Attach Tooltips to Column Headers

Tooltips are a commonly used method to show informative descriptions for an object to the end users of an application. Silverlight continues to provide similar functionality in its applications, either in the XAML designer or at runtime through code. This blog article shows small code snippets to implement Tooltip service on C1DataGrid Column Headers in XAML and code behind.

Implementing Tooltip in XAML

C1DataGrid gives the option to customize the Header using the HeaderStyle property. We can use this Style object to define our Tooltip Service as shown in the given XAML code.

<Style x:Key="headerTooltipStyle" TargetType="c1grid:DataGridColumnHeaderPresenter">  
 <Setter Property="ToolTipService.ToolTip" Value="ID" />  
</Style>  

<c1grid:C1DataGrid.Columns>  
  <c1grid:DataGridBoundColumn Header="ID" Binding="{Binding UserId}" HeaderStyle="{StaticResource headerTooltipStyle}"/>  
  <c1grid:DataGridBoundColumn Header="Name" Binding="{Binding Name}">  
    <c1grid:DataGridBoundColumn.HeaderStyle>  
      <Style TargetType="c1grid:DataGridColumnHeaderPresenter">  
        <Setter Property="ToolTipService.ToolTip" Value="User Name" />  
      </Style>  
    </c1grid:DataGridBoundColumn.HeaderStyle>  
  </c1grid:DataGridBoundColumn>  
</c1grid:C1DataGrid.Columns>  

Implementing Tooltip in Code

Even though we can easily implement tooltip in XAML; however, it has the limitation that we have to define static text for the Tooltip. We cannot bind Tooltip to an actual Column Header Text. Following code uses the LoadedColumnHeaderPresenter to attach the Tooltip to the Column Header at runtime.

void c1DataGrdi1_LoadedColumnHeaderPresenter(object sender, C1.Silverlight.DataGrid.DataGridColumnEventArgs e)  
{  
  TextBlock tBlock = e.Column.HeaderPresenter.Content as TextBlock;  
  ToolTipService.SetToolTip(e.Column.HeaderPresenter, tBlock.Text);  
}  

Click on the image to see the demo implementation. Refer to the attached sample for complete source code. Download Sample C#