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中的一些主要实现方式。