Use flipview in Xmal

Flipview is similar to the previous jquery image switch. It also contains descriptions.

For example:

Or this.

 

 

It is found that Microsoft only provides HTML & JS flipview. Then I searched for the usage of the XAML.

 

   <  Flipview  X: Name  = "Heroflipview"  Itemssource  ="  {Binding heroes}  "  >                  <  Flipview. itemtemplate >                      <  Datatemplate  >                          <  Grid  >                               <  Grid. rowdefinitions  >                                   <! --  The row attributes. Otherwise, the row spacing is too messy, and the name and description will be together.  -->                                  <  Rowdefinition  Height = "Auto"   />                                  <  Rowdefinition  Height  = "*"   />                              </  Grid. rowdefinitions  >                               <  Grid. columndefinitions  >                                  <! --  2 rows, separated from left and right  -->                                  < Columndefinition  Width  = "2 *"   />                                  <  Columndefinition  Width  = "*"   />                              </  Grid. columndefinitions  >                              <  Image  Source  ="  {Binding image} "  Grid. Column  = "0"  Grid. Row  = "0"  Grid. rowspan  = "2"  Stretch  = "Uniformtofill"   />                              <  Textblock  Text  =" {Binding name}  "  Grid. Column  = "1"  Grid. Row  = "0"  Fontsize  = "36"  Margin  = "12 0"   />                              <  Textblock  Text ="  {Binding description}  "  Grid. Column  = "1"  Grid. Row  = "1"  Margin  = "12 12 12 0"  Textwrapping  = "Wrap"  Fontsize  = "18"  />                          </  Grid  >                      </  Datatemplate  >                  </  Flipview. itemtemplate  >              </  Flipview  > 

 

The itemsource of flipview is bound to heroes.

Heroes:

       Public Observablecollection <belgiansuperhero>Heroes {  Get  {  //  Observablecollection indicates a dynamic data set. When you add, remove, or refresh the entire list, this set provides notifications.                  Return   New Observablecollection <belgiansuperhero> (){  New Belgiansuperhero () {name = "  Kapitein zeppos  " , ImagePath = " Assets/zeppos.jpg  " , Description = "  Vlaamse Jeugd TV Serie: op een mooie Dag komt er een vreemde ruiter het rustige dorpje Belder bvan 1965 tot 1969.  "  },  New Belgiansuperhero () {name = "  Keromar  " , ImagePath = "  Assets/keromar.jpg  " , Description ="  Vlaamse Jeugd TV Serie over de kerten, een vredelievend Volk dat iorlogszuchtige Bolten, onder.  "  },  New Belgiansuperhero () {name = "  De Kat  " , ImagePath = "  Assets/dekat.jpg  " , Description = "  Vlaamse jeugdserie over David de kat een milieuactivist dieor de VRT. "  },  New Belgiansuperhero () {name = "  Merlina  " , ImagePath = "  Assets/merlina.jpg  " , Description = "  Vlaamse Jeugd fantasie TV Serie over de avonturen van detectivebureau Merlina N 80.  "  },  New Belgiansuperhero () {name = "  Mega Mindy  " , ImagePath = "  Assets/megamindy.jpg  " , Description = "  Vlaamse Jeugd TV seie over een Superwoman! Mega Mindy is in het echt Mieke, die dankzij een capsule in het geheime Laboratorium van Haar op.  "  },  New Belgiansuperhero () {name = " Rox  " , ImagePath = "  Assets/rox.png  " , Description = "  Vlaamse sonel en hij eindigt Elke briefing met de dwingende woorden: falen is geen optie. 2012  "  }};}} 

 

The effect is as follows:

 

Switch between left and right. There is a description.

Suitable for image viewing

 

 

 

Search reference: http://blogs.u2u.be/diederik/post/2012/08/24/A-CXAML-FlipView-Context-Indicator-for-Windows-8.aspx