Windows 8技巧：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();
}</p><p> /// <summary>
/// 在此页将要在 Frame 中显示时进行调用。
/// </summary>
/// <param name="e">描述如何访问此页的事件数据。Parameter
/// 属性通常用于配置页。</param>
protected override void OnNavigatedTo(NavigationEventArgs e)
{
}
}</p><p> /// <summary>
/// 图片实体
/// </summary>
public class ImgModel
{
/// <summary>
/// 图片名字
/// </summary>
public string ImgName { get; set; }</p><p> /// <summary>
/// 图片地址
/// </summary>
public string ImgAddr { get; set; }</p><p> /// <summary>
/// 图片URL
/// </summary>
public string ImgUrl { get; set; }</p><p> 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;
}
}
看此方式的效果如下：
最后如需源码请点击 Win8FlipView_jb51net 下载。
IT时代网(关注微信公众号ITtime2000，定时推送，互动有福利惊喜)所有原创文章版权所有，未经授权，转载必究。
创客100创投基金成立于2015年，直通硅谷，专注于TMT领域早期项目投资。LP均来自政府、互联网IT、传媒知名企业和个人。创客100创投基金对IT、通信、互联网、IP等有着自己独特眼光和丰富的资源。决策快、投资快是创客100基金最显著的特点。
TA的最新文章
热门文章
精彩评论
-
小何华为现在牛的不只是设备商了，，华为的手机现在也是全球销量不错，国内也算是老大了，之前用小米，，现在都改华为了。。产品确实不错。 -
小何三星手机在中国还有市场吗？看看现在满大街的vivo和oppo ，，华为，，小米线下店，，就是知道三星的市场基本没有了。。
-
小何滴滴打车现在也没有之前那么火了，，补贴也少了。。
-
小何今日头条要把腾讯的地方各频道给霸占了。。