WPF ObservableCollection tutorial

Prabhat39
Posted by in WPF category on for Intermediate level | Points: 250 | Views : 34835 red flag

In this article we will see how observableCollection used in WPF.


 Download source code for WPF ObservableCollection tutorial

WPF ObservableCollection

Introduction

An ObservableCollection is a dynamic collection of objects of a given type. Object can be added, removed or be updated with an automatic notification of actions. When an object is added to or removed from an observable collection, the UI is automatically updated. This happens because, when binding to an observable collection, WPF automatically adds CollectionChanged event handler to the ObservableCollecion's.

ObservableCollection class is exists in System.Collections.ObjectModel namespace.

Objective


Add items to the listview dynamically by using observableCollection.

Using Code

I will demonstrate how this works in a simple example:

I have a window with a Button, two TextBox and a ListView and each time you click the Button the text of the TextBox is added to the collection and the ListView gets updated automatically.

UI

Code File

Here a Person class having 2 properties Name and Address.  One observableCollection object is created with Person type and bind to the ListView. 

lstNames.ItemsSource = person; 

By doing so, we can dynamically insert, update and remove item from ListView.

person.Add(new Person() { Name = txtName.Text, Address = txtAddress.Text });

    public partial class MainWindow : Window
{
private ObservableCollection<Person> person;
public MainWindow()
{
InitializeComponent();
person = new ObservableCollection<Person>()
{
new Person(){Name="Prabhat",Address="India"},
new Person(){Name="Smith",Address="US"}
};
lstNames.ItemsSource = person;
}
private void btnNames_Click(object sender, RoutedEventArgs e)
{
person.Add(new Person() { Name = txtName.Text, Address = txtAddress.Text });
txtName.Text = string.Empty;
txtAddress.Text = string.Empty;
}
}
public class Person
{
public string Name { get; set; }
public string Address { get; set; }
}


XAML File

ObservableCollection is already bind to Listview. So all we need to do in xaml file is to specify binding member to each column. We can achieve it by “DisplayMemberBinding” attribute and “Binding” markup extension.

<GridViewColumn Header="Name" DisplayMemberBinding="{Binding Name}"/>

<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Grid.Column="0" Margin="5,5,5,5">
<TextBlock x:Name="lblName" Text="Name"></TextBlock>
<TextBox x:Name="txtName"></TextBox>
<TextBlock x:Name="lblAddress" Text="Address"></TextBlock>
<TextBox x:Name="txtAddress"></TextBox>
<Button Grid.Column="0" Width="100" Height="20" Margin="5,5,5,5" x:Name="btnNames" Click="btnNames_Click" Content="Add"></Button>
</StackPanel>

<ListView x:Name="lstNames" Margin="5,5,5,5" Grid.Column="1" Grid.Row="0">
<ListView.View>
<GridView x:Name="grdNames">
<GridViewColumn Header="Name" DisplayMemberBinding="{Binding Name}"/>
<GridViewColumn Header="Address" DisplayMemberBinding="{Binding Address}"/>
</GridView>
</ListView.View>
</ListView>
</Grid>

Points of Interest

Binding is a powerful markup extension in WPF. In the above example you can bind listview with textbox. When you select listview row then data of the selected row will display in the textbox.

<TextBox x:Name="txtName Text="{Binding ElementName= lstNames, Path=SelectedItem.Name}"></TextBox>

Page copy protected against web site content infringement by Copyscape

About the Author

Prabhat39
Full Name: Prabhat Kumar
Member Level:
Member Status: Member
Member Since: 12/21/2012 5:30:10 AM
Country: India
Regards, Prabhat Kumar
http://www.dotnetfunda.com
Prabhat is a programmer and having 5+ years of developing experience in IT field. Major strength are C#, WPF, asp.net and SQL server 2008. He is also having good exposure in WCF.

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)