In the example in the first article, we have a simple understanding of the application of the MVVM mode of the process, my intention is that you have learned a little MVVM concept, and then there is no good example to learn, you can follow me to learn MVVM model, so this part, are not theoretical knowledge, of course, the whole example After learning, we will go back to explore, summed it up.
Now we're going to extend it primarily in the previous example, where we primarily bind a source object to the DataGrid, and then we continue to use the MVVM pattern to reflect the changes in the DataGrid selection line to the interface, in fact, through this requirement change, You will find the advantages of the UI and logical separation, although it may seem a bit out of the way, but I'm sure you will unconsciously use the MVVM pattern in the project's favor.
Requirements: The data in the current selection row is reflected in the textbox by clicking the DataGrid.
Model has not changed, we also use the previous Person.cs and Persons.cs two classes, then for ViewModel, we add a property
private Person _getOnePerson;
public Person GetOnePerson
{
get { return _getOnePerson; }
set { _getOnePerson = value;
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs("GetOnePerson"));
}
}
}
Because the properties here are going to change, so we have inotifypropertychanged excuses for the Pageviewmodel class
UI layer: Here we bind the Getoneperson property to the SelectedItem property of the DataGrid
<data:DataGrid AutoGenerateColumns="True" ItemsSource="{Binding Human}"
SelectedItem="{Binding GetOnePerson,Mode=TwoWay}"
Height="200" Name="dataGrid1" VerticalAlignment="Top" />
<TextBox Text="{Binding GetOnePerson.age,Mode=OneWay}"
Name="textBox1" VerticalAlignment="Top" Width="120" />
<TextBox Text="{Binding GetOnePerson.name,Mode=OneWay}"
Name="textBox2" VerticalAlignment="Top" Width="120" />
We added 2 textbox on the UI to reflect the changes on the page, mainly to notice the binding object
After this is done, the rest of the section will not be changed, we have completed this function, we can look at the effect of the page:
Click Changes before and after
Although the function is relatively simple, but just contact with MVVM, it is not an easy thing to achieve, I will be on the basis of this example,
A simpler query is implemented by using the command.