MVVM WPF ViewModel DispatcherTimer是否不更新视图？

Question

I have a DispatcherTimer in my ViewModel that i can see firing every interval, but the view is not being updated?

the feed data comes from a xml url and i am trying to refresh the form every x seconds. Maybe more or less lables / differnt status

heres the code snippets:

ViewModel.cs

public class Nodes
{
public string name { get; set; }
public string id { get; set; }
public string status { get; set; }
public string last { get; set; }
public int level { get; set; }
public string parent { get; set; }
}

public ObservableCollection<CI> CIs
{
get;
set;
}

DispatcherTimer LogTimer;

public void LoadCIs()
{
ObservableCollection<CI> cis = new ObservableCollection<CI>();

LogTimer = new DispatcherTimer();
LogTimer.Interval = TimeSpan.FromMilliseconds(10000);

LogTimer.Tick += (s, e) =>
{
    //pull node list
    List<Nodes> SortedList = PopulateNodes();

    foreach (Nodes Node in SortedList)
    {
        //create labels for all top level nodes
        if (Node.level == 3)
        {
            cis.Add(new CI { NodeName = Node.name, NodeStatus = Node.status });
        }
    }

    CIs = cis;

};

LogTimer.Start();

}

Model.cs

public class CI : INotifyPropertyChanged {
  private string nodeName;
  private string nodeStatus;

    public string NodeName { 
     get { 
        return nodeName; 
     }

     set { 
        if (nodeName != value) { 
           nodeName = value; 
           RaisePropertyChanged("NodeName"); 
        } 
     } 
  }

    public string NodeStatus
    {
        get
        {
            return nodeStatus;
        }

        set
        {
            if (nodeStatus != value)
            {
                nodeStatus = value;
                RaisePropertyChanged("NodeStatus");
            }
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

  private void RaisePropertyChanged(string property) {
     if (PropertyChanged != null) {
        PropertyChanged(this, new PropertyChangedEventArgs(property));
     } 
  } 
   } 

view.xaml

<Grid> 
    <ItemsControl ItemsSource = "{Binding Path = CIs}">

            <ItemsControl.ItemTemplate>
                <DataTemplate>
                <Grid>
                    <Label Content = "{Binding Path = NodeName, Mode = OneWay}" 
                        Background = "{Binding Path = NodeStatus, Mode = OneWay}" 
                        Foreground="White"
                        FontFamily="Arial Black"
                        HorizontalContentAlignment="Center"                            
                        BorderBrush="Black" 
                        BorderThickness="1,1,1,1"/>

                </Grid>
                </DataTemplate>
            </ItemsControl.ItemTemplate>

    </ItemsControl>

</Grid>

how the form should look without timer enabled / commented out:

with the timer code enabled nothing is added to grid:

Thanks for looking

Answer 1

The problem:

You are changing the Collection CIs but do not notify it is changed. ObservableCollections report their changes but you're overwriting it, it will not report that.

---

Option 1:

Because you use an ObservableCollection you can add it to the bound collection directly and it will notify the UI automatically. So instead of:

cis.Add(new CI { NodeName = Node.name, NodeStatus = Node.status });

Do this:

CIs.Add(new CI { NodeName = Node.name, NodeStatus = Node.status });

if you do this you have to initialize CIs first:

public ObservableCollection<CI> CIs
{
    get;
    set;
} = new ObservableCollection<CI>(); // < initialize it

---

Option 2:

Add the INotifyPropertyChanged interface to the Nodes class and notify like this:

this.PropertyChanged?.Invoke( this, new PropertyChangedEventArgs( nameof( this.CIs ) ) );

in the setter of CIs