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

    Question

  • 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"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:local="clr-namespace:WpfApplication7214._1"
            Title="MainWindow" Height="350" Width="400">
        <Window.DataContext>
            <local:ViewModel />
        </Window.DataContext>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="100*" MinHeight="50"/>
                <RowDefinition Height="5"/>
                <RowDefinition Height="193*" MinHeight="50"/>
            </Grid.RowDefinitions>
            <StackPanel Grid.Row="0">
            <WrapPanel>
                <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}"/>
                
            </WrapPanel>
                <WrapPanel>
                    <Label Content="Name"  Height="26" Width="100" HorizontalContentAlignment="Right"/>
                    <TextBox x:Name="txtName"   TextWrapping="Wrap" Width="240" Height="22"/>
                </WrapPanel>
                <WrapPanel>
                    <Button Content="Add"  Width="75" 
                            Height="22" HorizontalAlignment="Center" VerticalAlignment="Center" 
                            Margin="24,0,0,0" 
                            Command="{Binding Path=UpdateCommand}" CommandParameter="
                            {Binding ElementName=lstPerson, Path=SelectedItem.Address}"/>
                </WrapPanel>
            </StackPanel>
            <GridSplitter HorizontalAlignment="Stretch" Height="5"  Grid.Row="1" />
            <ListView x:Name="lstRef" Grid.Row="2" ItemsSource="{Binding Reference}">
                <ListView.View>
                    <GridView>
                        <GridViewColumn Header="Acronym" Width="100" DisplayMemberBinding="{Binding Acronym}" />
                        <GridViewColumn Header="Name" Width="300" DisplayMemberBinding="{Binding Name}"/>
                    </GridView>
                </ListView.View>
            </ListView>
        </Grid>
    </Window>

    Thursday, July 03, 2014 9:11 PM

Answers

  • 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: http://msdn.microsoft.com/en-us/library/ms743695(v=vs.110).aspx

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

    Thursday, July 03, 2014 9:36 PM