新時尚Windows8開發（20）：FlipView控制項

FlipView控制項和我們常見到的ListView、ListBox控制項很像，今天拿它來吹一吹，是因為這個控制項還挺新鮮的。

 

要說用文字來介紹這個控制項，還真不夠生動也欠缺活潑，不過，其實這個控制項咱們還是見得不少的，如果你經常到市集下載應用的話，你肯定見過。就是這個：

 

就是這玩意兒，左右各有一個按鈕用來導航視圖，每次只能查看一個視圖，比較適合用於圖片瀏覽。

 

廢話少說，我們來做兩個執行個體，第一個是手動添加項，第二個是資料繫結的。

 

好的，先做第一個，很簡單，我們在FlipView中放三個項，每個項的內容就是一個Image，看看下面的XAML就會明白了。

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">        <FlipView Margin="300,150">            <FlipViewItem>                <Image                    Stretch="Uniform"                    Source="http://pica.nipic.com/2008-01-17/2008117205617816_2.jpg"/>            </FlipViewItem>            <FlipViewItem>                <Image                    Stretch="Uniform"                    Source="http://pic4.nipic.com/20090914/1593169_000535237178_2.jpg"/>            </FlipViewItem>            <FlipViewItem>                <Image                    Stretch="Uniform"                    Source="http://www.zwtuu.com.cn/upload/2008_10/08102721166304.jpg"/>            </FlipViewItem>        </FlipView>    </Grid>

然後，我們運行一下。

 

好的，現在來看看第二個例子，資料繫結的。

既然要資料繫結了，肯定要資料來源的了。因此，我們先偽造一些資料，注意，這資料是偽造的，如有雷同，純屬自然造化。

    public class Student    {        public string Name { get; set; }        public int Age { get; set; }        public string Sex { get; set; }        public string Email { get; set; }        public string Remark { get; set; }    }    public class TestDataSource : System.Collections.ObjectModel.ObservableCollection<Student>    {        public TestDataSource()        {            this.Add(new Student            {                Name = "小趙",                Age = 20,                Sex = "男",                Email = "rubbish@163.com",                Remark = "此人人品低下，經常在公用場所撒尿。"            });            this.Add(new Student            {                Name = "小王",                Age = 18,                Email = "kaozhu@163.com",                Sex = "女",                Remark = "膽大心細臉皮厚。"            });            this.Add(new Student            {                Name = "小劉",                Age = 21,                Email = "ak800@foxmail.com",                Sex = "男",                Remark = "這廝是牛人啊。"            });        }    }

然後，在XAML中進行綁定UI。

<Page    x:Class="FlipViewExample2.MainPage"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:FlipViewExample2"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    mc:Ignorable="d">        <Page.Resources>        <Style x:Key="t1" TargetType="TextBlock">            <Setter Property="FontSize" Value="20"/>            <Setter Property="FontWeight" Value="Bold"/>            <Setter Property="VerticalAlignment" Value="Top"/>            <Setter Property="Margin" Value="3,2,6,2"/>        </Style>        <Style x:Key="t2" TargetType="TextBlock">            <Setter Property="FontSize" Value="19"/>            <Setter Property="Margin" Value="3.2,2,3,2"/>            <Setter Property="TextWrapping" Value="Wrap"/>        </Style>        <Style x:Key="jlipviewItemStyle" TargetType="FlipViewItem">            <Setter Property="HorizontalContentAlignment" Value="Center"/>            <Setter Property="VerticalContentAlignment" Value="Center"/>        </Style>    </Page.Resources>    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">        <FlipView x:Name="fv" Width="500" Height="150" VerticalAlignment="Center" HorizontalAlignment="Center" ItemContainerStyle="{StaticResource jlipviewItemStyle}">            <FlipView.ItemTemplate>                <DataTemplate>                    <Grid>                        <Grid.ColumnDefinitions>                            <ColumnDefinition Width="auto"/>                            <ColumnDefinition Width="*"/>                        </Grid.ColumnDefinitions>                        <Grid.RowDefinitions>                            <RowDefinition Height="auto"/>                            <RowDefinition Height="auto"/>                            <RowDefinition Height="auto"/>                            <RowDefinition Height="auto"/>                            <RowDefinition Height="auto"/>                        </Grid.RowDefinitions>                        <TextBlock Style="{StaticResource t1}" Grid.Column="0" Grid.Row="0" Text="姓名："/>                        <TextBlock Style="{StaticResource t2}" Grid.Column="1" Grid.Row="0" Text="{Binding Name}"/>                        <TextBlock Style="{StaticResource t1}" Grid.Column="0" Grid.Row="1" Text="年齡："/>                        <TextBlock Style="{StaticResource t2}" Grid.Column="1" Grid.Row="1" Text="{Binding Age}"/>                        <TextBlock Style="{StaticResource t1}" Grid.Column="0" Grid.Row="2" Text="性別："/>                        <TextBlock Style="{StaticResource t2}" Grid.Column="1" Grid.Row="2" Text="{Binding Sex}"/>                        <TextBlock Style="{StaticResource t1}" Grid.Column="0" Grid.Row="3" Text="電郵："/>                        <TextBlock Style="{StaticResource t2}" Grid.Column="1" Grid.Row="3" Text="{Binding Email}"/>                        <TextBlock Style="{StaticResource t1}" Grid.Column="0" Grid.Row="4" Text="備忘："/>                        <TextBlock Style="{StaticResource t2}" Grid.Column="1" Grid.Row="4" Text="{Binding Remark}"/>                    </Grid>                </DataTemplate>            </FlipView.ItemTemplate>        </FlipView>    </Grid></Page>

切換到程式碼檢視，在MainPage類的建構函式中加入以下代碼，設定FlipView的資料來源。

        public MainPage()        {            this.InitializeComponent();            TestDataSource source = new TestDataSource();            this.fv.ItemsSource = source;        }

如果一切正常，運行後，你應該能看到以下效果。