New to Telerik UI for Silverlight? Download free 30-day trial

Styling Cells

Before reading this topic, you might find it useful to get familiar with the Template Structure of the GridViewCell.

In this article we will discuss the following topics:

Figure 1: GridViewCell template structure

Telerik Silverlight DataGrid Cell Template

Targeting the GridViewCell Element

In order to style all RadGridView cells of an application, you should create an appropriate style targeting the GridViewCell element.

You have two options:

  • To create an empty style and set it up on your own.

  • To copy the default style of the control and modify it.

To learn how to modify the default GridViewCell style, please refer to the Modifying Default Styles article.

Example 1: Styling all cells of an application

<Style TargetType="telerik:GridViewCell"> 
    <Setter Property="VerticalContentAlignment" Value="Top"/> 
    <Setter Property="HorizontalContentAlignment" Value="Center"/> 
    <Setter Property="Background" Value="#ffcc00"/> 

If you're using Implicit Styles, you should base your style on the GridViewCellStyle.

Figure 2: RadGridView with styled cells in the Office2016 theme

Telerik Silverlight DataGrid-Cell-Styled

Setting a Column's CellStyle

RadGridView Cells can also be styled by creating an appropriate Style for the GridViewCell element and setting it as the CellStyle property of the respective GridView Column.

Example 2: Setting a column's CellStyle

<telerik:GridViewDataColumn DataMemberBinding="{Binding Name}" 
                CellStyle="{StaticResource GridViewCellStyle}" /> 

Setting a Column's CellStyleSelector

You could also use a column's CellStyleSelector property to style cells differently based on a specific condition. More details about how this can be achieved can be found in the CellStyleSelector article.

Setting the SelectedBackground of the Cell

As of R3 2018 RadGridView supports setting the Background of the selected cell, by setting the SelectedBackground property of the GridViewCell.

Example 3: Setting the SelectedBackground of the GridViewCell

<Style TargetType="telerik:GridViewCell"> 
    <Setter Property="SelectedBackground" Value="Bisque" /> 

Figure 3: Result from Example 3 in the Office2016 theme

Telerik Silverlight DataGrid-selected-background-cell

Setting the BorderBrush of the CurrentCell

As of R3 2018 RadGridView supports setting the BorderBrush of the current cell, by setting the CurrentBorderBrush property of the GridViewCell.

Example 4 demonstrates how you can set the borderbrush of the current cell to transparent. You can compare Figure 3 and Figure 4 to notice that the border of the current cell is not visible.

Example 4: Setting the CurrentBorderBrush of the GridViewCell

<Style TargetType="telerik:GridViewCell"> 
    <Setter Property="CurrentBorderBrush" Value="Transparent" /> 

Figure 4: Result from Example 4 in the Office2016 theme

Telerik Silverlight DataGrid-currentborderbrush

After you have set the CurrentBorderBrush to Transparent, if you start navigating through the cells with the keyboard, you will be able to see the FocusVisual border. If you want to hide it as well, you can set the FocusVisualStyle of the GridViewCell to null through a style similar to Example 4.

Setting the MouseOverBackground of the Cell

As of R1 2019 SP1 RadGridView supports changing the MouseOver Background of its cells, through the MouseOverBackground property of the GridViewCell. This is demonstrated in Example 5.

Example 5: Setting the MouseOverBackground of the GridViewCell

<Style TargetType="telerik:GridViewCell" > 
    <Setter Property="MouseOverBackground" Value="Pink" /> 

Figure 5: Result from Example 5 in the Office2016 theme

RadGridView with MouseOverBackground for the cells

In order for the MouseOverBackground of the cell to take effect, the SelectionUnit of RadGridView should be Mixed or Cell.

See Also

In this article
Not finding the help you need? Improve this article