Windows Phone 7实战 第一天 设计启动页面和应用程序图标

每一个 Windows Phone 7 应用程序在启动时多少会花上一些时间,在这个等待的时刻经常都会摆放一些启动画面 (Splash screen) 先来充充场面,以免加载时间过长而导致使用者不耐烦,而在这个启动屏幕里是一个很好的宣传页面,可以把产品的广告,作者介绍在这里显示、品牌信息都显示在这个页面里,当然时间不能太长、也不能太短,否则若这个启动屏幕跑得太快,那就没有出现的必要性了,有时后这种必要的“慢”也是一种艺术。

首先我们建立一个默认的Silverlight For windows  Phone的项目

我们就是要制作一个二维码生成器应用程序啦,选用芒果应用程序 Windows Phone OS 7.1。

然后新增一个页面  Windows Phone Portrait Page 页面,并取名为 SplashScreen.xaml, 方法是右击工程,选择Add→New Item→Windows Phone Portait Page,把页面里面的所有界面元素删除,添加一个Image控件到SplashScreen.xaml页面。

由于 Windows Phone 7 的屏幕大小目前都固定为 480 (宽) x 800 (高),而且我们希望这个启动画面能够占满整个画面,所以我们必须调整 Image 控件的属性,这是通过过拖曳的方式并不精准,直接修改属性会比较快些。

接着准备一张 480 x 800 的图片(注意:不能使用 GIF 格式的图档),在此我的图文件名为 SplashScreen.png 并把它放到一个 Images 目录里 。

然后调整 Image 控件的属性,设置Source 属性到这张图片。我们也可以将 SplashScreen.png 文件的 Build Action 项目属性Embedded Resource 调整为 Content,此举的主要目的是为了降低 WP7 组件的大小,以加快整体应用程序的加载速度。不过修改了文件的项目属性后,你的 Image 控件的 Source 属性也要跟着调整,且必须调整为相对于项目根目录绝对路径,用文字描述比较难懂,看图吧:

我们之所以要做“启动画面”,目的可能有两种:

  1. 因为应用程序需要初始化的时间太长,所以需要先显示一个简单的等待页面。而这也是 Windows Phone Application Certification Requirements 的要求之一(请参见 Technical Certification Requirements 页面的 5.2.1 Launch Time 这一条规则),而这也是学会设计启动画面如此重要的原因之一。
  2. 程序执行的太快,使用者没有 感觉,但要慢也要慢的优雅而从容。

要让 MainPage.xaml 正式开始执行之前,我们希望能先跳 SplashScreen.xaml 页面出来,我们使用的技巧是透过一个 Popup 窗口挡住 MainPage.xaml 页面,而这个 Popup 窗口里就是包裹着 SplashScreen.xaml 页面,以下是程序的写法:

     private BackgroundWorker backroungWorker;   
     private Popup myPopup;  
      // Constructor   
      public MainPage()    
      {    
          InitializeComponent();    
          myPopup = new Popup() { IsOpen = true, Child = new SplashScreen() }; 
          backroungWorker = new BackgroundWorker();   
          RunBackgroundWorker();
      } 
      private void RunBackgroundWorker()   
      {    
          backroungWorker.DoWork += ((s, args) =>    
          {    
              Thread.Sleep(3000);    
          }); 
          backroungWorker.RunWorkerCompleted += ((s, args) =>   
          {    
              this.Dispatcher.BeginInvoke(() =>    
              {    
                  this.myPopup.IsOpen = false;    
              });    
          }); 
          backroungWorker.RunWorkerAsync();   
      } 

我们让启动画面显示3秒钟,然后自动关闭。F5 就可以看到效果了。

启动页面做好了,接着我们进行下一项任务就是设置应用程序图标。

WMAppManifest.xml文件还定义了图标,背景图像和应用程序标题,你可以用PNG位图文件作为图标,默认图标文件是 ApplicationIcon.png,默认背景图像是Backgroud.png,你可以编辑XML代码或在项目属性的“应用程序”标签页修改这些属 性的值。

今天我学到了如何有时后 GUI 接口不见得最方便,有时后手动修改 XAML 或调整属性值比用图形接口来拖曳来的方便。WP7 并不支持 GIF 图档(这是有专利的图形格式),使用时应该避免使用 GIF 图文件,否则看不到图片你还会觉得是 WP7 的 Bug。也学到可以将 SplashScreen.png 图文件的 Build Action 项目属性从 Embedded Resource 调整为 Content,这样可以降低 WP7 组件 (assembly) 的大小,以加快整体应用程序的加载速度。学到了如何正确的使用 Popup 来显示启动画面,并通过 BackgroundWorker 的后台作业来设定固定时间后自动关闭启动画面。最后后面还学习了如何设定应用程序图标和背景图等。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端知识分享

第136天:Web前端面试题总结(理论)

  a. 请求数量:合并脚本和样式表,CSS Sprites,拆分初始化负载,划分主域

63240
来自专栏韩东吉的Unity杂货铺

零基础入门 4: 窗口介绍(完)

上一篇将Unity里几个比较重要的窗口先进行了讲解,以及如何自定义窗口布局,不知道大家都消化的怎么样,今天这篇窗口介绍,将把剩余window的窗口一一进行介绍。

17110
来自专栏nice_每一天

IntelliJ Idea 常用快捷键 列表(实战终极总结!!!!)

开始从eclipse转向intellij idea,记下这些实用快捷键,以便使用查询。

5.4K50
来自专栏程序员的SOD蜜

使用CefSharp开发一个12306“安心刷票弹窗通知”工具

有需求就要改进 最近两年没有在春节回家过年了,主要是票太难买,虽然之前写了一个12306“无声购票弹窗”工具,解决了抢票问题,但是全家老小一起回去还是很累,干脆...

628100
来自专栏落影的专栏

直播APP的性能优化-礼物篇

介绍 记录、总结开发遇到一些问题,大家一起交流学习。 这次带来,对直播APP性能优化的总结,以QA的形式总结。 欢迎关注文集-直播Live 实现方式 1、Q:...

39960
来自专栏美丽应用

SkyOlin助手:使应用窗口化的黑科技

23730
来自专栏HT

基于 HTML5 的 Web SCADA 报表

背景 最近在一个 SCADA 项目中遇到了在 Web 页面中展示设备报表的需求。一个完整的报表,一般包含了筛选操作区、表格、Chart、展板等多种元素,而其中的...

62090
来自专栏IMWeb前端团队

setTimeout的那些事

如果懂setTimeout,可以直接看第3节,前面两节也可以当段子看一下。 如果不是很懂setTimeout,看下1,2两节应该会有一些收获。 1 Java...

31100
来自专栏進无尽的文章

基础篇-app上传小准备及上架后搜索不显示

        app上传中会需要准备一些文件,如 icon图标,launch Image ,itunes Contect 中还需要上传不同尺寸的屏幕截图等,下...

25420
来自专栏菩提树下的杨过

silverlight3的"伪"3D续--图片横向轮换

上一篇里,已经知道了“伪3D”是怎么回事,今天结合以前的做的图片广告轮换,又弄了一个图片切换的小东东,不知道以后有什么用,先贴在这里备份: 效果图: ? 因为s...

23190

扫码关注云+社区

领取腾讯云代金券