This example demonstrates how to change the appearance of individual cells based on specific conditions using the Conditional Formatting feature in markup.
The image below shows the result.
A complete sample project is available at https://github.com/DevExpress-Examples/how-to-apply-conditional-formatting-t135593.
using System.ComponentModel.DataAnnotations; using System.Linq; namespace ConditionalFormatting { public class ConditionalFormattingViewModel { public ConditionalFormattingViewModel() { Items = SaleOverviewDataGenerator.GenerateSales(); } public SaleOverviewData[] Items { get; private set; } } }
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:ConditionalFormatting" xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/core" xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid" x:Class="ConditionalFormatting.MainWindow" Title="MainWindow" Height="500" Width="800"> <Window.DataContext> <local:ConditionalFormattingViewModel/> </Window.DataContext> <Grid> <dxg:GridControl Name="grid" ItemsSource="{Binding Path=Items}" AllowLiveDataShaping="True" EnableSmartColumnsGeneration="True"> <dxg:GridControl.Columns> <dxg:GridColumn FieldName="State" IsSmart="True" SortIndex="0" VisibleIndex="0"/> <dxg:GridColumn FieldName="Sales" IsSmart="True" VisibleIndex="1"/> <dxg:GridColumn FieldName="SalesVsTarget" IsSmart="True" FixedWidth="True" VisibleIndex="2"/> <dxg:GridColumn FieldName="Profit" IsSmart="True" VisibleIndex="3"/> <dxg:GridColumn FieldName="CustomersSatisfaction" IsSmart="True" FixedWidth="True" VisibleIndex="4"/> <dxg:GridColumn FieldName="MarketShare" IsSmart="True" FixedWidth="True" VisibleIndex="5"/> </dxg:GridControl.Columns> <dxg:GridControl.View> <dxg:TableView AllowEditing="False" AllowConditionalFormattingMenu="True"> <dxg:TableView.FormatConditions> <dxg:FormatCondition Expression="[SalesVsTarget] < 0.0m" FieldName="SalesVsTarget" PredefinedFormatName="RedText"/> <dxg:FormatCondition Expression="[Profit] < 0.0" FieldName="Profit"> <dxc:Format Foreground="Red"/> </dxg:FormatCondition> <dxg:FormatCondition Expression="[SalesVsTarget] > 0.0m" FieldName="SalesVsTarget" PredefinedFormatName="GreenText"/> <dxg:DataBarFormatCondition FieldName="Sales" PredefinedFormatName="RedGradientDataBar"/> <dxg:TopBottomRuleFormatCondition Expression="[Sales]" FieldName="{x:Null}" PredefinedFormatName="BoldText" Rule="TopPercent" Threshold="10"/> <dxg:DataBarFormatCondition FieldName="Profit" PredefinedFormatName="GreenGradientDataBar"/> <dxg:IconSetFormatCondition FieldName="MarketShare" PredefinedFormatName="Quarters5IconSet"/> <dxg:IconSetFormatCondition FieldName="CustomersSatisfaction" PredefinedFormatName="Stars3IconSet"/> </dxg:TableView.FormatConditions> </dxg:TableView> </dxg:GridControl.View> </dxg:GridControl> </Grid> </Window>
Imports System Imports System.Collections.Generic Imports System.Configuration Imports System.Data Imports System.Linq Imports System.Threading.Tasks Imports System.Windows Namespace ConditionalFormatting ''' <summary> ''' Interaction logic for App.xaml ''' </summary> Partial Public Class App Inherits Application Private Sub OnAppStartup_UpdateThemeName(ByVal sender As Object, ByVal e As StartupEventArgs) DevExpress.Xpf.Core.ApplicationThemeHelper.UpdateApplicationThemeName() End Sub End Class End Namespace
Imports System.ComponentModel.DataAnnotations Imports System.Linq Namespace ConditionalFormatting Public Class ConditionalFormattingViewModel Public Sub New() Items = SaleOverviewDataGenerator.GenerateSales() End Sub Private privateItems As SaleOverviewData() Public Property Items() As SaleOverviewData() Get Return privateItems End Get Private Set(ByVal value As SaleOverviewData()) privateItems = value End Set End Property End Class End Namespace
<Application x:Class="ConditionalFormatting.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" StartupUri="MainWindow.xaml" Startup="OnAppStartup_UpdateThemeName"> <Application.Resources> </Application.Resources> </Application>