Develop Reference

WPF Datagrid Cell Rendering Performance Issues

I am running into issues where i have a datagrid in my WPF application that is showing around 200 cells (10 columns, 20-40 rows depending on window size). Refreshing the view (e.g. with filters) is slow (200-400ms) when I would expect it to be significantly snappier.
Data virtualization is enabled, and if i resize my window so only 2-3 rows are visible, filters refresh instantly. This leads me to believe that virtualization and collection performance isn't my issue.
I ran the profiler, and it looks like rending each cell is very slow. Even removing my custom templates doesn't bring it down to a very reasonable level. Cells are taking 5-9ms each to render, so it adds up.
Everywhere else in the application, textblocks render in 0.0015ms or so. but in the datagrid, they are 0.15ms each, plus various other overhead. Are there any further options i can employ to improve performance for sub 60ms render times?
My datagrid object:
<DataGrid
VirtualizingStackPanel.VirtualizationMode="Recycling"
VirtualizingStackPanel.IsVirtualizing="true"
HeadersVisibility="Column"
BorderThickness="0 1 0 0"
IsReadOnly="True"
GridLinesVisibility="Horizontal"
HorizontalGridLinesBrush="#1e1e1e"
CanUserResizeColumns="False"
CanUserResizeRows="False"
CanUserReorderColumns="False"
EnableColumnVirtualization="True"
EnableRowVirtualization="True"
Margin="0 6 0 0"
Name="dgCombatLog"
Foreground="#ffffff"
Background="#252526"
RowBackground="#252526"
AlternatingRowBackground="#2a2a2a"
AlternationCount="2"
AutoGenerateColumns="False"
MaxWidth="2560"
MaxHeight="1600"
DataGrid.RowHeight="24"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ScrollViewer.VerticalScrollBarVisibility="Visible"
RowHeaderWidth="0"
Grid.Row="2">
<DataGrid.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="#007acc"/>
<SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightBrushKey}" Color="#007acc"/>
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Background" Value="#000000" />
<Setter Property="Padding" Value="2 2 2 2" />
</Style>
<Style TargetType="{x:Type DataGridCell}">
<Setter Property="Foreground" Value="#eeeeee"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Padding" Value="2 0 2 0"/>
<Setter Property="Height" Value="24"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridCell}">
<Border Height="{TemplateBinding Height}" Padding="{TemplateBinding Padding}" Background="{TemplateBinding Background}" VerticalAlignment="Center">
<ContentPresenter VerticalAlignment="Center" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding ActionName}" Value="AbilityActivate" />
<Condition Binding="{Binding RelativeSource={RelativeSource Mode=Self}, Path=IsSelected}" Value="False" />
</MultiDataTrigger.Conditions>
<Setter Property="Background" Value="#002036" />
</MultiDataTrigger>
<DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType=DataGridRow}}" Value="True">
<Setter Property="Background" Value="#1c97ea" />
</DataTrigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource Self}, Path=Foreground}" />
</Trigger>
</Style.Triggers>
</Style>
</DataGrid.Resources>
<DataGrid.Columns>
<DataGridTextColumn Width="59" Header="#" Binding="{Binding RelativeTimestamp}" />
<DataGridTextColumn Width="166" Header="Source" Binding="{Binding Source.Name}">
<DataGridTextColumn.CellStyle>
<Style TargetType="DataGridCell" BasedOn="{StaticResource {x:Type DataGridCell}}">
<Style.Triggers>
<DataTrigger Binding="{Binding Source.IsFriendly}" Value="True">
<Setter Property="Background" Value="#006a03"/>
<Setter Property="Foreground" Value="#ffffff"/>
</DataTrigger>
<DataTrigger Binding="{Binding Source.IsEnemy}" Value="True">
<Setter Property="Background" Value="#581e26"/>
<Setter Property="Foreground" Value="#ffffff"/>
</DataTrigger>
</Style.Triggers>
</Style>
</DataGridTextColumn.CellStyle>
</DataGridTextColumn>
<DataGridTemplateColumn Width="19" Header="A">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Image Width="14" Height="14" Source="{Binding ActionIcon}" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTextColumn Width="166" Header="Target" Binding="{Binding Target.Name}">
<DataGridTextColumn.CellStyle>
<Style TargetType="DataGridCell" BasedOn="{StaticResource {x:Type DataGridCell}}">
<Style.Triggers>
<DataTrigger Binding="{Binding Target.IsFriendly}" Value="True">
<Setter Property="Background" Value="#006a03"/>
<Setter Property="Foreground" Value="#ffffff"/>
</DataTrigger>
<DataTrigger Binding="{Binding Target.IsEnemy}" Value="True">
<Setter Property="Background" Value="#581e26"/>
<Setter Property="Foreground" Value="#ffffff"/>
</DataTrigger>
</Style.Triggers>
</Style>
</DataGridTextColumn.CellStyle>
</DataGridTextColumn>
<DataGridTemplateColumn Width="*" Header="Ability" SortMemberPath="AbilityDisplay" >
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<StackPanel.Resources>
<Style TargetType="{x:Type Image}">
<Setter Property="Visibility" Value="Collapsed"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Path=HasAbilityIcon}" Value="True">
<Setter Property="Visibility" Value="Visible"/>
<Setter Property="Margin" Value="0 0 5 0"/>
</DataTrigger>
</Style.Triggers>
</Style>
</StackPanel.Resources>
<Image Width="18" Height="18" Source="{Binding AbilityIcon}" />
<TextBlock Text="{Binding AbilityDisplay}" />
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTextColumn Width="49" Header="Value" Binding="{Binding ActualValue, StringFormat={}{0:N0}}">
<DataGridTextColumn.ElementStyle>
<Style TargetType="TextBlock">
<Setter Property="HorizontalAlignment" Value="Right" />
<Setter Property="Foreground" Value="#daa574"/>
<Style.Triggers>
<DataTrigger Binding="{Binding ActionName}" Value="Heal">
<Setter Property="Foreground" Value="#32cd32"/>
</DataTrigger>
<DataTrigger Binding="{Binding ActionName}" Value="Damage">
<Setter Property="Foreground" Value="#db001e"/>
</DataTrigger>
<DataTrigger Binding="{Binding Type}" Value="Spend">
<Setter Property="Foreground" Value="#222222"/>
</DataTrigger>
<DataTrigger Binding="{Binding HasNumericValues}" Value="False">
<Setter Property="Foreground" Value="Transparent"/>
</DataTrigger>
</Style.Triggers>
</Style>
</DataGridTextColumn.ElementStyle>
</DataGridTextColumn>
<DataGridTextColumn Width="49" Header="Abs" Binding="{Binding AbsValue, StringFormat={}{0:N0}}">
<DataGridTextColumn.ElementStyle>
<Style TargetType="TextBlock">
<Setter Property="HorizontalAlignment" Value="Right" />
<Setter Property="Foreground" Value="#30cccd"/>
<Style.Triggers>
<DataTrigger Binding="{Binding AbsValue}" Value="0">
<Setter Property="Foreground" Value="Transparent"/>
</DataTrigger>
</Style.Triggers>
</Style>
</DataGridTextColumn.ElementStyle>
</DataGridTextColumn>
<DataGridTextColumn Width="49" Header="Over" Binding="{Binding OverValue, StringFormat={}{0:N0}}">
<DataGridTextColumn.ElementStyle>
<Style TargetType="TextBlock">
<Setter Property="HorizontalAlignment" Value="Right" />
<Setter Property="Foreground" Value="Transparent"/>
<Style.Triggers>
<DataTrigger Binding="{Binding ActionName}" Value="Heal">
<Setter Property="Foreground" Value="#8fbb8f"/>
</DataTrigger>
</Style.Triggers>
</Style>
</DataGridTextColumn.ElementStyle>
</DataGridTextColumn>
<DataGridTextColumn Width="49" Header="Threat" Binding="{Binding Threat, StringFormat={}{0:N0}}">
<DataGridTextColumn.ElementStyle>
<Style TargetType="TextBlock">
<Setter Property="HorizontalAlignment" Value="Right" />
<Setter Property="Foreground" Value="#daa574"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Threat}" Value="0">
<Setter Property="Foreground" Value="Transparent"/>
</DataTrigger>
</Style.Triggers>
</Style>
</DataGridTextColumn.ElementStyle>
</DataGridTextColumn>
<DataGridTextColumn Width="84" Header="Effects" />
</DataGrid.Columns>
</DataGrid>

The column is not completly collapsed

I am trying to collapse a column according to a condition with this code:
<DataGridTextColumn Header="MyColumn" Binding="{Binding MyProperty}">
<DataGridTextColumn.HeaderStyle>
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Width" Value="0cm"/>
<Setter Property="Visibility" Value="Collapsed"/>
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=ThisView, Path=DataContext.MyboolProperty}" Value="true">
<Setter Property="Width" Value="2.5cm"/>
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
</Style.Triggers>
</Style>
</DataGridTextColumn.HeaderStyle>
</DataGridTextColumn>
The problem is that the column is not complete collapsed, I can see a part of the column.
I have tried this code too:
<DataGridTextColumn Header="MyColumn" Binding="{Binding MyProperty}"
Width="0cm"
Visibility="Collapsed">
<DataGridTextColumn.HeaderStyle>
<Style TargetType="{x:Type DataGridColumnHeader}">
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=ThisView, Path=DataContext.MyboolProperty}" Value="true">
<Setter Property="Width" Value="2.5cm"/>
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
</Style.Triggers>
</Style>
</DataGridTextColumn.HeaderStyle>
</DataGridTextColumn>
In this case the column is collapsed as expected, but then if the property if the trigger is true, the column is still collapsed.
Also I have tried this option:
<DataGridTextColumn Header="MyColumn" Binding="{Binding MyProperty}">
<DataGridTextColumn.HeaderStyle>
<Style TargetType="{x:Type DataGridColumnHeader}">
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=ThisView, Path=DataContext.MyboolProperty}" Value="true">
<Setter Property="Width" Value="2.5cm"/>
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
<DataTrigger Binding="{Binding ElementName=ThisView, Path=DataContext.MyboolProperty}" Value="false">
<Setter Property="Width" Value="0cm"/>
<Setter Property="Visibility" Value="Collapsed"/>
</DataTrigger>
</Style.Triggers>
</Style>
</DataGridTextColumn.HeaderStyle>
</DataGridTextColumn>
But the behavior is the same than first option, it is not full collapsed but it works when the property of the trigger is true.

Your data trigger is located inside column header template, therefore it can only change properties of column header (not a complete column, i.e. cells).
There is no Style for DataGridTextColumn, so you can't use DataTrigger. But converter should do.
However, another problem is that columns aren't in visual tree, so you can't use ElementName or RelativeSource, they simply won't work. There is an easy workaround however. Then your column will look like this:
<Window.Resources>
<BooleanToVisibilityConverter x:Key="converter" />
<local:BindingProxy x:Key="proxy" Data="{Binding}" />
</Window.Resources>
...
<DataGridTextColumn Header="MyColumn"
Binding="{Binding MyProperty}"
Visibility="{Binding Data.MyboolProperty, Source={StaticResource proxy}, Converter={StaticResource converter}}" />

Setting Property when No DataTrigger Values are Satisfied WPF

I am VERY new to WPF AND C#, so there may be a much better way to accomplish what I am attempting. Therefore, I am open to other methods.
As far as what I've got, I am trying to program a Digital VMB (Visual Management Board) for the maintenance department where I work. They want a section to display the number of days our plant has gone without an accident: "Days Safe". I successfully have the binding set for this TextBlock:
<TextBlock Text="{Binding DaysSafe}" FontSize="60" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center" >
I have a series of DataTriggers to change the Foreground color of the text to a certain color, based on the value of the text. Basically, I want the DaysSafe text to be:
Red when 0
Orange when 1 and so on (you can see the colors in my code below):
<StackPanel VerticalAlignment="Center" >
<TextBlock Text="{Binding DaysSafe}" FontSize="60" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center" >
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Style.Triggers >
<DataTrigger Binding="{Binding DaysSafe}" Value="0">
<Setter Property="Foreground" Value="Red"/>
</DataTrigger>
<DataTrigger Binding="{Binding DaysSafe}" Value="1">
<Setter Property="Foreground" Value="OrangeRed" />
</DataTrigger>
<DataTrigger Binding="{Binding DaysSafe}" Value="2">
<Setter Property="Foreground" Value="Orange" />
</DataTrigger>
<DataTrigger Binding="{Binding DaysSafe}" Value="3">
<Setter Property="Foreground" Value="Yellow" />
</DataTrigger>
<DataTrigger Binding="{Binding DaysSafe}" Value="4">
<Setter Property="Foreground" Value="Yellow" />
</DataTrigger>
<DataTrigger Binding="{Binding DaysSafe}" Value="5">
<Setter Property="Foreground" Value="GreenYellow" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</StackPanel>
This functions correctly, the colors change when the days are lower. HOWEVER, I would like for the foreground color to "Default" to green when the value of DaysSafe is over 5. Right now, any value above 5 is black when I want it to be green. I tried adding the foreground="green" attribute in the first TextBlock section, but this overrides the DataTriggers and the foreground is always green.
Any help with how I may create a default value for the foreground?
Thanks.

You could just add a setter that sets the default Foreground of the TextBlock to Green:
<Style TargetType="{x:Type TextBlock}">
<Setter Property="Foreground" Value="Green" />
<Style.Triggers >
<DataTrigger Binding="{Binding DaysSafe}" Value="0">
<Setter Property="Foreground" Value="Red"/>
</DataTrigger>
<DataTrigger Binding="{Binding DaysSafe}" Value="1">
<Setter Property="Foreground" Value="OrangeRed" />
</DataTrigger>
<DataTrigger Binding="{Binding DaysSafe}" Value="2">
<Setter Property="Foreground" Value="Orange" />
</DataTrigger>
<DataTrigger Binding="{Binding DaysSafe}" Value="3">
<Setter Property="Foreground" Value="Yellow" />
</DataTrigger>
<DataTrigger Binding="{Binding DaysSafe}" Value="4">
<Setter Property="Foreground" Value="Yellow" />
</DataTrigger>
<DataTrigger Binding="{Binding DaysSafe}" Value="5">
<Setter Property="Foreground" Value="GreenYellow" />
</DataTrigger>
</Style.Triggers>
</Style>

Changing background colour of cells if value is greater than or equal to

I have this DataGrid and I have been playing with setting the background colour of selected cells:
<DataGridTextColumn Header="Next Study" Binding="{Binding NextStudy}">
<DataGridTextColumn.ElementStyle>
<Style TargetType="{x:Type TextBlock}">
<Style.Triggers>
<Trigger Property="Text" Value="25">
<Setter Property="Background" Value="Red"/>
</Trigger>
</Style.Triggers>
</Style>
</DataGridTextColumn.ElementStyle>
<DataGridTextColumn.CellStyle>
<Style TargetType="{x:Type DataGridCell}">
<Setter Property="ToolTip" Value="{Binding NextStudyDescription}" />
</Style>
</DataGridTextColumn.CellStyle>
</DataGridTextColumn>
It works as you can see:
But that is not really what I want. Instead I would like to highlight all cells where the value is greater than or equal to 18. So I tried:
<DataGridTextColumn Header="Next Study" Binding="{Binding NextStudy}">
<DataGridTextColumn.ElementStyle>
<Style TargetType="{x:Type TextBlock}">
<Style.Triggers>
<DataTrigger Binding="{NextStudy Converter={StaticResource IsEqualOrGreaterThanConverter}, ConverterParameter=18}" Value="True">
<Setter Property="Background" Value="Red"/>
</DataTrigger>
</Style.Triggers>
</Style>
</DataGridTextColumn.ElementStyle>
<DataGridTextColumn.CellStyle>
<Style TargetType="{x:Type DataGridCell}">
<Setter Property="ToolTip" Value="{Binding NextStudyDescription}" />
</Style>
</DataGridTextColumn.CellStyle>
</DataGridTextColumn>
It doesn't like: <DataTrigger Binding="{NextStudy
In addition, I would like to do this background test if the element comboActiveStudentAssignmentType selected index is 0, 1 or 2. Otherwise it does not need to do this highlighting.
Thanks.

You have a syntax error: Binding is the property name, you still have to declare it as a Binding
<DataTrigger Binding="{Binding NextStudy, Converter={StaticResource IsEqualOrGreaterThanConverter}, ConverterParameter=18}" Value="True">
As for the second part of the question, you can use a MultiDataTrigger. The conditions in the MultiDataTrigger have to ALL be true for the trigger to execute the setters. You will probably need to write another converter to transform your AssignmentType to True/False and you should be set.
Here's a quick example:
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding NextStudy, Converter={StaticResource IsEqualOrGreaterThanConverter}, ConverterParameter=18}" Value="True"/>
<Condition Binding="{Binding comboActiveStudentAssignmentType, Converter={StaticResource YourOtherConverter}" Value="True"/>
</MultiDataTrigger.Conditions>
<MultiDataTrigger.Setters>
<Setter Property="Background" Value="Red"/>
</MultiDataTrigger.Setters>
</MultiDataTrigger>

WPF DataGrid - Different cell color based on hidden value

I'm trying to get up to speed on how to use DataTriggers on a DataGrid.
I have four columns in my datatable (Node, Name, Value, Flag). Flag is a hidden column in the datagrid.
I would the DataGridRow to have PaleGreen background when Flag = 2 but the Value column should be red. I know that I can create a style for the flag column as thats not vislible this isn't helpful.
Sorry if this is a newbie question. First foray into wpf from WinForms.
What I have so far:
<Style TargetType="{x:Type DataGridRow}">
<Style.Triggers>
<DataTrigger Binding="{Binding Flag}" Value="2">
<Setter Property="Background" Value="PaleGreen" />
<Setter Property="Foreground" Value="Black" />
</DataTrigger>
<DataTrigger Binding="{Binding Flag}" Value="3">
<Setter Property="Background" Value="CadetBlue" />
<Setter Property="Foreground" Value="White" />
</DataTrigger>
</Style.Triggers>
</Style>

Figured it out. Code for completeness
<UserControl.Resources>
<Style TargetType="{x:Type DataGridRow}">
<Style.Triggers>
<DataTrigger Binding="{Binding Flag}" Value="2">
<Setter Property="Background" Value="PaleGreen" />
<Setter Property="Foreground" Value="Black" />
</DataTrigger>
<DataTrigger Binding="{Binding Flag}" Value="3">
<Setter Property="Background" Value="CadetBlue" />
<Setter Property="Foreground" Value="White" />
</DataTrigger>
</Style.Triggers>
</Style>
<Style TargetType="DataGridCell" x:Key="ValueColumn">
<Style.Triggers>
<DataTrigger Binding="{Binding Flag}" Value="2">
<Setter Property="Background" Value="Red" />
<Setter Property="Foreground" Value="White" />
</DataTrigger>
</Style.Triggers>
</Style>
</UserControl.Resources>
<DataGrid>
<DataGrid.Columns>
<DataGridTextColumn Header="Node" Binding="{Binding Path=Node}"/>
<DataGridTextColumn Header="Name" Binding="{Binding Path=Name}"/>
<DataGridTextColumn MinWidth="300" Header="Value" Binding="{Binding Path=Value}" CellStyle="{StaticResource ValueColumn}"/>
<DataGridTextColumn Header="Flag" Binding="{Binding Path=Flag}" Visibility="Hidden" />
</DataGrid.Columns>
</DataGrid>