使用WPF技术模拟手机界面
1. 前言
WPF(Windows Presentation Foundation),即“Windows呈现基础”,它的目的非常明确,就是用来把数据“显示”给用户看的(说白了就是用来做UI的)。接下来将会介绍一个小项目,用WPF来实现模拟手机界面设计。
2. 实现的功能
本项目模拟手机界面,实现了如下几个功能:
- 滑动解锁
- 顶部状态栏显示
- 查看系统时间
- 附有背景以及应用图标的界面及切换
- 点击日历图标跳转到显示日历的界面
- 点击锁屏图标进入滑动解锁状态
3. 效果展示
滑动解锁、顶部状态栏显示 、查看系统时间
实现情况:
1.实现了仿苹果手机的滑动解锁效果,同时滑动解锁模块上面的文字具有动画效果。当滑动解锁箭头滑动长度不足进度条的一半则箭头回到起点,超过一半解锁成功。
2.在屏幕顶部显示状态栏,在锁屏界面实现显示系统时间的功能,能够实时显示系统时间。附有背景以及应用图标的界面及切换
实现情况:
1.每个页面必须设置一个背景图片,每个图标必须有自己的图像。
2.点击页面下方的左右箭头可以实现两个界面之间的顺序切换,点击中间的home键则返回主界面。当界面切换时,具有仿苹果手机的翻页效果(淡入淡出的动画效果),同时可以通过底下的圆点的颜色来判断当前所在界面。模拟Icon的事件响应
实现情况:
1.部分应用图标点击事件,能够跳转到指定界面。点击日历则能够显示日历。点击锁屏的应用图标能够进入滑动解锁的状态。
4. 部分功能代码分析
App.xaml
程序启动的地方,其实是在程序的App.xaml文件里面:StartupUri=”Window1.xaml“这个就是程序的入口点,运行程序之后,我们就将window1显示在了显示屏上。Window1.xaml
Page是我们真正的Ui,而NavigationWindow不过是为我们提供了一个框架,Page是附在上面的。因为VS2010不能直接创建NavigationWindow和Page相关的项目,所以我们要自己修改。首先创建一个WPF应用程序,在后台将继承的Window类改为NavigationWindow类。然后在XAML中同样将< window………标记改为NavigationWindow。NavigationWindow上不能有任何控件。。。包括Grid等。。。。记住现在我们的UI是Page。新建Page,在上面随便画画。然后将NavigationWindow.Source设为默认页面(Default Page)。即将主窗体的XAML里NavigationWindow的Source属性设为Page的名字,就OK了。另外Page之间的切换也是很简单方便的。NavigationService.Navigate(newUri(“XXXXX.xaml”,UriKind.Relative)); XXXXX为Page的名字。Window1.xaml.cs
为Page增加淡入淡出(Fade)效果:
Window1继承自NavigationWindow,那么显然抓住Navigating事件不放,做如下操作:
取消当前Navigate请求,如果有当前页的前提下。
淡出当前页,如果有当前页的前提下。
完成淡出过程后Navigate到目标页。
淡入目标页。Slide.xaml
用于显示背景图片。Slide.xaml.cs
完成滑动解锁功能。
完成显示系统时间的功能。
- Slide.xaml
- RepeatBehavior:获取或设置此时间线的重复行为。Forever循环动画
- DoubleAnimation:它在指定的持续时间内将动画从指定的起始值继续到指定的目标值。
From,To:动画开始到结束变化的值
Slide.xaml.cs
实现了滑动解锁成功切换到主界面的功能。index.xaml
实现页面切换以及页面底部显示页面切换状态的圆点。
5. 下载链接
http://download.csdn.net/download/qq_22408539/10185109
使用WPF技术模拟手机界面的更多相关文章
- WPF技术触屏上的应用系列(六): 视觉冲击、超炫系统主界面、系统入口效果实现
原文:WPF技术触屏上的应用系列(六): 视觉冲击.超炫系统主界面.系统入口效果实现 去年某客户单位要做个大屏触屏应用,要对档案资源进行展示之用.客户端是Window7操作系统,54寸大屏电脑电视一体 ...
- WPF模拟雷达界面效果图
原文:WPF模拟雷达界面效果图 iPad塔防的防守兵的效果很炫,2个小时用WPF模拟了一个. 效果图: 关键代码: <Grid> <Grid.Background> <I ...
- WPF技术触屏上的应用系列(五): 图片列表异步加载、手指进行缩小、放大、拖动 、惯性滑入滑出等效果
原文:WPF技术触屏上的应用系列(五): 图片列表异步加载.手指进行缩小.放大.拖动 .惯性滑入滑出等效果 去年某客户单位要做个大屏触屏应用,要对档案资源进行展示之用.客户端是Window7操作系统, ...
- 在PC上测试移动端网站和模拟手机浏览器的5大方
查了很多资料,尝试了大部分方法,下面将这一天的努力总结下分享给大家,也让大家免去看那么多文章,以下介绍的方法,都是本人亲自测试成功的方法,测试环境winxp. 一.Chrome*浏览器 chrome模 ...
- WPF基础知识、界面布局及控件Binding(转)
WPF是和WinForm对应的,而其核心是数据驱动事件,在开发中显示的是UI界面和逻辑关系相分离的一种开放语言.UI界面是在XAML语言环境下开发人员可以进行一些自主设计的前台界面,逻辑关系还是基于c ...
- 23套新鲜出炉的网站和手机界面 PSD 素材
Web 用户界面,移动用户界面和线框套件对设计师很有用,因为这些套件让他们使用快速和有效的方式复制用户界面.这些类型的工具包提供了一个基本的用户界面元素,用于它们需要制作的网站或软件模型. 在这篇文章 ...
- WPF基础知识、界面布局及控件Binding
WPF是和WinForm对应的,而其核心是数据驱动事件,在开发中显示的是UI界面和逻辑关系相分离的一种开放语言.UI界面是在XAML语言环境下开发人员可以进行一些自主设计的前台界面,逻辑关系还是基于c ...
- 在PC上测试移动端网站和模拟手机浏览器的5大方法
在PC上测试移动端网站和模拟手机浏览器的5大方法 来源:互联网 作者:佚名 时间:03-19 10:14:54 [大 中 小] 最近公司要开发网站的移动版,让我准备准备知 ...
- PHP中CURL技术模拟登陆抓取网站信息,用与微信公众平台成绩查询
伴随微信的红火,微信公众平台成为许多开发者的下一个目标.笔者本身对于这种新鲜事物没有如此多的吸引力.但是最近有朋友帮忙开发微信公众平台中一个成绩查询的功能.于是便在空余时间研究了一番. 主要的实现步骤 ...
随机推荐
- Visual Studio 项目目录下的bin目录和 obj目录
一.Bin目录 Visual Studio 编译时,在bin 目录下有debug 和 release 目录. 1.Debug: 通常称为调试版本,它包含调试信息,所以要比Release 版本大很多(可 ...
- 多校 hdu
欢迎參加--每周六晚的BestCoder(有米!) Solve this interesting problem Time Limit: 2000/1000 MS (Java/Others) M ...
- Windows7-32位系统下R语言链接mySQL数据库步骤
安装R和MySQL在此就不再多说了.网上有非常多教程能够找到.以下直接进入到odbc的安装流程. 1.下载安装mysql-connector-odbc-5.x.x-win32.msi 下载地址:htt ...
- TreeMap、HashMap、ConcurrentSkipListMap之性能比较
比较Java原生的 3种Map的效率. 1. TreeMap 2. HashMap 3. ConcurrentSkipListMap 结果: 模拟150W以内海量数据的插入和查找,通过增加和查找 ...
- jquery-11 如何制作鼠标右键菜单
jquery-11 如何制作鼠标右键菜单 一.总结 一句话总结:核心原理:找到右键菜单事件contextmenu,return false去掉默认事件,然后判断用户是否点的右键,然后在鼠标的位置显示菜 ...
- winscp ppk无需密码登录(失败)
http://blog.csdn.net/catoop/article/details/8284803 按上文将Linux下生成的密钥文件id_rsa通过puttygen生成对应的.ppk文件,用wi ...
- 基于 MySQL 5.6 keepalived的双主搭建
环境介绍: 说明 IP 节点1 192.168.56.56 节点2 192.168.56.57 w_ip 192.168.56.6 安装keepalived tar -zxvf keepalived- ...
- Vert.x ——概述
Vert.x是什么 Vert.x(http://vertx.io/)是一个基于JVM.轻量级.高性能的应用平台,非常适用于最新的移动端后台.互联网.企业应用架构. Vert.x框架基于事件和异步,依托 ...
- Mina框架项目运用
近期最一个项目对通信要求比較严格,须要建立长连接,且能处理多并发,所以选择了Mina框架.以下就简单记录开发的过程吧: mina 开发须要的jar包: mina pc端通信: 服务端: package ...
- Struts2之配置使用
重要声明:此次学习struts2使用的版本号为:struts-2.3.15.3.假设是用的其它版本号出现的问题能够联系我. 一. 1.首先就是打开myeclipse创建project名为:struts ...