The goal is to assign proper color to the wrapping border (that makes the ControlTemplate
targeting DataGridCell
) when the columns has IsReadOnly
set to false.
<Style BasedOn="{StaticResource MaterialDesignDataGridCell}" TargetType="{x:Type DataGridCell}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridCell}">
<Border
Margin="8"
Background="{TemplateBinding Background}"
CornerRadius="4">
<Grid>
<ContentPresenter VerticalAlignment="Center" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsReadOnly" Value="False">
<Setter Property="Background" Value="{StaticResource SecondaryHueMidBrush}" />
<Setter Property="Foreground" Value="{StaticResource MaterialDesignDarkForeground}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The color is assigned correctly
However when some row is selected and then cursor leaves the mentioned row, the assigned coloring disappears and I am left with the default one. It happens only when the row is still selected.
The considered columns which are the only ones which are not ReadOnly
are defined in the following way
<DataGridTextColumn
Binding="{Binding PreviousMonthResult, UpdateSourceTrigger=PropertyChanged}"
EditingElementStyle="{StaticResource textCenterEditing}"
ElementStyle="{StaticResource textCenter}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<Border
Padding="8"
Background="{StaticResource SecondaryHueMidBrush}"
CornerRadius="8">
<TextBlock Foreground="{StaticResource MaterialDesignDarkForeground}" Text="{Binding DataContext.DateHeaders[PreviousMonth], RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}" />
</Border>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn
Binding="{Binding CurrentMonthResult, UpdateSourceTrigger=PropertyChanged}"
EditingElementStyle="{StaticResource textCenterEditing}"
ElementStyle="{StaticResource textCenter}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<Border
Padding="8"
Background="{StaticResource SecondaryHueMidBrush}"
CornerRadius="8">
<TextBlock Foreground="{StaticResource MaterialDesignDarkForeground}" Text="{Binding DataContext.DateHeaders[CurrentMonth], RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}" />
</Border>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
Where textCenterEditing
and textCenter
<Style BasedOn="{StaticResource MaterialDesignDataGridColumnHeader}" TargetType="DataGridColumnHeader">
<Setter Property="HorizontalContentAlignment" Value="Center" />
</Style>
<Style x:Key="textCenter" TargetType="{x:Type TextBlock}">
<Setter Property="TextAlignment" Value="Center" />
</Style>
<Style
x:Key="textCenterEditing"
BasedOn="{StaticResource MaterialDesignTextBox}"
TargetType="{x:Type TextBox}">
<Setter Property="TextAlignment" Value="Center" />
</Style>
However I guess these "small" styles should not interfere with achieving the desired result
You're using some material design styling there which might be a complication, not sure.
The problem is due to the selected brush, applied at row level.
If you're not bothered about highlighting selected row background the you can set it transparent.
Roughly:
<DataGrid.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightBrushKey}" Color="Transparent"/>
</DataGrid.Resources>
You might want to use the foreground brush to denote selection.
There might possibly be a more elegant material design orientated solution.