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

原文:快速构建Windows 8风格应用4-FlipView数据控件本篇博文主要介绍为什么使用FlipView控件、什么是FlipView控件、如何使用FlipView控件和FlipView控件最佳实践。

为什么使用FlipView控件？

如果我们开发一个购物类应用，希望在产品详细页面中显示产品的多个图像，对于这种小型数据集合可以使用FlipView控件。

如果我们开发一个房地产类应用，希望针对每间房屋显示许多图像，以展示各个房间，对于这种中型数据集合可以包括FlipView控件，以便让用户可以跳转到特定的照片。

什么是FlipView控件？

FlipView数据控件用来显示数据集合，用户可以通过滑动在其子窗体间切换，当然也可以点击左右或者上下两侧的切换按钮在其子窗体间切换。FlipView控件继承自ItemsControl类。



下面我们来看FlipView控件中几个重要属性和事件：

1） ItemsSource属性：获取或设置生成其内容的对象源；

2） ItemTemplate属性：获取或设置显示项的模版；

3） ItemTemplateSelector属性：选择生效的模版（一般在定义了多个ItemTemplate时使用）；

4） ItemsPanel属性：获取或设置放置内容的面板（通常用来改变FlipView控件的切换方向）；

5） SelectionChanged事件：当选择的项改变时触发；

如何使用FlipView控件？

对于我们开发者如何在应用程序中使用FlipView控件呈现数据呢？

让我们看一下三种常用的FlipView呈现数据效果和如何在代码中如何实现这些效果：

1） 默认方式，左右浏览数据。



XAML中声明FlipView控件，设置DataTemplate，其中Image控件用于显示图片、TextBlock控件用于显示图片的标题。具体代码如下:



C#代码中将数据绑定到FlipView控件的ItemSource属性上。具体代码如下：



2） 上下浏览数据



XAML中在声明的FlipView控件中设置ItemsPanel属性，值为vertical。具体如何设置如下图代码中所示：



C#代码中将数据绑定到FlipView控件的ItemSource属性上。具体代码如下：



3） 添加上下文指示器控件，以便用户可以直接跳转到特定的项目



XAML中首先需要声明一个FlipView控件，关于FlipView中属性并没有特别的设置，基本和上面代码相同。具体代码如下：



此处唯一特殊之处是还需要声明一个ListBox控件，用来呈现指示器的效果。



声明的ListBox控件如下，需要注意的是SelctedItem进行了一个双向绑定，是将FlipView3的SelectedItem属性值绑定到ListBox的SelctedItem属性上，其中ListBox控件的ItemContainerStyle属性引用了一个名字为ContextControlItemStyle静态资源，Style属性引用了一个名字为ListBoxStyle1静态资源。



静态资源定义在<Page.Rescource>中，具体代码如下：



C#代码中将数据绑定到FlipView控件的ItemsSource属性上和ListBox的ItemsSource属性上。具体代码如下：



FlipView控件最佳实践

建议：

1） 当集合中的项不能提供足够的上下文信息让用户知道他们当前在哪个集合中时，使用上下文指示器提示用户。

2） 给用户指示，提醒他们在集合中的当前项。

3） 裁剪有提示项的数量和特定的场景。

4） 允许用户跳转到指定的项。

避免：

1）不要使用FlipView呈现大型的集合，可使用ListView和GridView控件来呈现。