New Fashion Windows 8 Development (20): flipview Control

The flipview control is very similar to the commonly used listview and ListBox controls. Today, we use it to blow it because it is quite fresh.

 

To introduce this control in text, it is really not vivid and lively. However, we still have a lot to know about this control. If you often go to the App Store to download the application, you must have seen it. This is the case:

 

There is a button on the left and right for navigation view. Only one view can be viewed at a time, which is suitable for Image Browsing.

 

To put it bluntly, Let's do two instances. The first is to manually add items, and the second is to bind data.

 

Okay. First, let's put three items in flipview. The content of each item is an image. You can see the following XAML.

<Grid background = "{staticresource applicationpagebackgroundthemebrush}"> <flipview margin = "300,150"> <flipviewitem> <image stretch = "Uniform" Source = "http://pica.nipic.com/2008-01-17/2008117205617816_2.jpg"/> </flipviewitem> <flipviewitem> <image stretch = "Uniform" Source = "http://pic4.nipic.com/20090914/1593169_000535237178_2.jpg"/> </flipviewitem> <image stretch = "Uniform" Source = "http://www.zwtuu.com.cn/upload/2008_10/08102721166304.jpg"/> </ flipviewitem> </flipview> </GRID>
 

Then, let's run it.

 

Okay. Now let's take a look at the second example: data binding.

since data binding is required, it is necessary to bind the data source. Therefore, we first forge some data. Note that this data is forged. If there are similarities, it is purely natural.

Public class student {public string name {Get; set;} public int age {Get; set;} Public String sex {Get; set;} Public String email {Get; set ;} public String remark {Get; Set ;}} public class testdatasource: system. collections. objectmodel. observablecollection <student> {public testdatasource () {This. add (New Student {name = "Xiao Zhao", age = 20, sex = "male", email = "rubbish@163.com", remark =" This person has a low character and often peat in public places. "}); This. Add (New Student {name =" John ", age = 18, email =" kaozhu@163.com ", sex =" female ", remark =" bold and careful. "}); This. add (New Student {name = "Liu", age = 21, email = "ak800@foxmail.com", sex = "male", remark = "this guy is a cool man. "});}}

then, bind the UI in XAML.

<Page X: class = "flipviewexample2.mainpage" xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml" xmlns: Local = "using: flipviewexample2" xmlns: D = "http://schemas.microsoft.com/expression/blend/2008" xmlns: MC = "http://schemas.openxmlformats.org/markup-compatibility/2006" MC: ignorable = "D"> <page. resources> <style X: key = "T1" targettype = "textblock"> <setter property = "fontsize" value = "20"/> <setter property = "fontweight" value = "bold"/> <setter property = "verticalalignment" value = "TOP"/> <setter property = "margin" value = "3, 2, 6, 2 "/> </style> <style X: key = "T2" targettype = "textblock"> <setter property = "fontsize" value = "19"/> <setter property = "margin" value = "3.2, 2, 3, 2 "/> <setter property =" textwrapping "value =" Wrap "/> </style> <style X: key = "jlipviewitemstyle" targettype = "flipviewitem"> <setter property = "horizontalcontentalignment" value = "center"/> <setter property = "verticalcontentalignment" value = "center"/> </style> </page. resources> <grid background = "{staticresource applicationpagebackgroundthemebrush}"> <flipview X: name = "FV" width = "500" Height = "150" verticalalignment = "center" horizontalalignment = "center" itemcontainerstyle = "{staticresource jlipviewitemstyle}"> <flipview. itemtemplate> <datatemplate> <grid. columndefinitions> <columndefinition width = "Auto"/> <columndefinition width = "*"/> </grid. columndefinitions> <grid. rowdefinitions> <rowdefinition Height = "Auto"/> <rowdefinition Height = "Auto"/> <rowdefinition height = "Auto"/> </grid. rowdefinitions> <textblock style = "{staticresource T1}" grid. column = "0" grid. row = "0" text = "name:"/> <textblock style = "{staticresource T2}" grid. column = "1" grid. row = "0" text = "{binding name}"/> <textblock style = "{staticresource T1}" grid. column = "0" grid. row = "1" text = "Age:"/> <textblock style = "{staticresource T2}" grid. column = "1" grid. row = "1" text = "{binding age}"/> <textblock style = "{staticresource T1}" grid. column = "0" grid. row = "2" text = "Gender:"/> <textblock style = "{staticresource T2}" grid. column = "1" grid. row = "2" text = "{binding sex}"/> <textblock style = "{staticresource T1}" grid. column = "0" grid. row = "3" text = "Email:"/> <textblock style = "{staticresource T2}" grid. column = "1" grid. row = "3" text = "{binding email}"/> <textblock style = "{staticresource T1}" grid. column = "0" grid. row = "4" text = "Remarks:"/> <textblock style = "{staticresource T2}" grid. column = "1" grid. row = "4" text = "{binding remark}"/> </GRID> </datatemplate> </flipview. itemtemplate> </flipview> </GRID> </Page>

SwitchCodeView. Add the following code to the mainpage constructor to set the flipview data source.

 
Public mainpage () {This. initializecomponent (); testdatasource source = new testdatasource (); this. FV. itemssource = source ;}
 

If everything is normal, after running, you should be able to see the following results.