WPF ListBox Not updating

Question

I searched in this forum but I was unable to find a solution for my specific scenario.

I`m trying to understand WPF and MVVM and I build a simple WPF for this.

My Data Model is (I Implemented INotifyPropertyChanged here and the constructor initializes all properties):

namespace MyApp.ui.Models
{
    public class Server : INotifyPropertyChanged
    {
        private int id;
        public int ID
        {
            get { return id; }
            set { id = value; }
        }

        private string name;
        public string Name
        {
            get { return name; }
            set { name = value; OnPropertyChanged(Name); }
        }

        private string ipAddress;
        public string IPAddress
        {
            get { return ipAddress; }
            set { ipAddress = value; OnPropertyChanged(IPAddress); }
        }

        public Server(int ServerID, string ServerName, string ServerIpAddress)
        {
            ID = ServerID;
            Name = ServerName;
            IPAddress = ServerIpAddress;
        }

        public event PropertyChangedEventHandler PropertyChanged;

        private void OnPropertyChanged(string propertyName)
        {
            PropertyChangedEventHandler handler = PropertyChanged;
            if(handler != null)
            {
                handler(this, new PropertyChangedEventArgs( propertyName ) );
            }
        }
    }
}

My ViewModel (used by WPF Code Behind):

namespace MyApp.ui.ViewModels
{
    public class ServersViewModel
    {
        private ObservableCollection<Server> server;
        public ObservableCollection<Server> Servers
        {
            get { return server; }
            set { server = value; }
        }

        public ServersViewModel()
        {
            Servers = new ObservableCollection<Server>
            {
                new Server(001, "Server001", @"192.168.254.3"),
                new Server(002, "Server002", @"100.92.0.200"),
                new Server(003, "Server003", @"64.32.0.3"),
                new Server(004, "Server004", @"172.10.0.4"),
                new Server(005, "Server005", @"165.23.0.233"),
                new Server(006, "Server006", @"81.22.22.6"),
                new Server(007, "Server007", @"10.10.0.7")
            };
        }

        public void ChangeServerNames()
        {
            //Before Change
            foreach (var item in Servers)
            {
                MessageBox.Show(item.Name);
            }

            int count = 1000;

            foreach (var item in Servers)
            {
                item.Name = "Server" + count.ToString();
                count += 1000;
            }

            //After Change
            foreach (var item in Servers)
            {
                MessageBox.Show(item.Name);
            }
        }
    }
}

My WPF Main View (Main Menu) loads a Custom user control (ExplorerView) with the following XAML code (Contains a listbox and each listbox item contains 1 checkbox + image + textblock)

<UserControl x:Class="MyApp.ui.Views.ExplorerView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:MyApp.ui.Views"
             mc:Ignorable="d" 
             d:DesignHeight="400" d:DesignWidth="200">
    <Grid>
        <ListBox ItemsSource="{Binding Servers}" Margin="2">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <CheckBox VerticalContentAlignment="Center" Margin="4">
                        <StackPanel Orientation="Horizontal">
                            <Image Source="/resources/server64.png" Height="30" Margin="4"></Image>
                            <TextBlock Text="{Binding Name}"
                                   VerticalAlignment="Center" Margin="4"></TextBlock>
                        </StackPanel>
                    </CheckBox>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</UserControl>

Finally the MainView Code Behind loads the ServersViewModel so the ExplorerView Control can Bind the data.

namespace MyApp.ui
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public ServersViewModel context { get; set; }

        public MainWindow()
        {
            InitializeComponent();

            context = new ServersViewModel();
            DataContext = context;
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            context.ChangeServerNames();
        }
    }
}

That said, I have 2 Questions:

1) As you can see, in the MainView I implemented a Button click event that calls into ServersViewModel.ChangeServerNames() Method. The problem is that my TextBlock in ExplorerView Control does not show the updated data.

I ChangeServerNames() I also use a MessageBox to show the Values Before and After the change, and I see that the values are changing, not sure why the ListBox/TextBlock is not updating...!!! (I already tested many other possible solutions, but I can`t get it working...)

2) I read that the CodeBehind in MainView (and all other views) should only contain the InitializeComponent(); and "DataContext = context;" at Maximum... If that is true, where the Events for button clicks and others should be placed?

Finally the code for the MainWindow XAML:

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:MyApp.ui"
        xmlns:Views="clr-namespace:MyApp.ui.Views"
        x:Class="MyApp.ui.MainWindow"
        mc:Ignorable="d"
        Title="Server" MinHeight="720" MinWidth="1024"
        Height ="720" Width="1024">
    <Grid Margin="2">

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200" />
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition Height="41*"/>
            <RowDefinition Height="608*"/>
            <RowDefinition Height="30"/>
        </Grid.RowDefinitions>

        <GridSplitter Grid.Column="1" Grid.Row="1"
              HorizontalAlignment="Center"
              VerticalAlignment="Stretch"
              Background="Gray" 
              ShowsPreview="True"
              Width="4" Margin="0,2,0,4"
              />

        <Views:MenuView Grid.ColumnSpan="3"/>
        <Views:FooterView Grid.Row="2" Grid.ColumnSpan="3" />
        <Views:ExplorerView Grid.Column="0" Grid.Row="1" />

        <!--Temp Tests-->
        <StackPanel Margin="12" Grid.Column="3" Grid.Row="1" Width="Auto" Height="Auto" Orientation="Horizontal" VerticalAlignment="Top" HorizontalAlignment="Left">
            <Button Margin="4" Width="120" Height="30" Content="Change Data Test..." Click="Button_Click" />
        </StackPanel>

    </Grid>
</Window>

Thank you for your time...

Answer 1

Ok, I found the problem...

Instead of

set { name = value; OnPropertyChanged(Name); }
set { ipAddress = value; OnPropertyChanged(IPAddress); }

I was missing the Quotesfor the String argument on method call The correct form is

set { name = value; OnPropertyChanged("Name"); }
set { ipAddress = value; OnPropertyChanged("IPAddress"); }

Weird that the compiler didn`t throw any error.... The Method private void OnPropertyChanged(string propertyName) Is "Asking" for a string as input arg.

AnyWay the best to avoid these errors (that I found) is to write the event like this (The caller supplies it`s own Public Name):

private void OnPropertyChanged([CallerMemberName] String propertyName = "")
  {
    if (PropertyChanged != null)
    {
      PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }
  }
}

Now I can do

set { name = value; OnPropertyChanged(); }
set { ipAddress = value; OnPropertyChanged(); }

Thank you.