WPF INotifyPropertyChanged not updating on an array property?

Question

I created a small example to demonstrate the issue I'm having.

First my class:

---

public class DisplayRow : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    private int?[] values;
    private string title;

    public string Title
    {
        get { return title; }
        set
        {
            title = value;
            if (PropertyChanged != null) PropertyChanged(this, new PropertyChangedEventArgs("Title"));
        }
    }

    public int?[] Values
    {
        get { return values; }
        set
        {
            values = value;
            if (PropertyChanged != null) PropertyChanged(this, new PropertyChangedEventArgs("Values[]"));
        }
    }

    public DisplayRow()
    {
        Values = new int?[6];
    }
}

---

The problem is the Values property, since it is an array. I'm not sure how to properly call INotifyPropertyChanged when an element in the array gets updated.

Here is my xaml:

<Window x:Class="WpfApplication5.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <Grid>
        <ListBox x:Name="MyListBox" Margin="0,0,0,65">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <WrapPanel>
                        <TextBlock Text="{Binding Path=Title}" />
                        <TextBlock Text="{Binding Path=Values[0]}" Margin="5,0,0,0" />
                        <TextBlock Text="{Binding Path=Values[1]}" Margin="5,0,0,0"  />
                        <TextBlock Text="{Binding Path=Values[2]}" Margin="5,0,0,0"  />
                        <TextBlock Text="{Binding Path=Values[3]}" Margin="5,0,0,0"  />
                        <TextBlock Text="{Binding Path=Values[4]}" Margin="5,0,0,0"  />
                        <TextBlock Text="{Binding Path=Values[5]}" Margin="5,0,0,0"  />                        
                    </WrapPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
        <Button Height="23" Margin="27,0,0,23" Name="button1" VerticalAlignment="Bottom" HorizontalAlignment="Left" Width="74" Click="button1_Click">Button</Button>
    </Grid>
</Window>

And the code behind:

public partial class Window1 : Window
{
    private readonly ObservableCollection<DisplayRow> displayRows = new ObservableCollection<DisplayRow>();

    public Window1()
    {
        InitializeComponent();

        displayRows.Add(new DisplayRow {Title = "Item 1", Values = new int?[] {1, 2, 3, 4, 5, 6}});
        displayRows.Add(new DisplayRow {Title = "Item 2", Values = new int?[] {7, 8, 9, 10, 11, 12}});
        displayRows.Add(new DisplayRow {Title = "Item 3", Values = new int?[] {13, 14, 15, 16, 17, 18}});

        MyListBox.ItemsSource = displayRows;
    }

    private void button1_Click(object sender, RoutedEventArgs e)
    {
        foreach (DisplayRow row in displayRows)
        {
            row.Values[0] = 99;
        }
    }
}

When I click on the button it changes the values of the first row, yet that change is not reflected on the UI. If I change the Title property, the title updates correctly.

Any ideas how I can call INotifyPropertyChanged so that it understands an array element was updated?

Answer 1

The reason your existing code doesn't work is because you're modifying the value within the array, not reassigning entire array itself to the property. Therefore you won't be firing a property change event.

I wouldn't use an array at all, use an ObservableCollection instead which implements INotifyCollectionChanged which the WPF binding infrastructure hooks into to better understand changes within the collection itself.

Answer 2

You could use an ObservableCollection<int?> instead of the array, to do all the plumbing for you.

Another option could be to make an int? container, fill the array with those, and the fire the PropertyChanged event on that int?'s setter.