Flipview controls in Windows Phone 8.1

Slide View Control Flipview----can be used to start the navigation of the display, but also in the page display, the role of a lot

This method is much more orthodox than the previous blog about the WP8.1 page shift, but this control can be set not only to the left and right

View toggle, you can also swipe vertically to toggle OH

However, the previous blog summarized some of the implementation of the page left and right translation switching method, about which we can look at.

Blog address: WP8.1 page left and right to pan

First Flipview has some important knowledge:

A.selectedindex Property-----Determines the element Flipview initially displayed

selectedindex= "0"-----means that the first Data element in Flipview is initially displayed, and the default is 0

B.flipview sliding direction How to control it, how can the left and right can be up and down? As follows:

<FlipView>

<FlipView.ItemsPanel>

<ItemsPanelTemplate>

<stackpanel orientation= "Vertical"/> can be seen here on the set to slide up and down, left and right for the horitonal

</ItemsPanelTemplate>

</FlipView.ItemsPanel>

</FlipView>

Second, there are two sources of data in Flipview:

A. Write directly, as follows:

<flipview selectedindex= "0" horizontalalignment= "Center" width= "height=" >    <flipview.items >        <FlipViewItem>            <image source= "Assets/boy1.jpeg" width= "height=" "stretch=" UniformToFill "/>        </FlipViewItem>        <FlipViewItem>            <border background=" Green ">                <Border.Child>                    <textblock text= "Tokyo Ghoul" horizontalalignment= "Center" fontsize= "width=" 400 " height= "/>                </Border.Child>            </Border>        </FlipViewItem>    </ Flipview.items></flipview>

B. Through background binding, the source code posted below is reflected in the

Okay, finally we can put the code.

Foreground XAML:

<page x:class= "Testunion.flipviewdemo" xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns : x= "Http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local= "using:testunion" xmlns:d= "/HTTP/ schemas.microsoft.com/expression/blend/2008 "xmlns:mc=" http://schemas.openxmlformats.org/markup-compatibility/ 2006 "mc:ignorable=" D "background=" {ThemeResource Applicationpagebackgroundthemebrush} "> <Grid> & Lt                        stackpanel> <!--flipview slide View Control-<!--SelectedIndex property determines the initial display element-- <!--specify FlipView for each item directly through Flipviewitem-<flipview selectedindex= "0" horizontalalignment= "Center" Widt                        H= "height=" > <FlipView.Items> <FlipViewItem> <image source= "Assets/boy1.jpeg" width= "" "height=" stretch= UniformToFill "/>" </fli Pviewitem> <flipviewitem&Gt <border background= "Green" > <Border.Child> &LT;TEXTB Lock text= "Tokyo Ghoul" horizontalalignment= "Center" fontsize= "width=" [height=]/> &lt ;/border.child> </Border> </FlipViewItem> </fli                        Pview.items> <FlipView.ItemsPanel> <ItemsPanelTemplate> <stackpanel orientation= "Horizontal"/> </ItemsPanelTemplate> </flip View.itemspanel> </FlipView> <!--via background binding--<flipview x:name = "FlipView" width= "height=" > <FlipView.ItemContainerStyle> <style T      Argettype= "Flipviewitem" > <setter property= "HorizontalAlignment" value= "Center"/>                  <setter property= "VerticalAlignment" value= "Center"/> </Style>                    </FlipView.ItemContainerStyle> <!--paging up and down <FlipView.ItemsPanel> <!--specify how Flipview content Slides--<ItemsPanelTemplate> <stac Kpanel orientation= "Vertical"/> </ItemsPanelTemplate> </flipview.itemspanel&                Gt <FlipView.ItemTemplate> <DataTemplate> <stackpanel background= "Gr                            Een "orientation=" Vertical "> <textblock text=" {Binding name} "fontsize=" "/>"                    <textblock text= "{Binding age}" fontsize= "/> </StackPanel> </DataTemplate> </FlipView.ItemTemplate> </FlipView> </ StackPanel> </Grid></Page> 

Backstage. CS:

Using system;using system.collections.generic;using system.io;using system.linq;using System.runtime.interopservices.windowsruntime;using windows.foundation;using Windows.Foundation.Collections; Using windows.ui.xaml;using windows.ui.xaml.controls;using windows.ui.xaml.controls.primitives;using windows.ui.xaml.data;using windows.ui.xaml.input;using windows.ui.xaml.media;using Windows.UI.Xaml.Navigation;//" Blank page "Item template in http://go.microsoft.com/fwlink/?    linkid=390556 on the namespace testunion{////<summary>//////for self or to navigate to a blank page inside the Frame.            </summary> public sealed partial class Flipviewdemo:page {public Flipviewdemo () { This.            InitializeComponent ();        Flipview.itemssource = list;        }///<summary>///This page will be called when it is displayed in Frame.        </summary>//<param name= "E" > Describes how to access event data for this page. This parameter is typically used for configuration pages. </param> protected override void Onnavigatedto (NavigationEventArgs e) {       public class Student {public string name {get; set;}            public int Age {get; set;}                Public Student (String Name,int age) {name = name;            Age = age;            }} list<student> List = new List<student> {new Student ("Kanagi", 20),    New Student ("incense", 21)}; }}

Run:

Initial interface:

The upper part of the Flipview Zolishi and left slide after the end:

Below the Flipview right slide and right after:

In addition, we can also achieve automatic sliding between the flipview elements, just add a timer

The code is as simple as it is easy to understand:

Foreground XAML:

<page x:class= "Testunion.flipviewdemo2" xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmln s:x= "Http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local= "using:testunion" xmlns:d= "http// schemas.microsoft.com/expression/blend/2008 "xmlns:mc=" http://schemas.openxmlformats.org/markup-compatibility/ 2006 "mc:ignorable=" D "background=" {ThemeResource Applicationpagebackgroundthemebrush} "> <Grid> & Lt                    FlipView x:name= "FlipView" selectedindex= "0" > <FlipView.Items> <FlipViewItem>                <image source= "Assets/boy1.jpeg" stretch= "UniformToFill"/> </FlipViewItem>                <FlipViewItem> <image source= "assets/boy2.png" stretch= "UniformToFill"/> </FlipViewItem> <FlipViewItem> <image source= "Assets/boy3.jpg" St Retch= "UniformToFill"/> &LT;/FLipviewitem> </FlipView.Items> </FlipView> </Grid></Page> 

Backstage. CS:

Using system;using system.collections.generic;using system.io;using system.linq;using System.runtime.interopservices.windowsruntime;using windows.foundation;using Windows.Foundation.Collections; Using windows.ui.xaml;using windows.ui.xaml.controls;using windows.ui.xaml.controls.primitives;using windows.ui.xaml.data;using windows.ui.xaml.input;using windows.ui.xaml.media;using Windows.UI.Xaml.Navigation;//" Blank page "Item template in http://go.microsoft.com/fwlink/?    linkid=390556 on the namespace testunion{////<summary>//////for self or to navigate to a blank page inside the Frame.            </summary> public sealed partial class Flipviewdemo2:page {public FlipViewDemo2 () { This.            InitializeComponent ();            DispatcherTimer timer = new DispatcherTimer (); Timer.            Interval = new TimeSpan (0, 0, 2); Timer.            Tick + = Timer_tick; Timer.        Start (); } void Timer_tick (object sender, Object e) {if (flipview.selectedindex<flipview.items.count-1) {flipview.selectedindex++;            } else {flipview.selectedindex = 0;        }}///<summary>///This page will be called when it is displayed in Frame.        </summary>//<param name= "E" > Describes how to access event data for this page. This parameter is typically used for configuration pages. </param> protected override void Onnavigatedto (NavigationEventArgs e) {}}}

Run:

Initial interface:

The following status is 1 switch to 2 o'clock, 2 page, 2 switch to 3 o'clock:

The last one is the 3 screen:

Try it a little more, and you can make a variety of animation effects you want. I think it's fun, Natsumi Sato におもしろい.

Flipview controls in Windows Phone 8.1