Create, Populate and Bind an ObservableCollection to a ListView in an MVVM


  • I do not want to use any code behind to have a true MVVM model. I am not sure that I am even creating the observablecollection correctly because I am not able to get it to show any elements within my listview. 

    Bottom line: I want to have an ObservableCollection bound to the UI. I want to type in an acronym and it's full name in two seperate textboxes and when I click the add button have a property change notification, an observableCollection which holds the data, and to see the data within the observableCollection within the listView in the GUI.

    I realize this covers a number of different things, but it's difficult to find a simple definition for each of these parts.

    namespace WpfApplication7214._1
        public class Observable : ObservableCollection<Reference>
            public Observable()
                : base()
                Add(new Reference("Model-View-ViewModel", "MVVM"));
        public class Reference
                private string _name;
                private string _acronym;
                public Reference(string name, string acronym)
                    this._name = name;
                    this._acronym = acronym;
                public string Name
                    get { return _name; }
                    set { _name = value; }
                public string Acronym
                    get { return _acronym; }
                    set { _acronym = value; }

    <Window x:Class="WpfApplication7214._1.MainWindow"
            Title="MainWindow" Height="350" Width="400">
            <local:ViewModel />
                <RowDefinition Height="100*" MinHeight="50"/>
                <RowDefinition Height="5"/>
                <RowDefinition Height="193*" MinHeight="50"/>
            <StackPanel Grid.Row="0">
                <Label Content="Acronym"  Height="26" Width="100" HorizontalContentAlignment="Right"/>
                <TextBox x:Name="txtAcronym"  Height="23"  TextWrapping="Wrap" Width="120"
                         Text="{Binding ElementName=lstRef, Path=SelectedItem.Name}"/>
                    <Label Content="Name"  Height="26" Width="100" HorizontalContentAlignment="Right"/>
                    <TextBox x:Name="txtName"   TextWrapping="Wrap" Width="240" Height="22"/>
                    <Button Content="Add"  Width="75" 
                            Height="22" HorizontalAlignment="Center" VerticalAlignment="Center" 
                            Command="{Binding Path=UpdateCommand}" CommandParameter="
                            {Binding ElementName=lstPerson, Path=SelectedItem.Address}"/>
            <GridSplitter HorizontalAlignment="Stretch" Height="5"  Grid.Row="1" />
            <ListView x:Name="lstRef" Grid.Row="2" ItemsSource="{Binding Reference}">
                        <GridViewColumn Header="Acronym" Width="100" DisplayMemberBinding="{Binding Acronym}" />
                        <GridViewColumn Header="Name" Width="300" DisplayMemberBinding="{Binding Name}"/>

    Thursday, July 03, 2014 9:11 PM


  • How does your view model class look like? Since you are binding the ItemsSource property of the ListBox to a source property called Reference, you need to define such a property in your view model class and make it return an ObservableCollecton:

    class ViewModel
            public ViewModel()
                this.Reference = new Observable();
            public Observable Reference { get; set; }

    I don't understand what the Add button is supposed to do but please don't ask two questions in the same thread. If you want to be able to update any properties of a Reference object at dynamically runtime and want these new values to get reflected in the view, the Reference class needs to implement the INotifyPropertyChanged interface:

    And please remember to mark any helpful posts as answer and/or helpful.

    Thursday, July 03, 2014 9:36 PM