UWP Development: An example of the use of the MVVM pattern with data binding

-my "Jianying UWP" has been developed for some time now, with all the sections and basic functions already completed, and the rest is the details of the processing and UI layout design. Many problems have been encountered during development, as individuals develop independently. So a lot of questions need to think for a long time, or go online to find the great God for help, sometimes dreaming at night is full of code. Well, most of them are finally solved! I really appreciate the great gods who helped me, and I learned a lot ...

Well, gossip doesn't say much, the other day, I was dealing with a collection of data binding problems, that is, returning a collection of data, in the MVVM mode, let the ViewModel layer implement the ObservableCollection interface, And in the ViewModel will get the list data collection to take the collection and add into the ObservableCollection collection, so that in the background of the view layer, just instantiate viewmodel, and bound to the interface, This enables collection binding and change notification.

Today, the binding of the non-collection data object is handled in the MVVM pattern, which is, of course, for the ViewModel to implement the INotifyPropertyChanged interface.
1. The model class is as follows:

Public  class Tccontent    {public        string Image {get; set;}        public string Title {get; set;}        public string Directors {get; set;}        public string casts {get; set;}        public string Pubdate {get; set;}        public string Trailerurl {get; set;}        public string Itemsummary {get; set;}    }

2, in the ViewModel, how to write it?

Because of the INotifyPropertyChanged interface, it notifies the object that it is a property. So, how can I notify each of the attributes in Modle? You can't always write down all the properties of the model class again. Of course not, it is very simple, is the model as a property of the ViewModel.
In order to code concise, reuse convenience, define a ViewModelBase class, let it implement INotifyPropertyChanged interface, complete the relevant notification. Finally, let ViewModel inherit it.
This Basemodel class is as follows: note, I have written here to implement the two methods of property change notification, the early general use of the second, it is easy to understand, in the ViewModel property of the Set method, call the method, the parentheses are passed in the property name. This method is easy to understand, but the shortcomings are also obvious, that is, the property name is easy to write wrong.
And the first method is recommended, the use of Callermebername this feature, specific to the MSDN document, that is, the system through reflection can automatically get the property name, so that we in the ViewModel class of the properties of the set method does not have to write the property name, Very convenient. I'll use the method here for an example.

Viewmodlebase class:

public class viewmodelbase:inotifypropertychanged    {public        event PropertyChangedEventHandler propertychanged;        Method One: The Callermembername attribute can be obtained to member public         void Mypropertychanged ([callermembername]string propertyname = "")        {            PropertyChangedEventHandler handler = propertychanged;            if (handler! = null)            {                handler. Invoke (This, new PropertyChangedEventArgs (PropertyName));            }        }        Method 2:        //public void OnPropertyChanged (String propertyname)        //{        //    PropertyChangedEventHandler handler = this. propertychanged;    if (handler! = NULL)        //    {        //        handler. Invoke (This, new PropertyChangedEventArgs (PropertyName));        //    }        //}    }

3. Down is
The ViewModel class is as follows: This takes the model class as a property and inherits from the ViewModel base class just implemented. This way, you only need to implement the Mypropertychanged method in ViewModel. And because the first method used in ViewModelBase, you can get the property name directly, so just write the method!

public class Tccontentviewmodel:viewmodelbase    {         private tccontent _tccontent;        Public tccontent tccontent        {            get {return _tccontent;}            Set            {                _tccontent = value;                Mypropertychanged ();}}}    

4, down, is the view layer, in the view layer interface needs to display the properties of the Modle.

In view background: Declare the ViewModel object TVM externally and instantiate it in the constructor.

        Private Tccontentviewmodel TVM;        Public Tccontentview ()        {this            . InitializeComponent ();            TVM = new Tccontentviewmodel ();            }        protected override async void Onnavigatedto (NavigationEventArgs e)        {            base. Onnavigatedto (e);            if (e.parameter! = null)            {                TVM. Tccontent = await NetService.TCNetservice.GetTCContent ((E.parameter as TC). Tid);            }        }

5, the last step:
In the view foreground interface: The interception section is as follows:

Each element to be displayed is bound to the property of the Tccontent property on the ViewModel instantiated object TVM, because tccontent this property is the model of the element that we want to display, and what we need is a property within the model, so continue to the point property. When binding, you can always point down, as long as the attributes of the property has properties, you can do so.

In this way, a complete MVVM framework and data binding are complete. Well, it's so much to write today, it's 1:30 A.M.. Finally, you are welcome to enjoy the UWP development of classmate Dabigatran Learning Exchange: 193148992. Finally, bask in the effect of this binding page.

--it Chase Dream Garden

UWP Development: An example of the use of the MVVM pattern with data binding