Failing to add items in listbox on button Click

Question

I am a newbie to MVVM. I have two grid's inside by main window where one grid contains a listbox towards left side and other grid on the right side contains list view and 2 buttons.

I am able to add items to listview and even figure out how to get the selected item from list view. Once I select the item on list view and click a button(Connect), listbox towards left shud get updated with items which I have added from viewmodel class.

View below shows Listbox towards my left:

<Grid Grid.Column="0" Name="BoardTabSelect" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
    <ListBox Name="ButtonPanel" 
             ItemsSource="{Binding BoardTabs, Mode=TwoWay}" 
             SelectedItem="{Binding SelectedTab, Mode=TwoWay}" >
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Name="BoardtabChanger" 
                               Margin="53,27,0,0" 
                               Text="{Binding TabOperation}" />
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</Grid>

View below shows listview towards Right along with 2 Buttons:

<Grid Grid.Row="0" Name="MainConnectGrid" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
    <ListView Name="listView" 
              ItemsSource="{Binding Products}" 
              SelectedItem="{Binding SelectedProduct, Mode=TwoWay}">
        <ListView.View>
            <GridView>
                <GridViewColumn Width="300" 
                                Header="Name" 
                                DisplayMemberBinding="{Binding Name}" />
                <GridViewColumn Width="283" 
                                Header="Connection Status" 
                                DisplayMemberBinding="{Binding Connection_Status}" />
            </GridView>
        </ListView.View>
    </ListView>

    <Button Content="Connect" 
            Height="23" Width="100" 
            HorizontalAlignment="Left" VerticalAlignment="Top"
            Margin="55,519,0,0" 
            Name="ConnectBtnGrid"  
            Command="{Binding Path=ConnectCommand}" />                        
    <Button Content="Disconnect" 
            Height="23" Width="100"
            HorizontalAlignment="Left" VerticalAlignment="Top" 
            Margin="446,519,0,0" 
            Name="DisconnectBtn" 
            Command="{Binding Path=DisconnectCommand}" />
</Grid>

VIEW MODEL:

public class ProductViewModel : INotifyPropertyChanged 
{
    public List<Product> m_Products;
    public List<Product> m_BoardTabs;                

    public ProductViewModel()
    {           
        m_Products = new List<Product>()
        {                
            new Product() {Name = "Bavaria", Connection_Status = "Disconnected"},
            new Product() {Name = "Redhook", Connection_Status = "Disconnected"},                
        };

        m_BoardTabs = new List<Product>()
        {
            new Product() {TabOperation = "Connect"}                 
        };
    }                      

    public List<Product> Products { get; set; }

    public List<Product> BoardTabs { get; set; }

    private Product m_SelectedItem;
    public Product SelectedProduct
    {
        get { return m_SelectedItem; }

        set
        {
            m_SelectedItem = value;                
            NotifyPropertyChanged("SelectedProduct");
        }
    }

    private Product m_SelectedTab;
    public Product SelectedTab
    {
        get { return m_SelectedTab; }

        set
        {
            m_SelectedTab = value;
            NotifyPropertyChanged("SelectedTab");                
        }
    }

    private ICommand mUpdater;
    public ICommand ConnectCommand
    {
        get
        {
            if (mUpdater == null)
                mUpdater = new DelegateCommand(new Action(SaveExecuted), new Func<bool>(SaveCanExecute));

            return mUpdater;
        }
        set { mUpdater = value; }
    }

    public bool SaveCanExecute()
    {
        return true;
    }     

    public void SaveExecuted()
    {
        if (SelectedProduct.Connection_Status == "Disconnected" && SelectedProduct.Name == "Bavaria")
        {
            SelectedProduct.Connection_Status = "Connected";
            m_BoardTabs.Add(new Product() { TabOperation = "I2C" });         
            m_BoardTabs.Add(new Product() { TabOperation = "Voltage" });    
            m_BoardTabs.Add(new Product() { TabOperation = "Codec" });   
        }
    }
}

Inside the Save Executed method I am trying to add the items in listbox but when I run the application and select item from listview and press CONNECT Btn, the list does not get updated. My model class is complete with all three properties (Name, Connection Status and TabOperation)

Answer 1

Check properies of ProductViewModel. It implements INotifyPropertyChanged , and in Products, BoardTabs, you not notify the change .

  public List<Product> Products
        {
            get
            {
                return m_Products;
            }

            set
            {
                m_Products = value;
NotifyPropertyChanged("Products")
            }
        }

        public List<Product> BoardTabs
        {
            get
            {
                return m_BoardTabs;
            }

            set
            {
                m_BoardTabs = value;
NotifyPropertyChanged("BoardTabs")
            }
        }

Answer 2

BoardTabs and Products need to be an ObservableCollection<Product>. Otherwise WPF doesn't get informed about new items in the lists and thus can't update the UI.