DataGrid不会刷新

Question

I have a DataGrid which is using an ObservableCollection as the ItemsSource.

The items in the collection are items of a custom class.

When I edit one of those items, I can't get the view to update no matter what I do. I have tried removing and re-adding all of the items to the collection, and I have tried re-assigning the collection to the grid.

I know the edits are being saved correctly because I can see the changed values in the debugger.

What could possibly be causing this to happen?

Is there some other way I could force the grid to refresh?

Answer 1

As noted in the ObservableCollection documentation, only insertions and deletions are notified in the collection, which is exposed by the CollectionChanged event. In order to make the items in the ObservableCollection notify a change has been made, the underlying model must implement INotifyPropertyChanged :

Account:

using System.ComponentModel;
using System.Runtime.CompilerServices;

namespace TestUWP
{
    public class Account : INotifyPropertyChanged
    {
        private string _accountName;
        private decimal _amount;

        public string AccountName
        {
            get => _accountName;
            set
            {
                _accountName = value;
                OnPropertyChanged();
            }
        }

        public decimal Amount
        {
            get => _amount;
            set
            {
                _amount = value;
                OnPropertyChanged();
            }
        }


        public event PropertyChangedEventHandler PropertyChanged;

        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null) => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

ViewModel + RelayCommand:

using System;
using System.Collections.ObjectModel;
using System.Windows.Input;

namespace TestUWP
{
    public class AccountViewModel
    {
        public AccountViewModel()
        {
            Accounts = new ObservableCollection<Account>
            {
                new Account {AccountName = "Account 1", Amount = 1000M},
                new Account {AccountName = "Account 2", Amount = 2000M},
                new Account {AccountName = "Account 3", Amount = 3000M},
            };

            AddAccountCommand = new RelayCommand(AddAccount);
            EditAccountCommand = new RelayCommand(EditAccount);
        }

        public ICommand AddAccountCommand { get; }
        public ICommand EditAccountCommand { get; }

        public ObservableCollection<Account> Accounts { get; }

        private void AddAccount()
        {
            Accounts.Add(new Account{AccountName = $"Account {Accounts.Count+1}", Amount = 1000M * (Accounts.Count+1)});
        }

        private void EditAccount()
        {
            Accounts[Accounts.Count - 1].Amount += 200M;
        }
    }

    public class RelayCommand : ICommand
    {
        private readonly Action _execute;
        private readonly Func<bool> _canExecute;
        public event EventHandler CanExecuteChanged;

        public RelayCommand(Action execute, Func<bool> canExecute = null)
        {
            _execute = execute ?? throw new ArgumentNullException(nameof(execute));
            _canExecute = canExecute;
        }

        public bool CanExecute(object parameter) => _canExecute?.Invoke() ?? true;

        public void Execute(object parameter) => _execute();

        public void RaiseCanExecuteChanged() => CanExecuteChanged?.Invoke(this, EventArgs.Empty);
    }
}

MainPage:

<Page
    x:Class="TestUWP.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TestUWP"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Page.DataContext>
        <local:AccountViewModel />
    </Page.DataContext>

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="0.5*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <ListView Grid.Column="0" Grid.RowSpan="2" ItemsSource="{Binding Accounts}">
            <ListView.ItemTemplate>
                <DataTemplate x:DataType="x:String">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <TextBlock Text="{Binding AccountName}" Grid.Column="0" FontSize="30"/>
                        <TextBlock Text="{Binding Amount}" Grid.Column="1" Margin="30,0,0,0" FontSize="30"/>
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
        <Button Grid.Column="1" Grid.Row="0" Content="Add" FontSize="50" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Command="{Binding AddAccountCommand}"/>
        <Button Grid.Column="1" Grid.Row="1" Content="Edit" FontSize="50" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Command="{Binding EditAccountCommand}"/>
    </Grid>
</Page>

Changing Account from a POCO to one that implements the INotifyPropertyChanged allows the UI to refresh the Amount whenever the Edit button is clicked.

Alternatively, deleting and reinserting an item will also update the ItemSource , however this is not advisable due to the item will be appended to the end of the collection, and will then need custom sorting logic to say the least.