Windows 8实用窍门系列:9.Windows 8中使用FlipView
FlipView控件类似于翻页控件,并且是现成的翻页按钮,你只需要为其增加数据项即可。本文讲述两种方式的FlipView项目和展示。一:直接前台FlipViewItem
效果如下:
二:前台设置DataTemplate,后台实体集方式添加数据项。
///
/// 可用于自身或导航至 Frame 内部的空白页。
///
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
this.fvShow.ItemsSource = ImgModel.GetImgData();
}
///
/// 在此页将要在 Frame 中显示时进行调用。
///
/// 描述如何访问此页的事件数据。Parameter
/// 属性通常用于配置页。
protected override void OnNavigatedTo(NavigationEventArgs e)
{
}
}
///
/// 图片实体
///
public class ImgModel
{
///
/// 图片名字
///
public string ImgName { get; set; }
///
/// 图片地址
///
public string ImgAddr { get; set; }
///
/// 图片URL
///
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.rar 下载。
页:
[1]