您现在的位置：程式碼之家 >> 編程語言 > >> .NET 網頁程式設計 >> C# >> 關於C#

Windows 8 開發入門（九）：FlipView 翻頁控件兩種資料綁定模式

編輯：關於C#

FlipView 內建左右翻頁按鈕，適合圖片輪播、簡報切換。本文示範 靜態項目 與 動態資料繫結 兩種用法。

模式一：純 XAML 靜態 FlipViewItem

<FlipView>
    <FlipViewItem><Image Stretch="Uniform" Source="https://imgcache.qq.com/.../3802.jpg"/></FlipViewItem>
    <FlipViewItem><Image Stretch="Uniform" Source="https://imgcache.qq.com/.../4023.jpg"/></FlipViewItem>
    <FlipViewItem><Image Stretch="Uniform" Source="https://imgcache.qq.com/.../3673.jpg"/></FlipViewItem>
    <FlipViewItem><Image Stretch="Uniform" Source="https://imgcache.qq.com/.../4017.jpg"/></FlipViewItem>
    <FlipViewItem><Image Stretch="Uniform" Source="https://imgcache.qq.com/.../3972.jpg"/></FlipViewItem>
</FlipView>

靜態 FlipView 效果 — 圖 1：直接撰寫 FlipViewItem 靜態圖片輪播

模式二：DataTemplate + 後端集合綁定

前端：定義 ItemTemplate

<FlipView Name="fvShow" Margin="100">
    <FlipView.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.Background>
                    <ImageBrush Stretch="Uniform" ImageSource="{Binding ImgUrl}"/>
                </Grid.Background>
                <TextBlock Text="{Binding ImgName}" FontSize="20" Foreground="Blue"
                           Margin="180,300,0,0" VerticalAlignment="Top" HorizontalAlignment="Left"/>
                <TextBlock Text="{Binding ImgAddr}" FontSize="20" Foreground="Blue"
                           Margin="180,350,0,0" VerticalAlignment="Top" HorizontalAlignment="Left"/>
            </Grid>
        </DataTemplate>
    </FlipView.ItemTemplate>
</FlipView>

後端：模型與資料來源

public sealed partial class MainPage : Page {
    public MainPage() {
        this.InitializeComponent();
        fvShow.ItemsSource = ImgModel.GetImgData();
    }
}

public class ImgModel {
    public string ImgName { get; set; }
    public string ImgAddr { get; set; }
    public string ImgUrl { get; set; }

    public static List<ImgModel> GetImgData() {
        return new List<ImgModel> {
            new ImgModel { ImgName = "名字：北京冬景", ImgAddr = "地址：北京市", ImgUrl = "https://imgcache.qq.com/.../3922.jpg" },
            new ImgModel { ImgName = "名字：上海春景", ImgAddr = "地址：上海市", ImgUrl = "https://imgcache.qq.com/.../3147.jpg" },
            new ImgModel { ImgName = "名字：天津秋景", ImgAddr = "地址：天津市", ImgUrl = "https://imgcache.qq.com/.../3966.jpg" },
            new ImgModel { ImgName = "名字：海南夏景", ImgAddr = "地址：海南市", ImgUrl = "https://imgcache.qq.com/.../3695.jpg" },
            new ImgModel { ImgName = "名字：成都風景", ImgAddr = "地址：成都市", ImgUrl = "https://imgcache.qq.com/.../2518.jpg" }
        };
    }
}