MVVM：View上的listview控件由Model属性更新，而不由ViewModel中的包装器属性更新

Question

I am trying to create a sample pure MVVM application. My problem is that if I bind Model property to ListView item on UI, it works well but when I try to bind wrapper of Model property [created in ViewModel] it does not work.

In my sample application, If I use Name & Location [Properties exposed in Model] properties in FamilyView.xaml\\ListView control, it displays the items but if I use MemberName and MemberLocation [Properties exposed in ViewModel] it does not update the list.

What I understand about relation among layers in MVVM is that ViewModel separates View & Model. If so then we should use ViewModel properties to bind to View not the Model properties. Please suggest how to update my list by binding it to ViewModel properties.

My codes are as below:

FamilyView.xaml

<Window x:Class="MVVM_15thSep13.View.FamilyView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:MVVM_15thSep13.ViewModel"
        Title="FamilyView" Height="283" Width="367">
    <Window.DataContext>
        <local:FamilyViewModel/>
    </Window.DataContext>
    <Grid>
        <TextBox Text="{Binding Family.Name, FallbackValue=BindingFailed}" Height="23" HorizontalAlignment="Left" Margin="12,16,0,0" Name="textBox1" VerticalAlignment="Top" Width="120" />
        <TextBox Text="{Binding Family.Location, FallbackValue=BindingFailed}"  Height="23" HorizontalAlignment="Left" Margin="12,57,0,0" Name="textBox2" VerticalAlignment="Top" Width="120" />
        <Button Command="{Binding AddDetailsCommand}" Content="Button" Height="23" HorizontalAlignment="Left" Margin="240,31,0,0" Name="button1" VerticalAlignment="Top" Width="93" />
        <ListView ItemsSource="{Binding FamilyCollection}" SelectedItem="{Binding Family}" Height="126" HorizontalAlignment="Left" Margin="14,110,0,0" Name="listView1" VerticalAlignment="Top" Width="319" UseLayoutRounding="True">
            <ListView.View>
                <GridView>
                    <GridViewColumn Header="Name" DisplayMemberBinding="{Binding Name}" Width="120"/>
                    <GridViewColumn Header="Location" DisplayMemberBinding="{Binding Location}" Width="120"/>                    
                </GridView>
            </ListView.View>
        </ListView>
    </Grid>
</Window>

FamilyModel.cs

namespace MVVM_15thSep13.Model
{
    public class FamilyModel:ObservableObject
    {
        private string m_Name;
        private string m_Location;

        public string Name
        {
            get { return m_Name; }
            set 
            {
                m_Name = value;
                if (m_Name != value)
                    OnPropertyChanged("Name");
            }
        }

        public string Location
        {
            get { return m_Location; }
            set
            {
                m_Location = value;
                if (m_Location != value)
                    OnPropertyChanged("Location");
            }
        }

        public FamilyModel()
        {
            m_Name = "Default Name";
            m_Location = "Default Location";
        }

        public FamilyModel(string name, string location)
        {
            m_Name = name;
            m_Location = location;
        }
    }
}

FamilyViewModel.cs

 namespace MVVM_15thSep13.ViewModel
{
    public class FamilyViewModel:ObservableObject
    {
        private FamilyModel m_Family;        
        private ObservableCollection<FamilyModel> m_FamilyCollection;
        private ICommand m_AddDetailsCommand;


        public FamilyViewModel()
        {           
            m_Family = new FamilyModel();
            m_FamilyCollection = new ObservableCollection<FamilyModel>();            
        }

        public FamilyModel Family
        {
            get { return m_Family; }
            set 
            {
                if (m_Family != value)
                {
                    m_Family = value;
                    OnPropertyChanged("Family");
                }
            }
        }
        public ObservableCollection<FamilyModel> FamilyCollection
        {
            get { return m_FamilyCollection; }
            set { m_FamilyCollection = value; }
        }       

        public ICommand AddDetailsCommand
        {
            get
            {
                if (m_AddDetailsCommand == null)
                    m_AddDetailsCommand = new RelayCommand(param => AddFamilyDetails(), null);

                return m_AddDetailsCommand;
            }
        }

        public void AddFamilyDetails()
        {
            FamilyCollection.Add(Family);
            Family = new FamilyModel();
        }
    }
}

Other Helper Classes:

RelayCommand.cs

namespace MVVM_15thSep13.HelperClasses
{
    public class RelayCommand:ICommand
    {
        private readonly Action<object> m_Execute;
        private readonly Predicate<object> m_CanExecute;

        public RelayCommand(Action<object> exec) : this(exec, null) { }
        public RelayCommand(Action<object> exec, Predicate<object> canExec)
        {
            if (exec == null)
                throw new ArgumentNullException("exec");

            m_Execute = exec;
            m_CanExecute = canExec;
        }

        #region ICommand Members

        public bool CanExecute(object parameter)
        {
            if (parameter == null)
                return true;
            else
                return m_CanExecute(parameter);
        }

        public event EventHandler CanExecuteChanged
        {
            add
            {
                if (m_CanExecute != null)
                    CommandManager.RequerySuggested += value;
            }
            remove
            {
                if (m_CanExecute != null)
                    CommandManager.RequerySuggested -= value;
            }
        }

        public void Execute(object parameter)
        {
            m_Execute(parameter);
        }

        #endregion
    }
}

ObservableObject.cs

namespace MVVM_15thSep13.HelperClasses
{
    public abstract class ObservableObject:INotifyPropertyChanged
    {
        #region INotifyPropertyChanged Members
        public event PropertyChangedEventHandler PropertyChanged;
        protected virtual void OnPropertyChanged(string property)
        {
            if (PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs(property));
        }
        #endregion
    }
}

Answer 1

You speak about view model wrapper properties, but you're not wrapping anything. Your view model is just doubling up the properties from the model. You have two choices; either implement the INotifyPropertyChanged interface directly on your model classes and use instances of them in your view model (like you are now), or actually 'wrap' your model's properties in the view model:

private FamilyModel data;

public string Name
{
    get { return data.Name; }
    set { data.Name = value; OnPropertyChanged("Name"); }
}

public string Location
{
    get { return data.Location; }
    set { data.Location = value; OnPropertyChanged("Location"); }
}

UPDATE >>>

Sorry, I assumed that you could work the rest out by yourself. The instance of FamilyModel here is a private field. This is never data bound in the UI. Instead, you bind the 'wrapped' properties:

<TextBox Text="{Binding Name}" />
<TextBox Text="{Binding Location}" />

You would set the private data field in a constructor, or upon a particular Button.Click , etc.:

data = GetDataFromDatabaseOrWherever();

However, as you have implemented the INotifyPropertyChanged interface directly on your model classes, you don't need to do this... I just suggested this because you mentioned 'wrapper properties' in your question title.

Instead, you can just use your Family and FamilyCollection properties and get rid of the MemberName and MemberLocation properties unless they're for something specific. Using the Family property, you can bind to the UI like this:

<TextBox Text="{Binding Family.Name}" />
<TextBox Text="{Binding Family.Location}" />

My main point about your view model was that you either use wrapped properties, or you use your data types directly, but you seem to have both (unless MemberName and MemberLocation have nothing to do with your model.

If you are still having problems, then make sure that you've set the DataContext property of your view to an instance of your view model correctly.

UPDATE 2 >>>

Ok, I loaded up your code and found your problem.

For future reference, you can fix your own problems like this quite easily if you just look at the errors that you get in the Output Window in Visual Studio...it really is a WPF developer's best friend. There were two errors there:

BindingExpression path error: 'MemberLocation' property not found on 'object' ''FamilyModel' BindingExpression path error: 'MemberName' property not found on 'object' ''FamilyModel'

Searching your XAML for MemberLocation and MemberName , I could see your problem. You're trying to bind to these properties from the items in your FamilyCollection property... but this is an ObservableCollection of type FamilyModel and the FamilyModel class doesn't have any MemberLocation or MemberName properties in it. There's your error. To fix it, simply change your GridView to this:

<GridView>
    <GridViewColumn Header="Name" DisplayMemberBinding="{Binding Name}" Width="120"/>
    <GridViewColumn Header="Location" DisplayMemberBinding="{Binding Location}" Width="120"/>
</GridView>

Personally, I think that you should just get rid of your MemberLocation and MemberName properties... they are just confusing matters. Instead, you should just use your Family property like this:

<TextBox Text="{Binding Family.Name, FallbackValue=BindingFailed}" ... />
<TextBox Text="{Binding Family.Location, FallbackValue=BindingFailed}" ... />

Then you could simplify your add method like this:

public void AddFamilyDetails()
{
    FamilyCollection.Add(Family);
    Family = new FamilyModel();
}

That would also enable you to do this:

<ListView ItemsSource="{Binding FamilyCollection}" SelectedItem="{Binding Family}" ... />

... which, if you haven't worked it out, will show the Name and Location values of the selected item in the ListView in the TextBox es. But of course, it's up to you.