Want to change the Cell background color in wpf datagrid
14,299
In your Triggers collection on the DataGridCell Style add the following
<DataGrid ItemsSource="{Binding Items}">
<DataGrid.CellStyle>
<Style TargetType="{x:Type DataGridCell}">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=Value}" Value="true">
<Setter Property="Background" Value="Red" />
</DataTrigger>
</Style.Triggers>
</Style>
</DataGrid.CellStyle>
</DataGrid>
And this would be your view model and entity class
public class MyViewModel
{
public MainWindow()
{
DataContext = this;
Items =
new ObservableCollection<MyEntity>
{
new MyEntity(true),
new MyEntity(false),
new MyEntity(true)
};
}
public ObservableCollection<MyEntity> Items { get; set; }
}
public class MyEntity
{
public MyEntity(bool value)
{
Value = value;
}
public bool Value { get; set; }
}
Author by
ujjaval
Updated on June 14, 2022Comments
-
ujjaval almost 2 years
I am binding Rows with Classes.
On each binding Row i want change the Cell back ground color on base of cell value.
<DataGrid x:Name="dtstandardview" BorderThickness="0" Height="429" Width="688" BorderBrush="Aqua" MouseLeftButtonDown="dtstandardview_MouseRightButtonUp_1" GridLinesVisibility="None" MouseRightButtonUp="dtstandardview_MouseRightButtonUp_1" VerticalScrollBarVisibility="Visible" AutoGenerateColumns="False" IsReadOnly="True" CanUserDeleteRows="False" AlternationCount="2" CanUserResizeRows="False" Sorting="dtstandardview_Sorting_1" Background="#DCDCDC" HeadersVisibility="Column" CanUserResizeColumns="False" RowHeight="27" SelectionUnit="FullRow" CanUserAddRows="False" MinRowHeight="27" LoadingRow="dtstandardview_LoadingRow" LoadingRowDetails="dtstandardview_LoadingRowDetails" Loaded="dtstandardview_Loaded" Initialized="dtstandardview_Initialized" CellEditEnding="dtstandardview_CellEditEnding" AutoGeneratingColumn="dtstandardview_AutoGeneratingColumn" UnloadingRow="dtstandardview_UnloadingRow" UnloadingRowDetails="dtstandardview_UnloadingRowDetails" SelectionChanged="dtstandardview_SelectionChanged" > <DataGrid.ItemContainerStyle> <Style TargetType="DataGridRow"> <EventSetter Event="Selected" Handler="dataGridRowSelected"/> </Style> </DataGrid.ItemContainerStyle> <DataGrid.Resources> <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="#FF0000"/> </DataGrid.Resources> <DataGrid.CellStyle> <Style TargetType="DataGridCell"> <Style.Triggers> <Trigger Property="IsSelected" Value="True"> <Setter Property="BorderBrush" Value="#cde0e5" /> <Setter Property="Background" Value="#cde0e5" /> </Trigger> </Style.Triggers> <Setter Property="Background" Value="Transparent"/> <Setter Property="FontSize" Value="12"/> <Setter Property="FontFamily" Value="Arial"/> <Setter Property="Foreground" Value="#404040"/> <Setter Property="FontWeight" Value="Bold"/> <Setter Property="DataContext"> <Setter.Value> <TextBlock Margin="10,0,0,0" TextWrapping="Wrap" Text="{Binding}"> <TextBlock.Effect> <DropShadowEffect BlurRadius="0" Color="#FF000000" Direction="-60" Opacity="0.32" ShadowDepth="1"/> </TextBlock.Effect> </TextBlock> </Setter.Value> </Setter> <Setter Property="Margin" Value="10,5" /> <Setter Property="VerticalContentAlignment" Value="Bottom"/> </Style> </DataGrid.CellStyle> <DataGrid.RowStyle> <Style TargetType="DataGridRow"> <Setter Property="FontWeight" Value="Bold"/> <Setter Property="FontSize" Value="12"/> <Setter Property="FontFamily" Value="Arial"/> <Setter Property="Foreground" Value="#404040"/> <Setter Property="Background" Value="Transparent"/> <Setter Property="DataContext"> <Setter.Value> <TextBlock Margin="10,0,0,0" TextWrapping="Wrap" Text="{Binding}"> <TextBlock.Effect> <DropShadowEffect BlurRadius="0" Color="#FF000000" Direction="-60" Opacity="0.32" ShadowDepth="1"/> </TextBlock.Effect> </TextBlock> </Setter.Value> </Setter> <Style.Triggers> <Trigger Property="IsSelected" Value="True"> <!--<Setter Property="BorderBrush" Value="#c7dae0" /> <Setter Property="Background" Value="#c7dae0"></Setter> <Setter Property="BorderThickness" Value="2" />--> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type DataGridRow}"> <ControlTemplate.Resources> <Storyboard x:Key="SelectedOn"> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="select_gradient" Storyboard.TargetProperty="(UIElement.Opacity)"> <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1" /> </DoubleAnimationUsingKeyFrames> </Storyboard> <Storyboard x:Key="SelectedOff"> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="select_gradient" Storyboard.TargetProperty="(UIElement.Opacity)"> <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0" /> </DoubleAnimationUsingKeyFrames> </Storyboard> <Storyboard x:Key="HoverOn"> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="hover_gradient" Storyboard.TargetProperty="(UIElement.Opacity)"> <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0.85" /> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="highlight" Storyboard.TargetProperty="(UIElement.Opacity)"> <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0.65" /> </DoubleAnimationUsingKeyFrames> </Storyboard> <Storyboard x:Key="HoverOff"> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="hover_gradient" Storyboard.TargetProperty="(UIElement.Opacity)"> <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0" /> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="highlight" Storyboard.TargetProperty="(UIElement.Opacity)"> <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0" /> </DoubleAnimationUsingKeyFrames> </Storyboard> </ControlTemplate.Resources> <Border x:Name="DGR_Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True"> <SelectiveScrollingGrid> <SelectiveScrollingGrid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="*"/> </SelectiveScrollingGrid.ColumnDefinitions> <SelectiveScrollingGrid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="Auto"/> </SelectiveScrollingGrid.RowDefinitions> <Rectangle x:Name="hover_gradient" StrokeThickness="1" RadiusX="1" RadiusY="1" Opacity="0" IsHitTestVisible="False" Grid.Column="1" Fill="{DynamicResource MouseOverBrush}"/> <Rectangle x:Name="highlight" Margin="1" StrokeThickness="1" RadiusX="0.5" RadiusY="0.5" Opacity="0" IsHitTestVisible="False" Grid.Column="1" Stroke="{DynamicResource MouseOverHighlightBrush}" Fill="{DynamicResource MouseOverHighlightBrush}"/> <Rectangle x:Name="select_gradient" Grid.Row="0" Grid.ColumnSpan="2" StrokeThickness="1" RadiusX="1" RadiusY="1" Opacity="0" IsHitTestVisible="False" Fill="{DynamicResource PressedBrush}" Stroke="{DynamicResource PressedBorderBrush}"/> <DataGridCellsPresenter Grid.Column="1" ItemsPanel="{TemplateBinding ItemsPanel}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/> <DataGridDetailsPresenter Grid.Column="1" Grid.Row="1" SelectiveScrollingGrid.SelectiveScrollingOrientation="{Binding AreRowDetailsFrozen, ConverterParameter={x:Static SelectiveScrollingOrientation.Vertical}, Converter={x:Static DataGrid.RowDetailsScrollingConverter}, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}" Visibility="{TemplateBinding DetailsVisibility}"/> <DataGridRowHeader Grid.RowSpan="2" SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical" Visibility="{Binding HeadersVisibility, ConverterParameter={x:Static DataGridHeadersVisibility.Row}, Converter={x:Static DataGrid.HeadersVisibilityConverter}, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"/> </SelectiveScrollingGrid> </Border> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True" SourceName="DGR_Border"> <Trigger.ExitActions> <BeginStoryboard Storyboard="{StaticResource HoverOff}" x:Name="HoverOff_BeginStoryboard" /> </Trigger.ExitActions> <Trigger.EnterActions> <BeginStoryboard Storyboard="{StaticResource HoverOn}" x:Name="HoverOn_BeginStoryboard" /> </Trigger.EnterActions> </Trigger> <Trigger Property="IsSelected" Value="true"> <Trigger.ExitActions> <BeginStoryboard x:Name="SelectedOff_BeginStoryboard" Storyboard="{StaticResource SelectedOff}" /> </Trigger.ExitActions> <Trigger.EnterActions> <BeginStoryboard Storyboard="{StaticResource SelectedOn}" /> </Trigger.EnterActions> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Trigger> </Style.Triggers> </Style> </DataGrid.RowStyle> <DataGrid.RowBackground > <ImageBrush ImageSource="/ClientApplication;component/Images/second_row_bg.png"/> </DataGrid.RowBackground> <DataGrid.AlternatingRowBackground> <ImageBrush ImageSource="/ClientApplication;component/Images/bonus_progress_bg.png"/> </DataGrid.AlternatingRowBackground> <DataGrid.ColumnHeaderStyle> <Style TargetType="{x:Type DataGridColumnHeader}"> <Setter Property="VerticalContentAlignment" Value="Center" /> <Setter Property="ContentTemplate" > <Setter.Value> <DataTemplate> <TextBlock Foreground="#404040" FontWeight="Bold" Margin="10,0,0,0" TextWrapping="Wrap" Text="{Binding}" TextOptions.TextFormattingMode="Display"> <TextBlock.Effect> <DropShadowEffect BlurRadius="0" Color="#FFFFFF" Direction="-90" Opacity="0.40" ShadowDepth="1" RenderOptions.ClearTypeHint="Auto" /> </TextBlock.Effect> </TextBlock> </DataTemplate> </Setter.Value> </Setter> <Setter Property="Background"> <Setter.Value> <ImageBrush ImageSource="/ClientApplication;component/Images/table_bg_header.png"/> </Setter.Value> </Setter> <Setter Property="BorderBrush"> <Setter.Value> <ImageBrush ImageSource="/ClientApplication;component/Images/titel_bg.png"/> </Setter.Value> </Setter> <Setter Property="Foreground" Value="#404040" /> <Setter Property="BorderThickness" Value="0, 0, 1, 0"/> <Setter Property="Height" Value="26" /> <Setter Property="FontSize" Value="14"/> <Setter Property="FontFamily" Value="Arial"/> </Style> </DataGrid.ColumnHeaderStyle> <DataGrid.Columns> <DataGridTextColumn Width="125" Header="Table" Binding="{Binding Path=Table}"> </DataGridTextColumn> <DataGridTextColumn Width="101" Header="Stakes" Binding="{Binding Path=Stakes}" /> <DataGridTextColumn Width="95" Header="Game" Binding="{Binding Path=Game}" /> <DataGridTemplateColumn Header="Type" Width="86"> <DataGridTemplateColumn.CellTemplate> <DataTemplate x:Name="typedatatempl"> <StackPanel Orientation="Horizontal" Name="stackpaneltype"> <TextBlock Name="typedate" Text="{Binding Path=Type}" Margin="2,0,0,2" /> <TextBlock Name="txtblocknumber" Text="{Binding Path=number}" Margin="2, 0, 0, 2" Background="Gray" TextAlignment="Center" FontFamily="Arial" FontWeight="Bold" FontSize="10" Foreground="White" Height="13" Width="13" VerticalAlignment="Center" HorizontalAlignment="Center" /> <TextBlock Name="txtblockalpha" Text="{Binding Path=alphabate}" Margin="5,0,0,2" Background="Transparent" FontFamily="Arial" TextAlignment="Center" FontWeight="Bold" FontSize="10" Foreground="White" Height="13" Width="13" VerticalAlignment="Center" HorizontalAlignment="Center"/> </StackPanel> </DataTemplate> </DataGridTemplateColumn.CellTemplate> </DataGridTemplateColumn> <DataGridTextColumn Width="83" Header="Players" Binding="{Binding Path=Players}" /> <DataGridTextColumn Width="117" Header="Average Pot" Binding="{Binding Path=Average}" /> <DataGridTextColumn Width="63" Header="H/Hr" Binding="{Binding Path=hhr}" /> </DataGrid.Columns> </DataGrid>How can i change the back color of cell base on value.
I did on dtstandardview_LoadingRow event but not working .