Using MVVM in Silverlight (2)-Improve

Source: Internet
Author: User

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.