Move to next row when pressing enter key without committing the row - wpf

Question

I have a xaml datagrid containing data, and I am using mvvm.
I would like my cells to change of color after I have edited them. I do not care about saving the color for later use, I just want a visual change right after the content of the cell has been edited.
I was able to achieve the aforementioned behaviour by using a bit of code behind (I wanted to avoid code behind, but since it's purely visual, I guess it's totally fine):
private void MyGrid_CellEditEnding(object sender, DataGridCellEditEndingEventArgs e)
{
FrameworkElement element = e.Column.GetCellContent(MyGrid.SelectedItem);
(element.Parent as DataGridCell).Background = (SolidColorBrush)Application.Current.Resources["EditedCellBackground"];
}
This works fine as long as the selected row has the focus. In other words, I can tab back and forth on the same row, and the cell edited has the specified color for background.
Now, the problem is that when I press enter, the row appears to be committed, the cursor moves to the following line, and the background of the edited cell returns back to its original color.
For completeness, here is the datagrid (minus a few columns):
<DataGrid Style="{StaticResource MainContentDataGridTheme}"
ItemsSource="{Binding Source={StaticResource Categories}}"
Grid.Row="1"
x:Name="MyGrid"
CellEditEnding="MyGrid_CellEditEnding">
<DataGrid.GroupStyle>
<GroupStyle>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<DataGridRowsPresenter/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupItem}">
<Expander Name="expander" IsExpanded="True">
<Expander.Header>
<StackPanel>
<TextBlock Text="{Binding Name}" FontWeight="DemiBold" FontSize="13" />
<TextBlock Text="{Binding ItemCount, StringFormat={}Items: {0}}" FontSize="9" />
</StackPanel>
</Expander.Header>
<ItemsPresenter />
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
</DataGrid.GroupStyle>
<DataGrid.ColumnHeaderStyle>
<Style TargetType="DataGridColumnHeader">
<Setter Property="HorizontalContentAlignment" Value="Right" />
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock TextWrapping="WrapWithOverflow" TextTrimming="CharacterEllipsis" Text="{Binding}"></TextBlock>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</DataGrid.ColumnHeaderStyle>
<DataGrid.Columns>
<DataGridTextColumn Width="25*" Binding="{Binding AppliedPercentage, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
Header="Applied %">
<DataGridTextColumn.CellStyle>
<Style>
<Setter Property="UIElement.IsEnabled" Value="{Binding IsEnabled}" />
<Setter Property="TextBlock.TextAlignment" Value="Right" />
</Style>
</DataGridTextColumn.CellStyle>
</DataGrid.Columns>
</DataGrid>
Here is the style for the datagrid:
<Style TargetType="DataGrid" x:Key="MainContentDataGridTheme">
<Setter Property="AutoGenerateColumns" Value="False"/>
<Setter Property="ScrollViewer.CanContentScroll" Value="True"/>
<Setter Property="HeadersVisibility" Value="Column"/>
<Setter Property="AlternatingRowBackground" Value="{StaticResource DataGridAlternatingRowColor}" />
<Setter Property="Margin" Value="10,10,10,0" />
<Setter Property="CanUserDeleteRows" Value="False" />
<Setter Property="CanUserAddRows" Value="False" />
<Style.Resources>
<Style TargetType="DataGridCell">
<Style.Setters>
<Setter Property="TextBlock.TextAlignment" Value="Right" />
</Style.Setters>
</Style>
</Style.Resources>
</Style>
How can I keep the background of the edited cell while keeping the behaviour of the enter key? I do not mind losing the row commit (the UpdateSourceTrigger takes care of updating my Properties anyway), but I absolutely want to keep the behaviour of the enter key, that is to say: go to the immediate cell down (next row, same column), and be in a position to edit the content right away.
Thanks

Answer 1

After a bit of research, and experimenting with various things, I finally found a workaround that fulfills my requirements.
I added a bit more code behind to do the following:
Disable the row commit to prevent the background of the edited cell to be reset to its original colour.
Catch the KeyUp Event to artificially recreate the behaviour of the enter key.
So, in the xaml, I added the 2 following properties to my datagrid:
RowEditEnding="MyGrid_RowEditEnding"
KeyUp="MyGrid_KeyUp"
And in the code behind, I implemented the corresponding methods:
private void MyGrid_RowEditEnding(object sender, DataGridRowEditEndingEventArgs e)
{
// Prevents the row to be committed, but disable the "go to next row" behaviour
e.Cancel = true;
}
private void MyGrid_KeyUp(object sender, KeyEventArgs e)
{
var uiElement = e.OriginalSource as UIElement;
if (e.Key == Key.Enter && uiElement != null)
{
// Handle the key press as normal (-> validate the input)
e.Handled = true;
// Get the next element in the UI
var nextUIElement = uiElement.PredictFocus(FocusNavigationDirection.Down);
// Check if there if the next element is not null. This would occur with the last row of the grid.
if (nextUIElement != null)
{
// Check if the element is a cell, rather than something else like an expander for instance...
if (nextUIElement.GetType().Equals(typeof(DataGridCell)))
{
DataGridCellInfo nextCellInfo = new DataGridCellInfo((DataGridCell)nextUIElement);
// Set the selected row
PrelimsGrid.SelectedItem = nextCellInfo.Item;
// Set the selected cell.
PrelimsGrid.CurrentCell = nextCellInfo;
}
else
{
PrelimsGrid.SelectedItem = uiElement.MoveFocus(new TraversalRequest(FocusNavigationDirection.Down));
}
}
}
}
}
Although this works for me, I would humbly admit that I am not a very experienced developer, and that I would be very happy to read about any improvements or alternative solutions.