Showing ToolTip on Silverlight 4 DatagridRow using DataGridRow Style

Hi there,


I was asked to display a cloumn value dynamically as datagridrow's tooltip. I searched and found many solutions, not all of them worked for me and as usual i go for the easiest way.


The easiest solution was to display tooltip using datagridrow style.
You need to create a style in which you add the required xaml that will display tooltip and bind its content to the column value you want to display (as my grid was bind to an observable collection so i bind tooltip content with collection object's property).
Another benefit i find that if you show tooltip using style, you have no need to write anything in MouseOver event, just create a style assign it to DataGridRow and you are done.

Step 1 Creating the Style:

Below is the xaml for the style that will show tooltip on your datagridrow.
You can create style anyway you like e.g in App.xaml or in UserControl's resources. I create this style in my UserControl Resources.

<Style x:Key="AllocatedGridRowStyle"

            <Setter Property="IsTabStop"
                    Value="False" />

            <Setter Property="Template">
                    <ControlTemplate TargetType="sdk:DataGridRow">
                        <sdk:DataGridFrozenGrid x:Name="Root">
                                <RowDefinition />
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                            <sdk:DataGridCellsPresenter x:Name="CellsPresenter"
                                    <ToolTip Content="{Binding Path=BGStatus}"


                            <sdk:DataGridDetailsPresenter x:Name="DetailsPresenter"
                                                          Grid.Row="1" />



BGStatus => Value that will be displayed as Tooltip content.
Also you need to add below namespace to UserContol.


Step 2 Assigning the Style:

Add below line to you datagrid properties:

RowStyle="{StaticResource AllocatedGridRowStyle}"

If you perform all above steps correctly your tooltip will be displayed like below:

Happy coding!

Popular Posts