首页 > 系统问题

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

番茄系统家园 · 2022-09-19 09:49:57

　　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

　　效果如下：

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

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

复制代码代码如下:
FlipView Name="fvShow" Margin="100"
FlipView.ItemTemplate
DataTemplate
Grid
Grid.Background
ImageBrush Stretch="Uniform" ImageSource="{Binding ImgUrl}"/
/Grid.Background
TextBlockHeight="30" VerticalAlignment="Top" HorizontalAlignment="Left"
Margin="180 300 0 0" FontSize="20" Foreground="Blue" Text="{Binding ImgName}"/
TextBlockHeight="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();
}/p

///

/// 在此页将要在 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;
}
}

　　看此方式的效果如下：

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

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

免责声明：凡标注转载/编译字样内容并非本站原创，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如果你觉得本文好，欢迎推荐给朋友阅读；本文链接： https://m.nndssk.com/xtwt/85727Z2maqD.html。