Binding data for communication in mvvm mode in Windows Phone 7

Three communication modes of view and viewmodel in mvvm mode: Binding data (data transmission), command (call to implement operations), and attached behavior (operations during control loading ). (1) Binding data for communication in mvvm mode of Windows Phone 7. (2) command for communication in mvvm mode of Windows Phone 7. (3) attached behavior for communication in mvvm mode of Windows Phone 7. The following uses an instance to implement binding data communication in mvvm mode. 1. Creates the model layer food. CS.

 
Namespace bindingdatademo. model {public class food {public string name {Get; set;} Public String description {Get; set;} Public String iconuri {Get; set;} public string type {Get; set ;}}}
 

2. Create a viewmodel Layer foodviewmodel. CS

Using system; using system. componentmodel; using bindingdatademo. model; using system. collections. objectmodel; namespace bindingdatademo. viewmodel {public class foodviewmodel: inotifypropertychanged {private observablecollection <food> _ allfood; Public observablecollection <food> allfood {get {If (_ allfood = NULL) _ allfood = new observablecollection <food> (); Return _ allfood;} set {If (_ allfood! = Value) {_ allfood = value; policypropertychanged ("allfood") ;}} public foodviewmodel () {try {food item0 = new food () {name = "tomato ", iconuri = "images/tomato.png", type = "healthy", description = "tomato tastes good. "}; Food Item1 = new food () {name =" Eggplant ", iconuri =" images/beer.png ", type =" notdetermined ", description =" I don't know if this is delicious. "}; Food item2 = new food () {name =" ham ", iconuri =" images/fries.png ", type =" unhealthy ", description =" this is unhealthy food. "}; Food item3 = new food () {name =" sandwich ", iconuri =" images/hamburger.png ", type =" unhealthy ", description =" delicious KFC? "}; Food item4 = new food () {name =" ice cream ", iconuri =" images/icecream.png ", type =" healthy ", description =" for children. "}; Food item5 = new food () {name =" pizza ", iconuri =" images/pizza.png ", type =" unhealthy ", description =" this is very good. "}; Food item6 = new food () {name =" chili ", iconuri =" images/pepper.png ", type =" healthy ", description = "I don't like this. "}; Allfood. add (item0); allfood. add (Item1); allfood. add (item2); allfood. add (item3); allfood. add (item4); allfood. add (item5); allfood. add (item6);} catch (exception e) {system. windows. messageBox. show ("exception:" + E. message) ;}}// defines the propertychanged event public event propertychangedeventhandler propertychanged; Public void policypropertychanged (string propertyname) {If (propertychanged! = NULL) {propertychanged (this, new propertychangedeventargs (propertyname ));}}}}

3. Create a view layer Mainpage. XAML

<Phone: phoneapplicationpage X: class = "bindingdatademo. mainpage "xmlns =" http://schemas.microsoft.com/winfx/2006/xaml/presentation "xmlns: x =" http://schemas.microsoft.com/winfx/2006/xaml "xmlns: Phone =" CLR-namespace: Microsoft. phone. controls; Assembly = Microsoft. phone "xmlns: shell =" CLR-namespace: Microsoft. phone. shell; Assembly = Microsoft. phone "xmlns: D =" http://schemas.microsoft.com/expression/blend/2008 "XML NS: MC = "http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns: My = "CLR-namespace: bindingdatademo. viewmodel "MC: ignorable =" D "D: designwidth =" 480 "D: designheight = "768" fontfamily = "{staticresource quota}" fontsize = "{staticresource quota}" foreground = "{staticresource quota}" supportedorientations = "portrait" orientation = "portrait" Shell: systemtray. Isvisible = "true"> <! -- Add the foodviewmodel class of the viewmodel layer as a resource --> <Phone: phoneapplicationpage. resources> <my: foodviewmodel X: Key = "food"/> </Phone: phoneapplicationpage. resources> <grid X: Name = "layoutroot" background = "Transparent"> <grid. rowdefinitions> <rowdefinition Height = "Auto"/> <rowdefinition Height = "*"/> </grid. rowdefinitions> <stackpanel X: Name = "titlepanel" grid. row = "0" margin = ","> <textblock X: Name = "Application Title "text =" my application "style =" {staticresource phonetextnormalstyle} "/> <textblock X: Name =" pagetitle "text =" Data Binding "margin =" 9, -7,0, 0 "style =" {staticresource phonetexttitle1style} "/> </stackpanel> <! -- Assign the foodviewmodel class resource defined above to the datacontent attribute in the grid control, indicating that the foodviewmodel class is used as the context data in the grid control --> <grid X: Name = "contentpanel" grid. row = "1" margin = "12, 0, 12, 0" datacontext = "{staticresource food}"> <! -- Bind the allfood attribute of the foodviewmodel class to The ListBox control. allfood is an observablecollection <food> type --> <ListBox X: name = "ListBox" horizontalcontentalignment = "stretch" itemssource = "{binding allfood}"> <ListBox. itemtemplate> <datatemplate> <stackpanel orientation = "horizontal" background = "gray" width = "450" margin = "10"> <! -- Bind the iconuri attribute of the food class --> <Image Source = "{binding iconuri}" stretch = "NONE"/> <! -- Bind the name attribute of the food class --> <textblock text = "{binding name}" fontsize = "40" width = "150"/> <! -- Bind the description attribute of the food class --> <textblock text = "{binding description}" fontsize = "20" width = "280"/> </stackpanel> </datatemplate> </ListBox. itemtemplate> </ListBox> </GRID> </Phone: phoneapplicationpage>

OK !!!!!!!!!!!!!!!!!!!!!!! Note: There are many ways to bind data, and the Principles are similar.