Skip to main content
A newer version of this page is available. .

How to: Conditionally Apply Styles

  • 4 minutes to read

This example demonstrates how to apply a custom style to cells displayed within the ‘Product Name’ column based on a custom condition. A product’s name is highlighted if the number of units is less than 20.

OBSOLETE. Starting from version 14.1, DXGrid introduces the built-in conditional formatting feature.

<Window x:Class="DXGrid_ConditionalFormatting.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:DXGrid_ConditionalFormatting"
    xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid"
        xmlns:dxgt="http://schemas.devexpress.com/winfx/2008/xaml/grid/themekeys"
    Title="Window1" Height="300" Width="470">
    <Grid>
        <dxg:GridControl x:Name="grid">
            <dxg:GridControl.Resources>
                <Style x:Key="customCellStyle"
                       BasedOn="{StaticResource {dxgt:GridRowThemeKey ResourceKey=CellStyle}}"
                       TargetType="dxg:CellContentPresenter">
                    <Setter Property="Background"
                            Value="{Binding Path=RowData.Row.UnitsOnOrder, Converter={local:IntoToColorConverter}}"/>
                </Style>
            </dxg:GridControl.Resources>
            <dxg:GridControl.Columns>
                <dxg:GridColumn FieldName="ProductName"
                        CellStyle="{StaticResource customCellStyle}">
                    Product
                </dxg:GridColumn>
                <dxg:GridColumn FieldName="UnitPrice">
                    Unit Price
                </dxg:GridColumn>
                <dxg:GridColumn FieldName="UnitsOnOrder">
                    Units On Order
                </dxg:GridColumn>
            </dxg:GridControl.Columns>
            <dxg:GridControl.View>
                <dxg:TableView AutoWidth="True" />
            </dxg:GridControl.View>
        </dxg:GridControl>
    </Grid>
</Window>
See Also