Flashing cell in GridView when it's updated by ObservableCollection

Question

I have a: <controls:DataGrid> in XAML page in UWP development made in C#, that updates prices from a webservice. By the ObservableCollection the cells updates the prices automatically. I want the cell to flash when an update of its value happens.

I don't know how to get last updated cell of GridView by ObservableCollection element, and which event it raises when it's updated programatically.

XAML Portion:

<controls:DataGrid  x:Name="dgBalances" Height="600" Margin="12" AutoGenerateColumns="True" ItemsSource="{x:Bind Info.Balances }" Grid.Row="4" Grid.Column="0" AlternatingRowBackground="SlateGray" RowBackground="DimGray"/>

Function Portion:

private async Task UpdateBalancesServiceAsync(ObservableCollection<AssetBalance> balances, MyWebservice client)
{
    //Run like service updating the observablecollection
    while (true)
    {
        // Get All Balances
        var ret = await client.GetBalancesAsync();
        if (ret.Success)
        {
            foreach (var returnedbalance in ret.Data)
            {
                
                if (balances.FirstOrDefault(x => x.Currency.Equals(returnedbalance.Currency)) != null)
                {
                    // If Balance exists and the Value needs update.
                    if (balances.FirstOrDefault(x => x.Currency.Equals(returnedbalance.Currency)).Value != returnedbalance.Total)
                    {
                        _ = CoreApplication.MainView.CoreWindow.Dispatcher.RunAsync(CoreDispatcherPriority.Normal,
                            () =>
                            {
                                balances.FirstOrDefault(x => x.Currency.Equals(returnedbalance.Currency)).Value = returnedbalance.Total;
                                balances.FirstOrDefault(x => x.Currency.Equals(returnedbalance.Currency)).LastUpdate = DateTime.Now;
                            });
                    }
                    else
                    {
                        // If Balance exists and the Value doesn't need update, just show the time last checked.
                        _ = CoreApplication.MainView.CoreWindow.Dispatcher.RunAsync(CoreDispatcherPriority.Normal,
                            () =>
                            {
                                balances.FirstOrDefault(x => x.Currency.Equals(returnedbalance.Currency)).LastUpdate = DateTime.Now;
                            });
                    }
                        
                }
                else
                {
                    // If Balance does not exists it will create the new one.
                    _ = CoreApplication.MainView.CoreWindow.Dispatcher.RunAsync(CoreDispatcherPriority.Normal,
                        () =>
                        {
                            balances.Add(new AssetBalance()
                            {
                                LastUpdate = DateTime.Now,
                                Currency = returnedbalance.Currency,
                                Value = returnedbalance.Total
                            });
                        });
                
                }
            }
        }
        Thread.Sleep(10000);
    }
}

Answer 1

You could try to custom cell to create your own column types by specifying the cell templates used to display and then declare a Background color property to bind with the column which you want to flash. For example, I create a Currency column and when the balance is up, changing its Background.

.xaml:

<controls:DataGrid Height="600" Margin="12" AutoGenerateColumns="False" ItemsSource="{x:Bind Balances,Mode=OneWay}" Grid.Row="4" Grid.Column="0" AlternatingRowBackground="SlateGray" RowBackground="DimGray">
    <controls:DataGrid.Columns>
        <!--Currency Column-->
        <controls:DataGridTemplateColumn Header="Currency">
            <controls:DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <StackPanel Background="{Binding CellBackground}" HorizontalAlignment="Stretch">
                        <TextBlock Text="{Binding Currency}"/>
                    </StackPanel>
                </DataTemplate>
            </controls:DataGridTemplateColumn.CellTemplate>
        </controls:DataGridTemplateColumn>
        ......
    </controls:DataGrid.Columns>
</controls:DataGrid>

.cs:

public class AssetBalance : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged = delegate { };

    ......
    public SolidColorBrush cellBackground { get; set; }
    public SolidColorBrush CellBackground
    {
        get { return cellBackground; }
        set
        {
            cellBackground = value;
            this.OnPropertyChanged();
        }
    }

    public void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }
}

//If the blance increases, change the Background

AssetBalance blance = Balances[index];
blance.CellBackground = new SolidColorBrush(Colors.Red);