Appearance Customization
- 4 minutes to read
The GridControl allows you to customize the appearance of its elements (for example, cells, column headers, summaries). Use styles to group properties and apply them to grid elements. Templates allow you to change the look and feel of grid elements.
GridControl Styles and Style Settings
The following table lists styles that define the appearance of the GridControl‘s visual elements:
| Visual Element | Property | Target Element |
|---|---|---|
| Column Header | ColumnBase.HeaderStyle | DevExpress.WinUI.Grid.Internal.BaseColumnHeaderControl |
| Total Summary Item | ColumnBase.TotalSummaryContentStyle | TotalSummaryControl |
The following table lists style settings that define the appearance of the GridControl‘s visual elements:
The following code sample changes the Product Name column’s header background to LightSkyBlue:
<Window ...
xmlns:dxg="using:DevExpress.WinUI.Grid"
xmlns:dxgi="using:DevExpress.WinUI.Grid.Internal">
<dxg:GridControl ...>
<dxg:GridControl.Columns>
<dxg:GridTextColumn FieldName="ProductName">
<dxg:GridTextColumn.HeaderStyle>
<Style TargetType="dxgi:BaseColumnHeaderControl">
<Setter Property="Background" Value="LightSkyBlue"/>
</Style>
</dxg:GridTextColumn.HeaderStyle>
</dxg:GridTextColumn>
<!-- Columns -->
</dxg:GridControl.Columns>
</dxg:GridControl>
</Window>
GridControl Templates
The following table lists template properties that define the appearance of the GridControl‘s visual elements:
Visual Element | Property |
|---|---|
Data Cell | |
Cell Tooltip | |
Column Header Tooltip | |
How to Display an Image in the Column Header
The following code sample displays an image in the Product Name column’s header:
<dxg:GridControl ...>
<dxg:GridControl.Columns>
<dxg:GridTextColumn FieldName="ProductName">
<dxg:GridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="ProductName.svg" Stretch="UniformToFill" Height="16" Width="16"/>
<TextBlock Margin="3,0,0,0" Text="{Binding}"/>
</StackPanel>
</DataTemplate>
</dxg:GridTextColumn.HeaderTemplate>
</dxg:GridTextColumn>
<!-- Columns -->
</dxg:GridControl.Columns>
</dxg:GridControl>
Choose Templates Based on Custom Logic
If you have more than one template that can be applied to an element, you can implement custom logic to choose the required template. This allows you to apply different appearance properties for individual GridControl elements.
For example, the GridTemplateColumn.CellTemplate property defines the appearance of data cells. Do the following if you want to apply multiple templates conditionally:
- Create a template selector - a class that chooses a template based on the condition. This class should derive from the DataTemplateSelector class.
- Override the SelectTemplateCore method to return a template that meets the required condition.
- Assign the instance of the template selector class to the GridTemplateColumn.CellTemplateSelector property.
If you specify both the GridTemplateColumn.CellTemplate and GridTemplateColumn.CellTemplateSelector, the GridControl uses the template returned by the template selector.
If the template selector returns null, the GridControl uses the template specified by the GridTemplateColumn.CellTemplate property.
Example
The following code sample colors the Product Name column’s cells in orange if the product’s unit price is greater than 20, and in blue in other cases:
<Grid>
<Grid.Resources>
<DataTemplate x:Key="blueCellTemplate" x:DataType="dxg:CellData">
<Border Margin="1" Background="Blue" CornerRadius="5">
<TextBlock Margin="5" Foreground="White" Text="{x:Bind Text}"/>
</Border>
</DataTemplate>
<DataTemplate x:Key="orangeCellTemplate" x:DataType="dxg:CellData">
<Border Margin="1" Background="Orange" CornerRadius="5">
<TextBlock Margin="5" Foreground="White" Text="{x:Bind Text}"/>
</Border>
</DataTemplate>
<local:CellTemplateSelector x:Key="cellTemplateSelector"
BlueCellTemplate="{StaticResource blueCellTemplate}"
OrangeCellTemplate="{StaticResource orangeCellTemplate}"/>
</Grid.Resources>
<dxg:GridControl ItemsSource="{x:Bind ViewModel.Source}" AutoGenerateColumns="False" NavigationStyle="None">
<dxg:GridControl.Columns>
<dxg:GridTemplateColumn FieldName="ProductName" CellTemplateSelector="{StaticResource cellTemplateSelector}"/>
<dxg:GridTextColumn FieldName="Country"/>
<dxg:GridTextColumn FieldName="City"/>
<dxg:GridSpinEditColumn FieldName="UnitPrice"/>
<dxg:GridTextColumn FieldName="Quantity" />
</dxg:GridControl.Columns>
</dxg:GridControl>
</Grid>
using DevExpress.WinUI.Grid;
using Microsoft.UI.Xaml.Controls;
public class CellTemplateSelector : DataTemplateSelector {
public DataTemplate BlueCellTemplate { get; set; }
public DataTemplate OrangeCellTemplate { get; set; }
protected override DataTemplate SelectTemplateCore(object item, DependencyObject container) {
CellData data = item as CellData;
if(data.Row == null) return null;
if(((Product)data.Row).UnitPrice > 20) return OrangeCellTemplate;
return BlueCellTemplate;
}
}
Customization Properties
The GridControl also includes a list of properties that allow you to change the control’s appearance.
| Property | Description |
|---|---|
| DataControlBase.AlternationCount | Gets or sets the alternate row frequency. This is a dependency property. |
| DataControlBase.AlternateRowBackground | Gets or sets a brush used to paint the background of alternate rows. This is a dependency property. |
| DataControlBase.HighlightRowOnHover | Gets or sets whether to highlight a row when a user hovers a mouse pointer over this row. |
| GridControl.GroupLevelIndent | Gets or sets a width of the group indent. |
| DataControlBase.Foreground | Gets or sets a brush that paints the GridControl‘s foreground. |
| DataControlBase.FontFamily | Gets or sets the GridControl‘s font family. |
| DataControlBase.FontSize | Gets or sets the GridControl‘s font size. |
| DataControlBase.FontStretch | Gets or sets the GridControl‘s font stretch. |
| DataControlBase.FontStyle | Gets or sets a text style applied to the GridControl. |
| DataControlBase.FontWeight | Gets or sets the GridControl‘s font weight. |