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控件动画增强了用户与控件的交互,用户可以通过点击图片左右两侧的切换视图按钮,来欣赏自己感兴趣的图片。在图片交替播放的过程中,产生的动画效果自然流畅,给用户带来了良好的操作体验。

时间: 2024-08-30 08:21:50

Windows Store App 控件动画的相关文章

Windows Store App 过渡动画

Windows Store App 过渡动画     在开发Windows应用商店应用程序时,如果希望界面元素进入或者离开屏幕时显得自然和流畅,可以为其添加过渡动画.过渡动画能够及时地提示用户屏幕所发生的变化,不会让用户觉得元素的位置变化过于突然.下面通过一个示例介绍如何为界面中的文本块添加过渡动画. 在一个打开的Windows应用商店项目中新建一个空白页,并命名为TransitionAnimationPage,双击打开此页面的TransitionAnimationPage.xaml文件,在Gr

背水一战 Windows 10 (64) - 控件(WebView): 加载指定 HttpMethod 的请求, 自定义请求的 http header, app 与 js 的交互

[源码下载] 作者:webabcd 介绍背水一战 Windows 10 之 控件(WebView) 加载指定 HttpMethod 的请求 自定义请求的 http header app 与 js 的交互 示例1.演示 WebView 如何加载指定 HttpMethod 的请求以及如何自定义请求的 http headerWebApi/Controllers/WebViewPostController.cs /* * 用于 WebView 演示“如何加载指定 HttpMethod 的请求,以及如何自

背水一战 Windows 10 (42) - 控件(导航类): Frame 动画

原文:背水一战 Windows 10 (42) - 控件(导航类): Frame 动画 [源码下载] 作者:webabcd 介绍背水一战 Windows 10 之 控件(导航类) Frame 动画 示例Animation/NavigationTransitionInfo/Demo.xaml <Page x:Class="Windows10.Animation.NavigationTransitionInfo.Demo" xmlns="http://schemas.mic

C#学习(九)之Windows Store App &amp; WP 开发小记(一)

由于课程已经讲述完毕,所以本次学习记录就讨论记录一下我在Windows Store App & WP开发中遇到的一些问题与收获. 一.数据库(Sqlite)的使用 虽然资料很难找,但sqlite在这两个平台的使用还是很简单的. 首先是环境配置阶段: 1.工具->拓展与更新->联机,然后在右上搜索sqlite,之后下载安装下图两个打勾的拓展包,注意要重启VS方才生效. 2.项目->管理NuGet程序包->联机,搜索sqlite,安装下图打勾内容,如果项目多出下图两个文件即安装

Windows Store App 中使用Scrollviewer实现缩放功能

Windows Store App中可以直接使用Scrollviewer实现缩放功能,基本代码如下: <ScrollViewer Background="Yellow" HorizontalScrollBarVisibility="Visible" MaxZoomFactor="2" MinZoomFactor="0.5" VerticalScrollBarVisibility="Visible" Z

最佳实践扩展Windows窗体DataGridView控件 .net 4.5 附示例代码

Windows窗体DataGridView控件的性能调优.net 4.5 在处理大量数据时, DataGridView 控制可以消耗大量的内存开销,除非你仔细地使用它. 在客户有限的内存,你可以避免一些这方面的开销,避免内存成本高的特性. 你也可以管理的部分或全部数据维护和检索任务自己使用虚拟模式为了定制的内存使用情况. 在这一节中 最佳实践扩展Windows窗体DataGridView控件 描述如何使用 DataGridView 控制,避免了不必要的内存使用和在处理大量数据时的性能损失. 虚拟

实现虚拟模式的动态数据加载Windows窗体DataGridView控件 .net 4.5 (一)

实现虚拟模式的即时数据加载Windows窗体DataGridView控件 .net 4.5 原文地址 :http://msdn.microsoft.com/en-us/library/ms171624.aspx  译 Q:77811970 实现虚拟模式的原因之一 DataGridView控制只检索数据,因为它是必要的. 这就是所谓的 即时数据加载 . 如果你正在与一个非常大的表在一个远程数据库,例如,您可能希望避免启动延迟,只检索所需的数据显示和检索额外的数据只有当用户新行滚动到视图. 如果客户

背水一战 Windows 10 (29) - 控件(文本类): RichTextBlock, RichTextBlockOverflow, RichEditBox

原文:背水一战 Windows 10 (29) - 控件(文本类): RichTextBlock, RichTextBlockOverflow, RichEditBox [源码下载] 作者:webabcd 介绍背水一战 Windows 10 之 控件(文本类) RichTextBlock RichTextBlockOverflow RichEditBox 示例1.RichTextBlock 的示例Controls/TextControl/RichTextBlockDemo.xaml <Page

背水一战 Windows 10 (48) - 控件(集合类): FlipView

[源码下载] 作者:webabcd 介绍背水一战 Windows 10 之 控件(集合类) FlipView 示例FlipView 的示例Controls/CollectionControl/FlipViewDemo.xaml <Page x:Class="Windows10.Controls.CollectionControl.FlipViewDemo" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/prese