Windows Phone 8.1中的FlipView控件

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

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

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

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

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

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

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

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

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

<FlipView.ItemsPanel>

<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)
        };

    }
}

運作截圖：

初始界面：

Windows Phone 8.1中的FlipView控件

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

Windows Phone 8.1中的FlipView控件

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

Windows Phone 8.1中的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)
        {
        }
    }
}

運作截圖：

初始界面：

Windows Phone 8.1中的FlipView控件

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

Windows Phone 8.1中的FlipView控件

最後一個是3畫面：

Windows Phone 8.1中的FlipView控件

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

Windows Phone 8.1中的FlipView控件

繼續閱讀

UITabBarController的selectedIndex屬性不起作用？

flex之selectedItem與selectedIndex的差別

Windows Phone 8.1 系列文章索引

Windows Phone 8.1中的Progress進度條控件和計時器Dispatcher的正确用法

Windows Phone 8.1綁定資料集合

Windows Phone 8.1中綁定資料轉換

Windows Phone 8.1中TextBox的不可忽略的特性和HyperlinkButton的認識

Win8和Windows Phone 8.1資源橋梁：FileOpenPicker

WinRT中如何快速擷取Uri位址中的QueryString鍵值對資訊

Windows Phone中FileIO，StreamReader以及StreamWriter類(僅針對文本檔案)

Windows Phone 8.1中Button不易察覺的用法

Windows Phone 8.1中的"多面手"--Hub

Windows Phone 8.1中ScrollViewer（一）

Windows Phone 8.1的網絡程式設計之HttpWebRequest類

Windows Phone 8.1中資料顯示控件基石------ItemsControl

FlipView控件