The ObservableCollection is a special WPF collection that provides proper notifications to the UI when items are added, removed, or the list is refreshed because it implements INotifyCollectionChanged. It’s common to use this collection (or inherit from it) to contain your business objects you want to bind to in WPF.
Class Window1 Private CustomerData As ObservableCollection(Of Customer)
You can then set up a CollectionViewSource and use it’s View property to get a reference to the ListCollectionView in order to add and remove items instead of working with the source collection directly. This decouples your data source (and therefore any collection logic) from the form itself making it much easier to change sources later. I’ve showed how to use CollectionViewSources before but basically you just declare them in the Window.Resources section and bind to them in XAML:
<Window x:Class="Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Window1" Height="282" Width="440" Name="Window1"> <Window.Resources> <CollectionViewSource x:Key="CustomerSource" /> </Window.Resources> <Grid DataContext="{Binding Source={StaticResource CustomerSource}}">
And then you can set the Source property in code to your collection and obtain the ListCollectionView.
Dim customerSource = CType(Me.Resources("CustomerSource"), CollectionViewSource) customerSource.Source = Me.CustomerData Me.View = CType(customerSource.View, ListCollectionView)
Then you use the View to add and remove items from the collection and the UI will update properly:
Private Sub btnDelete_Click() Handles btnDelete.Click If Me.View.CurrentPosition > -1 Then 'removes the currently selected customer from the underlying collection Me.View.RemoveAt(Me.View.CurrentPosition) End If End Sub Private Sub btnAdd_Click() Handles btnAdd.Click 'adds a new customer to the underlying collection Dim customer = CType(Me.View.AddNew, Customer) 'do something with customer if needed... Me.View.CommitNew() End Sub
Calling these methods on the ListCollectionView will execute the InsertItem and RemoveItem methods on the ObservableCollection.
Now if you are using an Entity Data Model (EDM) the designer in Visual Studio 2008 SP1 will generate entity classes for you that you can also bind to in your UI. Access to these entities is done through the ObjectContext and the designer also creates a class for you that inherits from this when you create the EDM. It is named something like xxxEntites. (For instance, in Visual Studio 2008 SP1 “Add New Item” and select ADO.NET Entity Data Model and name it Northwind.edmx. Generate from Database and select Northwind. Select all the tables and then the designer will generate an ObjectContext called NorthwindEntities and entity classes based on the tables in the database.)
Because the ObjectContext is what tracks changes on entities you can place entities inside an ObservableCollection but in order for the ObjectContext to be notified that adds and deletes need to be tracked you need to write a bit of code. The easiest thing to do is to create your own class that inherits from ObservableCollection and override the InsertItem and RemoveItem methods so that you can tell the ObjectContext to either add or delete the entity which will ultimately execute against the database. In the constructor pass a reference to the ObjectContext. You can also pass in any collection of entities, say from a LINQ query, and then add them to the ObservableCollection. For example:
Imports NorthwindDAL Imports System.Collections.ObjectModel Public Class CustomerCollection Inherits ObservableCollection(Of Customer) Private _context As NorthwindEntities Public ReadOnly Property Context() As NorthwindEntities Get Return _context End Get End Property Sub New(ByVal customers As IEnumerable(Of Customer), ByVal context As NorthwindEntities) MyBase.New(customers) _context = context End Sub Protected Overrides Sub InsertItem(ByVal index As Integer, ByVal item As Customer) Me.Context.AddToCustomers(item) MyBase.InsertItem(index, item) End Sub Protected Overrides Sub RemoveItem(ByVal index As Integer) Me.Context.DeleteObject(Me(index)) MyBase.RemoveItem(index) End Sub End Class
Then you can use the collection on your WPF form instead like so:
Imports NorthwindDAL Class Window1 Private db As New NorthwindEntities Private CustomerData As CustomerCollection Private View As ListCollectionView Private Sub Window1_Loaded() Handles MyBase.Loaded Dim results = From c In db.Customers _ Where c.City.ToLower = "seattle" _ Order By c.LastName, c.FirstName _ Select c Me.CustomerData = New CustomerCollection(results, db)
Dim customerSource = CType(Me.Resources("CustomerSource"), CollectionViewSource) customerSource.Source = Me.CustomerData Me.View = CType(customerSource.View, ListCollectionView) End Sub
Private Sub btnSave_Click() Handles btnSave.Click Try db.SaveChanges() MsgBox("Customer data was saved.") Catch ex As Exception MsgBox(ex.ToString()) End Try End Sub
Private Sub btnDelete_Click() Handles btnDelete.Click If Me.View.CurrentPosition > -1 Then Me.View.RemoveAt(Me.View.CurrentPosition) End If End Sub Private Sub btnAdd_Click() Handles btnAdd.Click Dim customer = CType(Me.View.AddNew, Customer) 'do something with customer if needed... Me.View.CommitNew() End Sub
End Class
Now any updates, adds or deletes you make in the UI will be propagated to the database through the Entity Framework.
Enjoy!