Windows Mobile UI 设计

一、概述：
      Windows Mobile 是基于Windows CE操作系统的，是针对小内存和有限资源的移动设备而进行的开发，因此在开发过程中同PC的开发有很大的区别。特别是UI的开发，要针对手持设备进行开发，同时要符合手持设备的习惯操作。下面就我在开发过程中对UI开发的认识进行一些叙述。

二、Pocket PC UI 设计：(用户界面设计)
1、标准控件的使用：
     Pocket PC 可以使用.Net Compact Framework中的所有控件，有Listview,TreeView,Button,Label等等，支持的所有控件可见Microsoft Visual Studio .NET 2003中或可查看msdn进行查看。所有控件的用法可查询msdn。下面就InputPanel控件和Panel控件的主要用途进行一些简单的叙述。
     （1）InputPanel控件：
       由于大部分的Pocket PC 设备都是不带键盘的，因些所有的输入全靠SIP(Soft Input Panel)来进行操作。在.Net的程序中只要加Menubar,就会出现SIP的按纽。但是在SIP出现之后就会覆盖屏幕的下面。这样当在SIP的显示的地方有控件或者是有显示内容时就会被覆盖掉，不能进行查看或者说操作。在实际的编程过程中可以采用两种方法来进行：第一种，也是最简单的一种，在设计程序的时候把SIP的位置给空出来；第二种，就是通过在Form中加入InputPane控件，在InputPane的EnableChange事件中处理当InputPanel的状态发生变化时视图所做的变化操作。
如图所示：
      
代码示例:
    private void inpSIP_EnabledChanged(object sender, System.EventArgs e)

         {

              if (inpSIP.Enabled)

              {

                   tabControl.Height = 246 - inpSIP.Bounds.Height;

              }

              else

              {

                   tabControl.Height = 246;

              }

         }

另外还有一种情况就是我不想在Form中增加Inputpanel控件，但在我还想在当我的输入框取得焦点时能够显示SIP,这种情况的解决方法是我们通过P/Invoke技术，调用本地的SIP操作函数SipShowIM()来实现，具体的代码如下：
class Sip
{
     ///<summary>

         /// SIP constants (as defined in SIPAPI.h)

         ///</summary>

         private const int SIPF_ON = 0x00000001;

         private const int SIPF_OFF = 0x00000000;

 

         ///<summary>

         /// P/Invoke native Api SipShowIM

         ///</summary>

         ///<param name="dwFlag"></param>

         ///<returns></returns>

         [ DllImport("coredll.dll", EntryPoint="SipShowIM") ]

         private extern static bool showSIP(int dwFlag);

 

         public static bool showSIP()

         {

              return showSIP(Sip.SIPF_ON);

         }

 

         public static bool hideSIP()

         {

              return showSIP(SIPF_OFF);

}

}
     在文件的顶部增加using System.Runtime.InteropServices；

     使用方法为：比如对于TexBox来说，当TextBox取得焦点时，在TextBox控件的GotFocus事件中实现SIP的显示，在LostFocus中实现SIP的隐藏，代码如下：
private void textBox_GotFocus(object sender, System.EventArgs e)

     {

         Sip.showSIP();

     }

     private void textBox_LostFocus(object sender, System.EventArgs e)

     {

Sip.hideSIP();
}
     （2）Panel控件的应用
     Panel控件是一个容器，它可以包含其它的控件，主要应用有：
     1）我最多的应用就是当在一个Form中可能会有几种显示样式时，我就增加几个Panel,每个Panel中加入其所需的控件，当我需要显示某一样式时通过
     panel1.Visible = false;

panel2.Visible = true; 来实现。
      2）设置一些不能直接设置背景色的控件的背景色。比如设置Label控件的背景色.把Label控件改入到Panel控件当中，设置Panel的背景色就可以了。

     3）实现Form的滚动，当一个Form要显示很多控件时，就会出现需要滚动显示，对于.Net 2003来说不能实现自动的滚动，这就要借助于Panel来实现。关于本点的实现可以参见 3、Form滚动的实现。

 

2、Form中的一些主要实现方式：

    （1）Form最小化和关闭的实现：

       主要是得用Form属性MinimizeBox来实现,

       this.MinimizeBox = false; // 关闭
       this.MinimizeBox = true;  //最小化
    （2）非全屏Form的实现:

新建一个Form，分别设置属性FormBorderStyle，ControlBox等的值如下所示：

this.FormBorderStyle = System.Windows.Forms.FormBorderStyle.None;

this.ControlBox = false;

this.ClientSize = new System.Drawing.Size(224, 88);  // 设置Form的大小

然后在Load事件中设置Form显示的位置,如下例（Form居中显示）:

private void Form_Load(object sender, System.EventArgs e)

         {

              Rectangle screen = Screen.PrimaryScreen.Bounds;

              this.Location = new Point((screen.Width - this.Width) / 2,

                   (screen.Height - this.Height ) / 2);

}

（3）Form的强制最小化实现:

首先重写Form的onGotFocus方法，然后查找窗体的窗口，最后用ShowWindow(hwnd, SW_MINIMIZE)来最小化窗口。

代码示例如下:

using System.Runtime.InteropServices;

[DllImport("CoreDll")]

public static extern IntPtr FindWindow(string className,string WindowsName);

[DllImport("CoreDll")]

public static extern bool ShowWindow(IntPtr hwnd,int nCmdShow);

const int SW_MINIMIZE = 6;

protected override void OnGotFocus(EventArgs e)

{

IntPtr hwnd = FindWindow(null, this.Text);

ShowWindow(hwnd, SW_MINIMIZE); 

base.OnGotFocus(e);

}

（4）父窗口与子窗口之间的关系：

在.Net里当一个窗口产生一个子窗口后，如果常时间不操作或者是一小心回到home screen，这时当你再打开程序关闭子窗口时，会返回到home screen，而不是你想要的父窗口，对于这种情况的处理，最好的方法是把父窗口的指针传入到子窗口中，然后在子窗口关闭时，在子窗口的Closing事件中调用父窗口的show方法来显示父窗口，代码示例片段如下：

父窗口：

public class Form1 : System.Windows.Forms.Form

{

……..

private void menuItem3_Click(object sender, System.EventArgs e)

             {

                   CustomerForm fmCustom = new CustomerForm(this);

                   fmCustom.ShowDialog();

                   this.textBox1.Focus();  // 这点很重要

}

}

子窗口:

public class CustomerForm : System.Windows.Forms.Form

{

     private Form parentForm;

              public CustomerForm(Form parentForm)

              {

                   InitializeComponent();

 

                   this.parentForm = parentForm;

     }

private void CustomerForm_Closing(object sender, CancelEventArgs e)

              {

                   parentForm.Show();

     }

}

注：我见意子窗口的产生最后用模态对话框，即ShowDialog，这样可以避免过多的子窗口的产生，造成内存的浪费。另外，对于窗口返回后，指定要接受焦点的控件，并且这点很重要。

3、Form滚动的实现：

由于.Net 的Form不支持自动滚动，因些要实现Form的滚动要借助于Panel来实现。在Form中加入一个Panel控件，加入一个vScrollBar控件，设置vScrollBar1控件的高度为Form的高度或者说你Panel的设度，如果你的滚动范围不是整个Form，设为Panel的高度，反之也可为Form的高度。然后根据需要设置vScrollBar的LargeChange和Maximum属性,通过在vScrollBar的ValueChanged事件中设置Panel的位置来实现滚动。如下所示：
private void vScrollBar_ValueChanged(object sender, System.EventArgs e)

     {

         vScrollBar.Top = -vScrollBar.Value * 44;  // 44为每滚动一次Panel要移动的大小。

}
具体的可参见\\192.168.20.199机器上VSS下的windows mobile\sample中的CustomForm.cs文件,此示例是Smartphone的，但也可用于Pocket PC，对于Smartphone里还有另一种实现方法，见（ScrollForm.cs），稍后将会详细介绍。

4、Pocket PC UI的整体设计:

       （1）由于mobile的资源有限，因此在UI的设计时，控件不要过多，同是还要保证可以

     用手操作，且不会出现误操作，比如：button控件不能过小且紧挨等。当某一功能有过多的操作时，可以将一些常用的或者说主要的操作放到首页面上，然后增加一个More或者高级按按钮来显示其它的操作。也可以借助TabControl来进行分类显示。

如下图所示：

    

       （2）尽量减少输入操作，而增加方便用户操作的选择操作。

       比如：设置->区域设置如图：

        

（3）尽量对控件进行动态的创建。由于现在的Pocket PC 增加了横屏显示，以及高分辨率的出现，这样为了便于程序能够运行在各种各样Pocket PC上，在开发的过程中要尽量的考虑这些因素。这点也是今后开发过程中最需要注意的一点。

 

三、           Smartphone UI 设计：
    Smartphone的UI设计相对于Pocket PC 来说又有一定的差异，首先Smartphone不支持触笔的操作，增加了键盘操作，并且所有的操作都是通过键盘来完成。这样就限制了Smartphone对一些控件的支持度。在Smartphone的开发中有许多控件不支持，比如：Button,TabControl,Inputpanel等等。所有在Microsoft Visual Studio .NET 2003的Tools box中显示恢色的控件我们都不能使用，对于一些特定的控件要我们自己来进行开发。
（1）Smartphone MenuBar设计习惯。
Smartphone 的MenuBar有两个Item，左键主要是常用操作，并且不支持子菜单，右键为菜单项，可以在其中设置任何菜单操作。另外，我们可以在一个Form中设置多个主菜单，当根据需要时进行切换。切换方式为：
         this.Menu = this.mainMenu1;  // mainMenu1为你当前需要的menu。

（2）设置基于 Windows Mobile 的 Smartphone 输入模式：
代码示例如下：

public class Win32Pinvoke

     {

         public enum InputMode

         {

              Spell = 0,

              T9 = 1,

              Numbers = 2,

              Text = 3

         }

         // Constants required for interop

         const int GW_CHILD = 5;

         const uint EM_SETINPUTMODE = 0x00DE;

 

         [DllImport("coredll.dll", EntryPoint="GetCapture")]

         private static extern IntPtr GetCapture();

         [DllImport("coredll.dll", EntryPoint="GetWindow")]

         private static extern IntPtr GetWindow(IntPtr hWnd, int uCmd);

         [DllImport("coredll.dll", EntryPoint="SendMessage")]

         private static extern uint SendMessage(IntPtr hWnd, uint msg, uint wParam,

              uint lParam);

 

         public static void SetInputMode(Control ctrl, InputMode mode)

         {

              // Get the handle for the current control

              ctrl.Capture = true;

              IntPtr h = GetCapture();

              ctrl.Capture = false;

              // Get the child window for the control

              IntPtr hEditbox = GetWindow(h, GW_CHILD);

              // Set the input mode

              SendMessage(hEditbox, EM_SETINPUTMODE, 0, (uint)mode);

         }

}

使用方法如下:

private void textBox_GotFocus(object sender, System.EventArgs e)

     {

              Win32Pinvoke.SetInputMode(this.textBox,Win32Pinvoke.InputMode.Numbers);

}

（3）Smartphone中控件的Tab顺序:

Smartphone中控件的Tab顺序和加入控件的顺序一致，比如:有件:TextBox1,TextBox2,Textbox3,我们想要Tab顺序为3->2->1，那么我们在Form中加入的顺序就应该为

this.Controls.Add(this.TextBox3);

              this.Controls.Add(this.TextBox2);

         this.Controls.Add(this.TextBox1);

对于VS2003自动生成的代码，我们需要在InitializeComponent()函数中手动更改他们的顺序。

 

（4）Form滚动的实现：

Smartphone的滚动的实现有两种方式：一种是没有接受输入焦点控件的实现，我称其为Label滚动；另一种是有接受输入焦点的控件的实现，我称为TextBox滚动。

1）Label滚动：见（Pocket PC UI 设计第三点Form滚动的实现）这点最主要的一点是焦点要在VScrollBar上，在Form的Load事件中要指定vScrollBar.Focus()，这样就可以响影导航键里上下键的操作。

2) TextBox滚动：同样是利用Panel和VScrollBar来实现，不同的地方就是当每次可接受焦点的控件接受到焦点时，要计算当前Panel的显示位置。

代码示例：

public ScrollForm()

         {

              //

              // Windows 窗体设计器支持所必需的

              //

              InitializeComponent();

 

              //

              // TODO: 在 InitializeComponent 调用后添加任何构造函数代码

              //

              this.vScrollBar1.Height = this.ClientSize.Height;

              this.vScrollBar1.Minimum = 0;

              this.vScrollBar1.Maximum = this.panel1.Height - this.ClientSize.Height;

}

///<summary>

         ///设置当前的显示位置.

         ///</summary>

///<param name="topSender">当前接受焦点的控件的顶层控件,比如一个TextBox上的解释性Label控件</param>

         ///<param name="bottomSender">当前接受焦点的控件</param>

         private void SetScrollPosition(object topSender, object bottomSender)

         {

              //get bounds of controls to focus on

              int top = ((Control)topSender).Top - 2;

              int bottom = ((Control)bottomSender).Bottom;

              int height = bottom - top;

 

              //get scroll position

              int pos = this.vScrollBar1.Value;

 

              //check if control is within view

              if (pos < top && bottom < (pos+this.ClientSize.Height))

              {

                   //do nothing

                   return;

              }

 

              //check if control is above view

              if (bottom < pos + height)

              {

                   //scroll up to view, ensuring the topSender is first visible on form

                   this.vScrollBar1.Value = top;

              }

 

              //check if control is below view

              if (bottom > (pos+this.ClientSize.Height))

              {

                   //scroll down to view, ensuring the bottomSender is last visible on form

                   this.vScrollBar1.Value = bottom - this.ClientSize.Height;

              }

 

              // Set the panel position on the form, to redraw the application

              this.panel1.Top = -this.vScrollBar1.Value;

 

              return;

         }

使用如下：

private void textBox1_GotFocus(object sender, System.EventArgs e)

         {

              SetScrollPosition(this.label1,sender);

}
（5）Form中的一些主要实现方式:

本节可参见Pocket PC UI 设计中的第二点Form中的一些主要实现方式。