Windows Phone 8.1中的FlipView控制項

標籤：windows phone 8.1   flipview   selectedindex   控制flipview滑動的方向   flipview元素之間的自動滑動切換   

滑動視圖控制項FlipView  ----  可以做應用開始的導航展示，也可以用在分頁展示上，作用多多

相對於前面一篇關於WP8.1頁面左右平移切換的部落格，這個方法就來的正統多了，不過這個控制項不光可以設定成左右

視圖切換，還可以垂直滑動切換哦

不過之前的那篇部落格總結了一些實現頁面左右平移切換的方法，關於這個大家倒是可以看一下。

部落格的地址：WP8.1頁面左右平移

首先FlipView有一些重要的認識：

a.SelectedIndex屬性  -----   決定FlipView初始顯示的元素

   SelectedIndex="0"  -----   意味著初始顯示的是FlipView中的第一個資料元素，預設也是0

b.FlipView滑動的方向怎麼控制呢，怎樣才可以左右可以上下呢？如下：

   <FlipView>

   <FlipView.ItemsPanel>

          <ItemsPanelTemplate>

                <StackPanel Orientation="Vertical"/>  可以當看到這邊就設定成上下滑動了,左右為Horitonal

         </ItemsPanelTemplate>

    </FlipView.ItemsPanel>

    </FlipView>

其次FlipView裡面資料來源有兩種：

a.直接寫嘍，如下：

<FlipView SelectedIndex="0" HorizontalAlignment="Center" Width="400" Height="300">    <FlipView.Items>        <FlipViewItem>            <Image Source="Assets/boy1.jpeg" Width="400" Height="300" Stretch="UniformToFill" />        </FlipViewItem>        <FlipViewItem>            <Border Background="Green">                <Border.Child>                    <TextBlock Text="東京食屍鬼" HorizontalAlignment="Center" FontSize="30" Width="400" Height="300" />                </Border.Child>            </Border>        </FlipViewItem>    </FlipView.Items></FlipView>

b.通過後台綁定，下面貼出的原始碼中有體現

好了，終於可以貼代碼了

前台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>        <StackPanel>            <!--FlipView滑動視圖控制項-->            <!--SelectedIndex屬性決定初始顯示元素-->                        <!--直接通過FlipViewItem指定FlipView的每一項-->            <FlipView SelectedIndex="0" HorizontalAlignment="Center" Width="400" Height="300">                <FlipView.Items>                    <FlipViewItem>                        <Image Source="Assets/boy1.jpeg" Width="400" Height="300" Stretch="UniformToFill" />                    </FlipViewItem>                    <FlipViewItem>                        <Border Background="Green">                            <Border.Child>                                <TextBlock Text="東京食屍鬼" HorizontalAlignment="Center" FontSize="30" Width="400" Height="300" />                            </Border.Child>                        </Border>                    </FlipViewItem>                </FlipView.Items>                <FlipView.ItemsPanel>                    <ItemsPanelTemplate>                        <StackPanel Orientation="Horizontal"/>                    </ItemsPanelTemplate>                </FlipView.ItemsPanel>            </FlipView>                        <!--通過後台綁定-->            <FlipView x:Name="flipView" Width="400" Height="300">                <FlipView.ItemContainerStyle>                    <Style TargetType="FlipViewItem">                        <Setter Property="HorizontalAlignment" Value="Center"/>                        <Setter Property="VerticalAlignment" Value="Center"/>                    </Style>                </FlipView.ItemContainerStyle>                <!--上下翻頁-->                <FlipView.ItemsPanel>                    <!--指定FlipView內容怎樣滑動-->                    <ItemsPanelTemplate>                        <StackPanel Orientation="Vertical"/>                    </ItemsPanelTemplate>                </FlipView.ItemsPanel>                <FlipView.ItemTemplate>                    <DataTemplate>                        <StackPanel Background="Green" Orientation="Vertical">                            <TextBlock Text="{Binding name}" FontSize="30"/>                            <TextBlock Text="{Binding age}" FontSize="30"/>                        </StackPanel>                    </DataTemplate>                </FlipView.ItemTemplate>            </FlipView>        </StackPanel>    </Grid></Page>

後台.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;// “空白頁”項目範本在 http://go.microsoft.com/fwlink/?LinkID=390556 上有介紹namespace TestUnion{    /// <summary>    /// 可用於自身或導航至 Frame 內部的空白頁。    /// </summary>    public sealed partial class FlipViewDemo : Page    {        public FlipViewDemo()        {            this.InitializeComponent();            flipView.ItemsSource = list;        }        /// <summary>        /// 在此頁將要在 Frame 中顯示時進行調用。        /// </summary>        /// <param name="e">描述如何訪問此頁的事件數目據。        /// 此參數通常用於配置頁。</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("金木",20),            new Student("熏香",21)        };    }}

運行：

初始介面：

上部分的FlipView左滑時和左滑結束後：

                      

下面的FlipView右滑時和右滑後：

                

除此之外，我們還可以實現FlipView元素之間的自動滑動切換，只要加一個定時器即可

代碼如下，很簡單易懂：

前台XAML:

<Page    x:Class="TestUnion.FlipViewDemo2"    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>        <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" Stretch="UniformToFill"/>                </FlipViewItem>            </FlipView.Items>        </FlipView>    </Grid></Page>

後台.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;// “空白頁”項目範本在 http://go.microsoft.com/fwlink/?LinkID=390556 上有介紹namespace TestUnion{    /// <summary>    /// 可用於自身或導航至 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>        /// 在此頁將要在 Frame 中顯示時進行調用。        /// </summary>        /// <param name="e">描述如何訪問此頁的事件數目據。        /// 此參數通常用於配置頁。</param>        protected override void OnNavigatedTo(NavigationEventArgs e)        {        }    }}

運行：

初始介面：

以下狀態是1切換到2時，2頁面，2切換到3時：

      

最後一個是3畫面：

多動手試試，可以做成各種各樣想要的動畫效果。我覺得蠻好玩的，実に　おもしろい

Windows Phone 8.1中的FlipView控制項