Reorder Observable Collection Binding in WinUI

Question

I have a few issues with binding an ObservableCollection using WinUI 3:

(a) When the collection changes (an item is added, removed), the ListView is not updated.

(b) Upon reordering the ListView (using the control itself), the ListView does not keep the new order.

Class Definitions

using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Xml.Linq;

public class Standards 
{
   public event PropertyChangedEventHandler PropertyChanged;
   private void NotifyPropertyChanged(string propertyName)
   {
    PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
   }

private ObservableCollection<Standard> _Collection;

public ObservableCollection<Standard> Collection {
    get => _Collection; 
    set { if (_Collection != value) { _Collection = value; 
        NotifyPropertyChanged("Description"); } } 
    }
}
public class Standard : INotifyPropertyChanged
 {
        public event PropertyChangedEventHandler PropertyChanged;
        private void NotifyPropertyChanged(string propertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
        public Standard() { }
        public Standard(XElement e)
        {
            Name = e.Attribute("name").Value;
            Description = e.Attribute("description").Value;
        }
        public Standard(string standard, string description)
        {
            Name = standard;
            Description = description;
        }
        private string _Description;
        private string _name;
        public string Name { get => _name;  set { if (_name != value){ _name = value; NotifyPropertyChanged("Name"); } } 
   }
        
        public string Description { get => _Description; set { if (_Description != value) { _name = value; NotifyPropertyChanged("Description"); } } }
 }

WinUI XAML

<ListView x:Name="lvStandards"
 Grid.Row="2"
 Margin="5" 
 CanReorderItems="True"
 ReorderMode="Enabled"
 AllowDrop="True"
 ItemsSource="{x:Bind viewModel.Standards.Collection, Mode=TwoWay}"/>

So how do you add, remove and re-order items? Your code sample doesn't tell. — mm8, Jan 17 '22 at 21:16

score 0 · Answer 1 · answered Jan 17 '22 at 16:20

On my test it works as expected. I think there is something wrong with your binding. If I bind at run-time:

lvData.ItemsSource = standards.Collection;

all works well and the collection gets reordered. Adding items to the collection also makes them appear in the list view.

Please try to bind at run-time.

score 0 · Answer 2 · edited Mar 25 '22 at 01:08

It might be just missing in this question but at least you need to implement INotifyPropertyChanged in your Standards class and change the argument at your Collection's NotifyPropertyChanged to "Collection".

public class Standards : INotifyPropertyChanged // HERE
{
    public event PropertyChangedEventHandler PropertyChanged;
    private void NotifyPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    private ObservableCollection<Standard> _Collection;

    public ObservableCollection<Standard> Collection
    {
        get => _Collection;
        set
        {
            if (_Collection != value)
            {
                _Collection = value;
                NotifyPropertyChanged("Collection");  // HERE
            }
        }
    }
}

Also take a look at the CommunityToolkit MVVM NuGet package. It will make your life easier and will make your code small and clean.

[ObservableObejct]
public partial class Standards
{
    [ObservableProperty]
    private ObservableCollection<Standard> _Collection;
}

Reorder Observable Collection Binding in WinUI

2 Answers2