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

Implicit Styling

This article demonstrates how to style specific elements inside the RadDataGrid using implicit styling.

RadDataGrid Setup

All of the examples in this article will use the setup shown in Example 1.

Example 1: Populating the RadDataGrid

public sealed partial class MainPage : Page 
{ 
    public MainPage() 
    { 
        this.InitializeComponent(); 
 
        var collection = new List<Data>(); 
 
        for (int i = 0; i < 10; i++) 
        { 
            collection.Add(new Data() { Category = "Category " + i, Value = i }); 
        } 
        this.DataContext = collection; 
    } 
} 
 
public class Data 
{ 
    public string Category { get; set; } 
 
    public double Value { get; set; } 
} 

DataGridHoverControl

Example 2 shows how you can change the appearance of a Cell/Row(depends on the current SelectionUnit) when the mouse goes over it.

Example 2: Styling the DataGridHoverControl

<Grid xmlns:telerikGrid="using:Telerik.UI.Xaml.Controls.Grid" 
      xmlns:gridPrimitives="using:Telerik.UI.Xaml.Controls.Grid.Primitives"> 
    <telerikGrid:RadDataGrid x:Name="grid" ItemsSource="{Binding}"> 
        <telerikGrid:RadDataGrid.Resources> 
            <Style TargetType="gridPrimitives:DataGridHoverControl"> 
                <Setter Property="Background" Value="Red"/> 
                <Setter Property="Opacity" Value="0.5"/> 
            </Style> 
        </telerikGrid:RadDataGrid.Resources> 
    </telerikGrid:RadDataGrid> 
</Grid> 

Figure 1: Styled DataGridHoverControl

Styled DataGridHoverControl

SelectionRegionBorderControl

Example 3 shows how you can change the appearance of the Selected Cell/Row(depends on the current SelectionUnit). This control overlays the decorations of the selected Cell/Row.

Example 3: Styling the SelectionRegionBorderControl

<Grid xmlns:telerikGrid="using:Telerik.UI.Xaml.Controls.Grid" 
      xmlns:gridPrimitives="using:Telerik.UI.Xaml.Controls.Grid.Primitives"> 
    <telerikGrid:RadDataGrid x:Name="grid" ItemsSource="{Binding}"> 
       <telerikGrid:RadDataGrid.Resources> 
            <Style TargetType="gridPrimitives:SelectionRegionBorderControl"> 
                <Setter Property="BorderBrush" Value="Red"/> 
            </Style> 
        </telerikGrid:RadDataGrid.Resources> 
    </telerikGrid:RadDataGrid> 
</Grid> 

Figure 2: Styled SelectionRegionBorderControl

Styled SelectionRegionBorderControl

SelectionRegionBackgroundControl

Example 4 shows how you can change the appearance of the Selected Cell/Row(depends on the current SelectionUnit).

Example 4: Styling the SelectionRegionBackgroundControl

<Grid xmlns:telerikGrid="using:Telerik.UI.Xaml.Controls.Grid" 
      xmlns:gridPrimitives="using:Telerik.UI.Xaml.Controls.Grid.Primitives"> 
    <telerikGrid:RadDataGrid x:Name="grid" ItemsSource="{Binding}"> 
        <telerikGrid:RadDataGrid.Resources> 
            <Style TargetType="gridPrimitives:SelectionRegionBackgroundControl"> 
                <Setter Property="Background" Value="Red"/> 
                <Setter Property="BorderBrush" Value="Green"/> 
                <Setter Property="BorderThickness" Value="2"/> 
            </Style> 
        </telerikGrid:RadDataGrid.Resources> 
    </telerikGrid:RadDataGrid> 
</Grid> 

Figure 3: Styled SelectionRegionBackgroundControl

Styled SelectionRegionBackgroundControl

Please keep in mind that SelectionRegionBorder control is rendered over the SelectionRegionBackground control.

DataGridCurrencyControl

Example 5 shows how you can change the appearance of the DataGridCurrencyControl, i.e. the appearance of the Current Item.

Example 5: Styling the DataGridCurrencyControl

<Grid xmlns:telerikGrid="using:Telerik.UI.Xaml.Controls.Grid" 
      xmlns:gridPrimitives="using:Telerik.UI.Xaml.Controls.Grid.Primitives"> 
    <telerikGrid:RadDataGrid x:Name="grid" ItemsSource="{Binding}"> 
        <telerikGrid:RadDataGrid.Resources> 
            <Style TargetType="gridPrimitives:DataGridCurrencyControl"> 
                <Setter Property="Background" Value="Blue"/> 
            </Style> 
        </telerikGrid:RadDataGrid.Resources> 
    </telerikGrid:RadDataGrid> 
</Grid> 

Figure 4: Styled DataGridCurrencyControl

Styled DataGridCurrencyControl

DataGridColumnDragControl

Example 6 shows how you can change the appearance of the column header while executing a drag operation.

Example 6: Styling the DataGridColumnDragControl

<Grid xmlns:telerikGrid="using:Telerik.UI.Xaml.Controls.Grid" 
      xmlns:gridPrimitives="using:Telerik.UI.Xaml.Controls.Grid.Primitives"> 
    <telerikGrid:RadDataGrid x:Name="grid" ItemsSource="{Binding}"> 
        <telerikGrid:RadDataGrid.Resources> 
            <Style TargetType="gridPrimitives:DataGridColumnDragControl"> 
                <Setter Property="Background" Value="Red"/> 
                <Setter Property="Foreground" Value="Green"/> 
            </Style> 
        </telerikGrid:RadDataGrid.Resources> 
    </telerikGrid:RadDataGrid> 
</Grid> 

Figure 5: Styled DataGridColumnDragControl

Styled DataGridColumnDragControl

DataGridFlyoutGroupHeader

Example 6 shows how you can change the appearance of the group header in the flyout.

Example 7: Styling the DataGridFlyoutGroupHeader

<Grid xmlns:telerikGrid="using:Telerik.UI.Xaml.Controls.Grid" 
      xmlns:gridPrimitives="using:Telerik.UI.Xaml.Controls.Grid.Primitives"> 
    <telerikGrid:RadDataGrid x:Name="grid" ItemsSource="{Binding}"> 
        <telerikGrid:RadDataGrid.Resources> 
            <Style TargetType="gridPrimitives:DataGridFlyoutGroupHeader"> 
                <Setter Property="Background" Value="Red"/> 
            </Style> 
        </telerikGrid:RadDataGrid.Resources> 
    </telerikGrid:RadDataGrid> 
</Grid> 

Figure 6: Styled DataGridFlyoutGroupHeader

Styled DataGridFlyoutGroupHeader

DataGridFilteringFlyout

Example 7 shows how you can change the appearance of the filtering flyout. You can use its ClearFilterButtonStyle and FilterButtonStyle properties to style the Clear Filter and Filter buttons respectively.

Example 7: Styling the DataGridFilteringFlyout

<Grid xmlns:telerikGrid="using:Telerik.UI.Xaml.Controls.Grid"  
      xmlns:gridPrimitives="using:Telerik.UI.Xaml.Controls.Grid.Primitives" 
      xmlns:primitivesCommon="using:Telerik.UI.Xaml.Controls.Primitives.Common"> 
    <telerikGrid:RadDataGrid x:Name="grid" ItemsSource="{Binding}"> 
        <telerikGrid:RadDataGrid.Resources> 
            <Style TargetType="gridPrimitives:DataGridFilteringFlyout"> 
                <Setter Property="Background" Value="Green"/> 
                <Setter Property="ClearFilterButtonStyle"> 
                    <Setter.Value> 
                        <Style TargetType="primitivesCommon:InlineButton"> 
                            <Setter Property="Background" Value="Red"/> 
                        </Style> 
                    </Setter.Value> 
                </Setter> 
                <Setter Property="FilterButtonStyle"> 
                    <Setter.Value> 
                        <Style TargetType="primitivesCommon:InlineButton"> 
                            <Setter Property="Background" Value="Blue"/> 
                        </Style> 
                    </Setter.Value> 
                </Setter> 
            </Style> 
        </telerikGrid:RadDataGrid.Resources> 
    </telerikGrid:RadDataGrid> 
</Grid> 

Figure 7: Styled DataGridFilteringFlyout

Styled DataGridFilteringFlyout

See Also

In this article
Not finding the help you need?