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

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

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

image

我们就是要制作一个二维码生成器应用程序啦，选用芒果应用程序 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 控件的属性，这是通过过拖曳的方式并不精准，直接修改属性会比较快些。

image

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

image

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

image

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

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代码或在项目属性的“应用程序”标签页修改这些属 性的值。

image

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