Windows 8技巧:Windows 8中FlipView的使用技巧介绍

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

一：直接前台FlipViewItem

复制代码

代码如下:

效果如下：

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

复制代码

代码如下:

<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}\"/>

复制代码

代码如下:

///

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

///

/// 描述如何访问此页的事件数据。Parameter
/// 属性通常用于配置页。
protected override void OnNavigatedTo(NavigationEventArgs e)
{
}
}

///

public class ImgModel
{
///

public string ImgName { get; set; }

///

public string ImgAddr { get; set; }

///

public string ImgUrl { get; set; }

public static List GetImgData()
{
List list = new List();
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;
}
}

看此方式的效果如下：

最后如需源码请点击 Win8FlipView_jb51net 下载。