Windows Store App 控件动画

在开发Windows应用商店应用时，开发工具中已经封装了大量的控件供开发人员使用，而其中有一部分控件，例如FlipView、ToolTip、ListView以及SemanticZoom等控件中已经默认集成了内置的动画，这种集成在控件中的动画被称为控件动画，开发人员可根据不同的应用场景，选择具有动画效果的控件来满足对特定动画的使用需要，从而为用户提供良好的操作体验。例如，当应用从网络获取数据时，为避免页面长时间等待所造成的界面停顿给用户造成误解，可以在页面中使用不确定进度环来形象的告知用户，此时应用程序正在运行当中，而不确定进度环控件就是一个典型的内置了动画效果的控件。

在控件中内置动画可以为常用的控件提供更好的用户体验，由于在本章前面的第五章中已经对大部分的常用控件进行了详细的讲解，其中就包括了内置有动画效果的控件，所以在本小节中将不对前面所讲述过的控件进行重复的介绍。仅以具有典型特征的FlipView控件为例来说明控件动画的含义。

FlipView控件可以实现交替显示所包含的界面元素，并在交替显示的过程中提供过度动画效果，而最常见的情况是使用FlipView控件来展示一组图片就像播放一组幻灯片那样，用户可以通过单击FlipView自带的切换视图按钮或使用手势左右滑动屏幕来切换其中所展示的每一个图片。下面就来通过一个示例演示如何使用FlipView控件实现交替播放图片的动画效果。

在Visual Studio 2012中新建一个Windows应用商店的空白应用程序项目，并命名为FlipViewApp，在项目的Assets文件夹下添加3个名为“Flower.jpg”、“Mountain.jpg”、“Car.jpg”的图片文件，接着双击打开MainPage.xaml文件，在Grid元素中添加如下代码。

<!-- FlipView控件-->

<FlipView>

    <Image Source="Assets/Flower.jpg"/>

    <Image Source="Assets/Mountain.jpg"/>

    <Image Source="Assets/Car.jpg"/>

</FlipView>

在上面的代码中，添加了一个用于展示图片的FlipView控件，然后向FlipView控件中添加3个Image控件并通过设置这些控件的Source属性指定图片的路径，这样将可以通过FlipView控件展示3个Image控件中的图片。

按下F5运行程序，界面显示效果如图10-1所示。

 

图10-1 FlipView控件的交替播放动画效果

通过以上示例，读者会发现FlipView控件动画增强了用户与控件的交互，用户可以通过点击图片左右两侧的切换视图按钮，来欣赏自己感兴趣的图片。在图片交替播放的过程中，产生的动画效果自然流畅，给用户带来了良好的操作体验。