Windows Phone 8.1 新特性 - 控件之FlipView

本篇為大家介紹 Windows Phone 8.1 中新增的 FlipView 控件，它的中文名字叫做：翻轉視圖。

雖然聽起來有點拗口，但是它的用途大家一定不會陌生。在 Windows Phone 8 中，我們經常會為應用首次啟動時加一個引導頁，幾張引導圖片滑動來顯示，最后點擊確定進入應用。我們會為它寫一個控件來實現，而FlipView 可以輕松的完成這一功能。FlipView不止可以作為圖片瀏覽控件，同時還可以作為文本切換，步驟切換等等。下面我們先來看一個簡單的例子：

<FlipView>
    <TextBlock Text="1" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="200"/>
    <TextBlock Text="2" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="200"/>
    <TextBlock Text="3" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="200"/>
</FlipView>

我們給FlipView添加了三個元素，分別是1，2 和 3。來看看運行效果：
  

如上圖中，我們通過水平滑動來顯示1，2 和 3，但是不能循環顯示，也就是說不能從1向右滑動顯示3，或者從3向左滑動顯示1。

與其他集合類控件相似，FlipView 支持直接添加元素集合或者將 ItemsSource 綁定到數據源來添加元素。下面我們分別來演示這兩種方式：

（1） 直接添加元素集合

<FlipView SelectedIndex="0">
    <TextBlock Text="TextBlock" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="70"/>
    <Image Source="Assets/setting.png" Width="100"/>
    <Border Background="Green" Width="200" Height="200"/>
</FlipView>

我們添加了三個不同類型的元素。同時我們可以通過修改 SelectedIndex 屬性來決定初始顯示的元素。來看看運行效果：

  

（2） 通過ItemsSource屬性綁定

<FlipView x:Name="demoFlipView">
    <FlipView.ItemTemplate>
        <DataTemplate>
            <Grid Background="YellowGreen">
                <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding DemoContent}" FontSize="60"/>
            </Grid>
        </DataTemplate>
    </FlipView.ItemTemplate>
    <FlipView.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Vertical"/>
        </ItemsPanelTemplate>
    </FlipView.ItemsPanel>
</FlipView>

我們為 FlipView 指定了 ItemTemplate 和 ItemsPanel。其中 ItemsPanel 為縱向排列的 StackPanel，這樣我們就可以通過上下滑動的方式來顯示元素了。來看看后台代碼中的數據綁定：

protected override async void OnNavigatedTo(NavigationEventArgs e)
{
    List<Demo> demoList = new List<Demo>();
    demoList.Add(new Demo() { DemoContent = "First Item"});
    demoList.Add(new Demo() { DemoContent = "Second Item" });
    demoList.Add(new Demo() { DemoContent = "Last Item" });
    demoFlipView.ItemsSource = demoList;
}

public class Demo
{
    public string DemoContent { get; set; }
}

綁定代碼很簡單，這里不做過多說明，來看看運行效果:

  

上圖中，三個元素通過上下滑動的方式顯示出來。同樣，我們可以利用代碼來控制 FlipView 顯示哪個元素。比如一個自動瀏覽的相冊，每隔幾秒變換一張圖片，到最后一張后，重新再來。來看看代碼實現：

DispatcherTimer _timer = new DispatcherTimer();
_timer.Interval = TimeSpan.FromSeconds(1.0);
_timer.Tick += ((sender, e) =>
{
    if (demoFlipView.SelectedIndex < demoFlipView.Items.Count - 1)
        demoFlipView.SelectedIndex++;
    else
        demoFlipView.SelectedIndex = 0;
});
_timer.Start();

如上的代碼即可實現 FlipView 的自動切換效果，這里我們不需截圖說明了。

好了，到這里我們就把 FlipView 的基本應用介紹完了，希望對大家有幫助，謝謝。