Windows 8实用窍门系列：9.Windows 8中使用FlipView

　　FlipView控件类似于翻页控件，并且是现成的翻页按钮，你只需要为其增加数据项即可。本文讲述两种方式的FlipView项目和展示。

　　一：直接前台FlipViewItem

        <FlipView><FlipViewItem><Image Stretch="Uniform" Source="http://imgcache.qq.com/club/item/wallpic/items/2/3802/760_300_3802.jpg"/></FlipViewItem><FlipViewItem><Image Stretch="Uniform" Source="http://imgcache.qq.com/club/item/wallpic/items/3/4023/c_760_300_4023.jpg"/></FlipViewItem><FlipViewItem><Image Stretch="Uniform" Source="http://imgcache.qq.com/club/item/wallpic/items/3/3673/c_760_300_3673.jpg"/></FlipViewItem><FlipViewItem><Image Stretch="Uniform" Source="http://imgcache.qq.com/club/item/wallpic/items/7/4017/c_760_300_4017.jpg"/></FlipViewItem><FlipViewItem><Image Stretch="Uniform" Source="http://imgcache.qq.com/club/item/wallpic/items/2/3972/c_760_300_3972.jpg"/></FlipViewItem></FlipView>

　　效果如下：

　　二：前台设置DataTemplate，后台实体集方式添加数据项。

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

   /// <summary>/// 可用于自身或导航至 Frame 内部的空白页。/// </summary>public sealed partial class MainPage : Page{public MainPage(){this.InitializeComponent();this.fvShow.ItemsSource = ImgModel.GetImgData();}/// <summary>/// 在此页将要在 Frame 中显示时进行调用。/// </summary>/// <param name="e">描述如何访问此页的事件数据。Parameter/// 属性通常用于配置页。</param>protected override void OnNavigatedTo(NavigationEventArgs e){}}/// <summary>/// 图片实体/// </summary>public class ImgModel{/// <summary>/// 图片名字/// </summary>public string ImgName { get; set; }/// <summary>/// 图片地址/// </summary>public string ImgAddr { get; set; }/// <summary>/// 图片URL/// </summary>public string ImgUrl { get; set; }public static List<ImgModel> GetImgData(){List<ImgModel> list = new List<ImgModel>();list.Add(new ImgModel() { ImgName = "名字：北京冬景", ImgAddr = "地址：北京市", ImgUrl = "http://imgcache.qq.com/club/item/wallpic/items/2/3922/760_300_3922.jpg" });list.Add(new ImgModel() { ImgName = "名字：上海春景", ImgAddr = "地址：上海市", ImgUrl = "http://imgcache.qq.com/club/item/wallpic/items/7/3147/760_300_3147.jpg" });list.Add(new ImgModel() { ImgName = "名字：天津秋景", ImgAddr = "地址：天津市", ImgUrl = "http://imgcache.qq.com/club/item/wallpic/items/6/3966/c_760_300_3966.jpg" });list.Add(new ImgModel() { ImgName = "名字：海南夏景", ImgAddr = "地址：海南市", ImgUrl = "http://imgcache.qq.com/club/item/wallpic/items/5/3695/760_300_3695.jpg" });list.Add(new ImgModel() { ImgName = "名字：成都风景", ImgAddr = "地址：成都市", ImgUrl = "http://imgcache.qq.com/club/item/wallpic/items/8/2518/760_300_2518.jpg" });return list;}}