[Win8]-Data Binding & Custom Conversion

Data Binding (events can also be defined in the interface)
1,

(1) simple binding is similar to WP7/WP8 (I will not write it here, it is very similar, please refer)
Code for randomly generating 5-bit data:

dog.Name=Guid.NewGuid().ToString().Substring(0,5);

(2) Select Mode
Remove the check box in lictview: <listview selectionmode = "NONE"...> Single: single multiple: Multiple
(3) ilist <Object> objs = lv1.selecteditems; // The object is the data context of the selected item.
(4) isitemclickedenabled

// First set isitemclickenabled = "true", enable the itemclick event, and then listen to the itemclick event, E. clickeditem is the datacontextperson P = E. clickitem as person; messagedialog mdialog = new messagedialog (P. name); mdialog. showasync (); // Asynchronous Operation displayed in the dialog box

(5) add elements to the Set (bind to listview)
Observablecollection <> generic type is required. In the using system. Collections. objectmodl namespace, except for data binding, it is okay to use list for other sets,

// Private list <string> ls = new list <string> (); observablecollection <string> ls = new observablecollection <string> (); protected override void onnavigatedto (navigationeventargs E) {If (E. navigationmode = navigationmode. new) {ls. add ("kefira"); LS. add ("KK"); LV. itemssource = ls; // when the data is bound to the listview, only the code of this row needs to be written, but some people modify the attribute of listview in XAML to itemsource = {binding }, // then write the background code LV. datacontent = ls; the effect is the same, and the meaning is the same. That's all.} private void button_click_1 (Object sender, routedeventargs e) {ls. add (datetime. now. millisecond. tostring ());}

Running result

2. Custom Conversion

ComboBox -- drop-down list box plipview -- select display and custom conversion from left to right
The general naming rules for the converter: XX--XX converter (for example, UI to model, boolvisibilityconverter)
Example: If the country is the United Nations, the United Nations image is displayed. If not, the United Nations image is not displayed.

<1> define a countryinfo class

 

Using system. componentmodel; namespace _ 1 custom conversion {public class countryinfo: inotifypropertychanged // do not forget to introduce the namespace system. componentmodel {private void firepropertychanged (string propname) {If (propertychanged! = NULL) {propertychanged (this, new propertychangedeventargs (propname);} private string _ name; Public string name {get {return _ name;} set {_ name = value; firepropertychanged ("name") ;}} private string _ ImagePath; Public String ImagePath {get {return _ ImagePath;} set {_ ImagePath = value; firepropertychanged ("ImagePath") ;}} private bool _ isunnum; // determines whether it is a Member of the United Nations public bool isunnum {get {return _ isunnum;} set {_ isunnum = value; firepropertychanged ("isunnum");} public event propertychangedeventhandler propertychanged ;}}

 

<2> Design the mainpage. XAML interface: (put the photo under the image folder first)

<Grid background = "{staticresource applicationpagebackgroundthemebrush}"> <ComboBox X: Name = "combcountry" horizontalalignment = "Left" margin = "54,81, 387 "verticalignment =" TOP "width =" "Height =" 71 "> <ComboBox. itemtemplate> <datatemplate> <stackpanel orientation = "horizontal"> <Image Source = "{binding ImagePath}" Height = "50" width = "50"/> <textblock name =" {binding name} "/> </stackpanel> </datatemplate> </ComboBox. itemtemplate> </ComboBox> <flipview X: Name = "fvcountry" horizontalalignment = "Left" margin = "354,270, 610 "verticalignment =" TOP "width =" 315 "Height =" "> <flipview. itemtemplate> <datatemplate> <grid background = "blue"> <grid. rowdefinitions> <rowdefinition> </grid. rowdefinitions> <Image Source = "{binding ImagePath}" grid. rowspan = "2"> </image> <Image Source = "MS-appx: /// image/4.png" Height = "70" width = "70" visibility = "{binding isunnum}"/> // when defined, isnunum is of the bool type, the data is converted to the enumeration type </GRID> </datatemplate> </flipview. itemtemplate> </flipview> </GRID>

<3> code implementation:

Protected override void onnavigatedto (navigationeventargs e) {If (E. navigationmode = navigationmode. new) {list <countryinfo> listcountry = new list <countryinfo> (); listcountry. add (New countryinfo {name = "China", ImagePath = "MS-appx: // image/1.png", isnunum = true}); listcountry. add (New countryinfo {name = "Japan", ImagePath = "MS-appx: // image/2.png", isnunum = false}); listcountry. add (New countryinfo {name = "", ImagePath = "MS-appx: // image/3.png", isnunum = true}); combcountry. itemssource = listcountry; // itemsource inherits from itemtemplate }}

Now that "Japan" is determined to be a member of the United Nations (because image 4.png of the United Nations is also displayed), we need to customize the conversion (this is the focus ).
<4> first, define the converter class boolvisibilityconverter. The converter must implement the ivalueconverter interface.

Using Windows. UI. XAML; using Windows. UI. XAML. data; namespace _ 1 custom conversion. common {public class boolvisibilityconverter: ivalueconverter // The namespace of ivalueconverter is windows. UI. XAML. data; {object ivalueconverter. convert (object value, type targettype, object parameter, string language) {// The value here is the data in the model, and the returned value is the data bool B = (bool) value in the transformed UI; return B? Visibility. visible: visibility. collapsed;} // If data binding is in the form of twoway, you also need to implement this convertback object ivalueconverter. convertback (object value, type targettype, object parameter, string language) {visibility v = (visibility) value; // The visibility namespace is windows. UI. XAML; return v = visibility. visible ;}}}

####### Explanation:
The convert method is used to convert the attribute type of The Bound Model to the Data Type of the bound UI element. The value is the data before conversion, and the converted data is returned in the form of a return value.
The convertback method is used to convert the value of the model when the UI value changes when twoway is bound.

 

<5> then go to mainpage. XAML to design
First, add the namespace: xmlns: Common = "using: _ 1 custom conversion. Common" // common is a random name.
Then define the resource:

<Page.Resources>      <common:BoolVisibilityConverter x:Key="boolVisConverter"></common:BoolVisibilityConverter></Page.Resources>

Finally, add converter = {staticresource boolvisconverter}
OK. The custom conversion is complete. Run the program. For example: (when the negative film is converted to "China" or "America", United Nations photos are displayed; but when the negative film is "Japan", United Nations images are not displayed)

--- Postscript: this is a simple exercise of Data Binding and custom conversion. It still comes from the study of Chuanzhi podcast video and shares it with friends who are also interested in Win8! @_@

The next article will write about animation and asynchronous programming.