Windows Phone 8.1 新特性 - 控制項之FlipView

標籤：style   blog   class   code   java   tar   

本篇為大家介紹 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 的基本應用介紹完了，希望對大家有協助，謝謝。