TextBox with ListView Two Binding using Mvvm

Question

   <Stackpanel>
       <TextBox x:Name="txtid" Width="90" Text={Binding Name} Height="25"/>
       <TextBox x:Name="txtname" Width="90" Text={Binding Age} Height="25" Margin="0 10 0 10"/> 
       <Button Command={Binding AddCommand} Content="Add"/>
       <ListView ItemsSource={Binding StudentList}/>
    </Stackpanel> 

ViewModel

public class StudentViewModel : INotifyPropertyChanged
{

public StudentViewModel()
{
    _studentList = new ObservableCollection<StudentDetails>();
    LoadCommand();
}


private ObservableCollection<StudentDetails> _studentList;
public ObservableCollection<StudentDetails> StudentList
{
    get { return _studentList; }
    set
    {
        _studentList = value;
         OnPropertyChanged("StudentList");
    }
}

public StudentDetails SelectedItems { get; set; }

private string _name;
private int _age;
public string Name 
{ 
     get { return _name;}
     set { _name = value; OnPropertyChanged("Name")}
}
public string Age
{ 
     get { return _age;}
     set { _age = value; OnPropertyChanged("Age")}
}

public ICommand AddCommand { get; set; }


public void LoadCommand()
{
    AddCommand = new CustomCommand(Add, CanAdd);
}

private bool CanAdd(object obj)
{
    return true;
}

private void Add(object obj)
{
    StudentList.Add(new StudentDetails { Name = Name, Age = Age });

}}

Model

   public class StudentDetails : INotifyPropertyChanged
   {
      private string _name;
      private int _age;
      public string Name 
     { 
         get { return _name;}
         set { _name = value; OnPropertyChanged("Name")}
      }
     public string Age
     { 
         get { return _age;}
         set { _age = value; OnPropertyChanged("Age")}
     }}

I have two textbox and a listview like above. how to do two way binding using MVVM?? which means the entered textbox value should add to listview and if i select the values in the listview then the selected value should bind to the same textbox so that i can update the values. how to do it??

Answer 1

I would have different view models for an individual student and for the student list. Name and Age properties don't actually belong to the list.

I used MVVM Light syntax for the example:

StudentViewModel

public class StudentViewModel : ViewModelBase
{
    private string _name;
    private int _age;
    public string Name
    {
        get { return _name; }
        set { Set<string>(ref _name, value); }
    }
    public int Age
    {
        get { return _age; }
        set { Set<int>(ref _age, value); }
    }
}

StudentView.xaml

<UserControl x:Class="MasterDetailExample.Views.StudentView"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:local="clr-namespace:MasterDetailExample.Views"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         xmlns:vm="clr-namespace:MasterDetailExample.ViewModel"
         d:DesignHeight="300"
         d:DesignWidth="300"
         mc:Ignorable="d">

<WrapPanel HorizontalAlignment="Center" VerticalAlignment="Top">
    <TextBlock Text="Name: "/>
    <TextBox Text="{Binding Name}" Width="150"/>
    <TextBlock Text="Age: "/>
    <TextBox Text="{Binding Age}" Width="20"/>
</WrapPanel>
</UserControl>

Now StudentsViewModel represents the student list:

public class StudentsViewModel : ViewModelBase
{
    private ObservableCollection<StudentViewModel> _studentList;
    private StudentViewModel _selectedStudent;

    public StudentsViewModel()
    {
        StudentList = new ObservableCollection<StudentViewModel>();

        StudentList.Add(new StudentViewModel { Name = "Joe", Age = 21 });
        StudentList.Add(new StudentViewModel { Name = "Jane", Age = 19 });
    }

    public ObservableCollection<StudentViewModel> StudentList
    {
        get { return _studentList; }
        private set { _studentList = value; }
    }

    public StudentViewModel SelectedStudent
    {
        get { return _selectedStudent; } 
        set { Set<StudentViewModel>(ref _selectedStudent, value); }
    }
}

** List view, StudentsView**

<UserControl x:Class="MasterDetailExample.Views.StudentsView"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         xmlns:views="clr-namespace:MasterDetailExample.Views"
         xmlns:vm="clr-namespace:MasterDetailExample.ViewModel"
         d:DesignHeight="300"
         d:DesignWidth="500"
         mc:Ignorable="d">
<UserControl.Resources>
    <vm:StudentsViewModel x:Key="StudentsVm" />
</UserControl.Resources>

<DockPanel DataContext="{StaticResource StudentsVm}">
    <ListView DockPanel.Dock="Left" Width="100" ItemsSource="{Binding StudentList}" SelectedItem="{Binding SelectedStudent}">
        <ListView.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding Name}" />
                </StackPanel>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
    <Separator />
    <views:StudentView DockPanel.Dock="Right" DataContext="{Binding SelectedStudent}"/>
</DockPanel>
</UserControl>

Directly setting the DataContext kind of smells,

        <views:StudentView DockPanel.Dock="Right" DataContext="{Binding SelectedStudent}"/>

In more complicated example, you would either create a DependencyProperty for the SelectedStudent, or implement some messaging logic to communicate between different view models.

Answer 2

I have tried to run your code. It has lots of errors. Anyways from your question I think you want to have a listview and when user selects a particular list item, the corresponding age and name is displayed in text boxes and if user want to update the data, you want to add it to the list. First create a list view with data template that binds to the class file properties.

Now also create a StudentDetails object and bind the SelectedItem of the list view to it. When user selects a list item, you get SelectionChanged event. During this time update the property of 2 text boxes to display the selected list items data in them.

Now in the add button event handler, update the list data for corresponding selected item. Make sure you bind the listitemssource to an ObservableCollection