使用WPF技术模拟手机界面

Posted lonelyxmas

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用WPF技术模拟手机界面相关的知识,希望对你有一定的参考价值。

原文:使用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 后台模拟界面触摸点击

WPF 滑动菜单

在wpf中利用异步lambda编程,模拟数据库连接,防止界面假死

WPF和Expression Blend开发实例:模拟QQ登陆界面打开和关闭特效

怎么在WPF写的界面有那种气泡提示