设为首页 收藏本站
查看: 903|回复: 0

快速构建Windows 8风格应用4-FlipView数据控件

[复制链接]
YunVN网友  发表于 2015-5-22 10:20:52 |阅读模式
  本篇博文主要介绍为什么使用FlipView控件、什么是FlipView控件、如何使用FlipView控件和FlipView控件最佳实践。
  
  为什么使用FlipView控件?
  如果我们开发一个购物类应用,希望在产品详细页面中显示产品的多个图像,对于这种小型数据集合可以使用FlipView控件。
  如果我们开发一个房地产类应用,希望针对每间房屋显示许多图像,以展示各个房间,对于这种中型数据集合可以包括FlipView控件,以便让用户可以跳转到特定的照片。
  
  什么是FlipView控件?
  FlipView数据控件用来显示数据集合,用户可以通过滑动在其子窗体间切换,当然也可以点击左右或者上下两侧的切换按钮在其子窗体间切换。FlipView控件继承自ItemsControl类。
DSC0000.png
  下面我们来看FlipView控件中几个重要属性和事件:
  1)  ItemsSource属性:获取或设置生成其内容的对象源;
  2)  ItemTemplate属性:获取或设置显示项的模版;
  3)  ItemTemplateSelector属性:选择生效的模版(一般在定义了多个ItemTemplate时使用);
  4)  ItemsPanel属性:获取或设置放置内容的面板(通常用来改变FlipView控件的切换方向);
  5)  SelectionChanged事件:当选择的项改变时触发;
  
  如何使用FlipView控件?
  对于我们开发者如何在应用程序中使用FlipView控件呈现数据呢?
  让我们看一下三种常用的FlipView呈现数据效果和如何在代码中如何实现这些效果:
  1)  默认方式,左右浏览数据。
DSC0001.png
  XAML中声明FlipView控件,设置DataTemplate,其中Image控件用于显示图片、TextBlock控件用于显示图片的标题。具体代码如下:
DSC0002.png
  C#代码中将数据绑定到FlipView控件的ItemSource属性上。具体代码如下:
DSC0003.png
  2)  上下浏览数据
DSC0004.png
  XAML中在声明的FlipView控件中设置ItemsPanel属性,值为vertical。具体如何设置如下图代码中所示:
DSC0005.png
  C#代码中将数据绑定到FlipView控件的ItemSource属性上。具体代码如下:
DSC0006.png
  3)  添加上下文指示器控件,以便用户可以直接跳转到特定的项目
DSC0007.png
  XAML中首先需要声明一个FlipView控件,关于FlipView中属性并没有特别的设置,基本和上面代码相同。具体代码如下:
DSC0008.png
  此处唯一特殊之处是还需要声明一个ListBox控件,用来呈现指示器的效果。
DSC0009.png
  声明的ListBox控件如下,需要注意的是SelctedItem进行了一个双向绑定,是将FlipView3的SelectedItem属性值绑定到ListBox的SelctedItem属性上,其中ListBox控件的ItemContainerStyle属性引用了一个名字为ContextControlItemStyle静态资源,Style属性引用了一个名字为ListBoxStyle1静态资源。
DSC00010.png
  静态资源定义在中,具体代码如下:
DSC00011.png
  C#代码中将数据绑定到FlipView控件的ItemsSource属性上和ListBox的ItemsSource属性上。具体代码如下:
DSC00012.png
  
  FlipView控件最佳实践
  建议:
  1)  当集合中的项不能提供足够的上下文信息让用户知道他们当前在哪个集合中时,使用上下文指示器提示用户。
  2)  给用户指示,提醒他们在集合中的当前项。
  3)  裁剪有提示项的数量和特定的场景。
  4)  允许用户跳转到指定的项。
  避免:
  1)不要使用FlipView呈现大型的集合,可使用ListView和GridView控件来呈现。

运维网声明 1、欢迎大家加入本站运维交流群:群②:261659950 群⑤:202807635 群⑦870801961 群⑧679858003
2、本站所有主题由该帖子作者发表,该帖子作者与运维网享有帖子相关版权
3、所有作品的著作权均归原作者享有,请您和我们一样尊重他人的著作权等合法权益。如果您对作品感到满意,请购买正版
4、禁止制作、复制、发布和传播具有反动、淫秽、色情、暴力、凶杀等内容的信息,一经发现立即删除。若您因此触犯法律,一切后果自负,我们对此不承担任何责任
5、所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其内容的准确性、可靠性、正当性、安全性、合法性等负责,亦不承担任何法律责任
6、所有作品仅供您个人学习、研究或欣赏,不得用于商业或者其他用途,否则,一切后果均由您自己承担,我们对此不承担任何法律责任
7、如涉及侵犯版权等问题,请您及时通知我们,我们将立即采取措施予以解决
8、联系人Email:admin@iyunv.com 网址:www.yunweiku.com

所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其承担任何法律责任,如涉及侵犯版权等问题,请您及时通知我们,我们将立即处理,联系人Email:kefu@iyunv.com,QQ:1061981298 本贴地址:https://www.yunweiku.com/thread-69470-1-1.html 上篇帖子: 微软泄漏Windows Phone 8新特性 下篇帖子: [Windows 8小技巧]如何登陆Windows 8后自动进入传统桌面
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

扫码加入运维网微信交流群X

扫码加入运维网微信交流群

扫描二维码加入运维网微信交流群,最新一手资源尽在官方微信交流群!快快加入我们吧...

扫描微信二维码查看详情

客服E-mail:kefu@iyunv.com 客服QQ:1061981298


QQ群⑦:运维网交流群⑦ QQ群⑧:运维网交流群⑧ k8s群:运维网kubernetes交流群


提醒:禁止发布任何违反国家法律、法规的言论与图片等内容;本站内容均来自个人观点与网络等信息,非本站认同之观点.


本站大部分资源是网友从网上搜集分享而来,其版权均归原作者及其网站所有,我们尊重他人的合法权益,如有内容侵犯您的合法权益,请及时与我们联系进行核实删除!



合作伙伴: 青云cloud

快速回复 返回顶部 返回列表