What are Observable Collections?

Observable collection Represents a dynamic data collection that provides notifications when items get added, removed, or when the whole list is refreshed.

Implementation

  1. In your project create a new folder and rename it as Models.
  2. Now add a class inside Models folder with name products, in my case i am adding only 1 member in my class you can add as many as you needed. Assume that 1 member is the title of product then the structure of my product.cs class will be as follow:
  class Product
    {
        public string title { get; set; }

        public Product(string t)
        {
            title = t;
        }
        public override string ToString()
        {
            return "Product with name: "+title+" have been added successfully";
        }

In the above class i have create a cosntructor taking 1 arguement so that i can assign some value passed by user to the member of my class. After that you can see an overriden method ToString() , it is optional i have created it to reduce my work at xaml side so that whenever i want the result from this class it will return the result as : Product with name: XYZ have been added successfully.

  1. Now inside your MainPage.xaml add a listbox , a textbox and a button or you can use your own layout aswell , in my case i have used the following layout:
    <grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    
            <stackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
                <listBox x:Name="itemsList" ItemsSource="{Binding}" FontSize="20"></listBox>
                <stackPanel HorizontalAlignment="Stretch" Orientation="Horizontal">
                    <textBox Width="400" Margin="20" x:Name="itemBox" Header="Enter Product Name"/>
                    <button Margin="20,10,0,0" Content="Add" VerticalAlignment="Center" FontSize="20" Click="Button_Click"/>
                    <button Margin="20,10,0,0" Content="Remove" VerticalAlignment="Center" FontSize="20" Click="Button_Click_1"/>
    
                </stackPanel>
            </stackPanel>
    
    
        </grid>
    
  2. Now create an instance of your class using ObservableCollections like below inside your MainPage.xaml.cs file:

            ObservableCollection<models.Product> pro = new ObservableCollection<models.Product>();
    
    
  3. Inside your ClickEvent handler of Add Button add the following code:

                
    pro.Add(new Models.Product(itemBox.Text)); 
                itemsList.DataContext = pro;
    
    What we are doing here is the actual thing , we are adding as many items as we want inside our ObservableColelction using the structure of our Product class. and then we are assigning all the data present in ObservableCollection’s stack to our Listbox which is named as itemList and remember we have to assign it to DataContext Property because we are binding the elements.

    Final Outcome:

  • Now if you want to remove any particular item from the list then its pretty simple use the following code inside your remove button click event handler:

                
    pro.RemoveAt(itemsList.SelectedIndex); 
    

    What we have done here is, we have remove the item in ObservableCollection’s stack at particular index using the selected index property of our listbox.

  •  

    That’s All, happy coding.

    Download a Sample Project