This article demonstrates how to style specific elements of the grid through implicit styles.
The Style that defines the appearance of the element should be defined in the Resources of the grid
and the TargetType property of the style specifies which element will be styled.
Below are listed the parts that could be targetted.
Note |
---|
The following namespace has to be added to the Page: xmlns:gridPrimitives="using:Telerik.UI.Xaml.Controls.Grid.Primitives" |
Hover Control
This is how you can change the appearance of a Cell/Row(depends on the current SelectionUnit).
XAML | Copy |
---|
<telerikGrid:RadDataGrid.Resources>
<Style TargetType="gridPrimitives:DataGridHoverControl">
<Setter Property="Background" Value="Red"/>
<Setter Property="Opacity" Value="0.5"/>
</Style>
</telerikGrid:RadDataGrid.Resources> |
SelectionRegionBackground Control
This is how you can change the appearance of the Selected Cell/Row(depends on the current SelectionUnit).
XAML | Copy |
---|
<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> |
SelectionRegionBorder Control
This is 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.
XAML | Copy |
---|
<telerikGrid:RadDataGrid.Resources>
<Style TargetType="gridPrimitives:SelectionRegionBorderControl">
<Setter Property="BorderBrush" Value="Red"/>
</Style>
</telerikGrid:RadDataGrid.Resources> |
Currency Control
This is how you can change the appearance of the Currency Control, i.e. the appearance of the Current Item.
XAML | Copy |
---|
<telerikGrid:RadDataGrid.Resources>
<Style TargetType="gridPrimitives:DataGridCurrencyControl">
<Setter Property="Background" Value="Blue"/>
</Style>
</telerikGrid:RadDataGrid.Resources> |
Column Drag Control
This is how you can change the appearance of the Column header while executing a drag operation.
XAML | Copy |
---|
<telerikGrid:RadDataGrid.Resources>
<Style TargetType="gridPrimitives:DataGridColumnDragControl">
<Setter Property="Background" Value="Red"/>
<Setter Property="Foreground" Value="Green"/>
</Style>
</telerikGrid:RadDataGrid.Resources> |
Groupheader Flyout
This is how you can change the appearance of the Group Header in the Flyout.
XAML | Copy |
---|
<telerikGrid:RadDataGrid.Resources>
<Style TargetType="gridPrimitives:DataGridFlyoutGroupHeader">
<Setter Property="Background" Value="Red"/>
</Style>
</telerikGrid:RadDataGrid.Resources> |
Filtering Flyout
These are the properties that affect the appearance of the Filtering Flyout:
For example, this changes the background of the control:
XAML | Copy |
---|
<telerikGrid:RadDataGrid.Resources>
<Style TargetType="gridPrimitives:DataGridFilteringFlyout">
<Setter Property="Background" Value="Green"/>
</Style>
</telerikGrid:RadDataGrid.Resources> |
There are also properties that define the style of FilterButton, ClearFilterButton and ExpandCollapseButton.
Important |
---|
Note that when setting a Style to one of these elements, all properties that affect the appearance of that
element have to be set in the Style. Below are listed the default styles of these elements. You have to set
custom values to the properties you wish to change. Also you will need the following namespaces added to the Page:
xmlns:primitivesCommon="using:Telerik.UI.Xaml.Controls.Primitives.Common"
xmlns:gridTheming="using:Telerik.UI.Xaml.Controls.Grid.Theming"
And the following class should be added to the static resources in order to have access to the predefined control brushes: |
XAML | Copy |
---|
<gridTheming:PaletteInitializer x:Key="PaletteInitializer"/> |
These are the properties that style the elements of the Filtering Flyout: