Windows Mobile UI 设计分析和总结

Windows[MobileUIaiI

WindowsMobileUI设计

(Smartphone和PocketPC

.Net版)

目录

i/ii

WindowsMobileUI设iI

一、概述；

二、PocketPCUI设计；

三、SmanPhoneUI设计;

四、参考。

概述：

WindowsMobile是基于WindowsCE操作系统的，是针对小内存和有限资源的移动设

备而进行的开发，因此在开发过程中同PC的开发有很大的区别。特别是UI的开发，

2/11

WindowsMobileUI设iI

要针对手持设备进行开发，回时要符合于持设备的习惯操作。卜面就我在开发过程中对

UI开发的认识进行一些叙述。

PocketPCUI设计：

1、标准控件的使用：

PocketPC可以使用.NetCompactFramework中的所有控件，有

Listview,TreeViewButtonjLabel等等，支持的所有控件可见MicrosoftVisualStudio.NET2003

中或可查看msdn进行查看。所有控件的用法可查询msdn0下面就InputPanel控件和

Panel控件的主要用途进行一些简单的叙述。

(1)InputPanel控件：

由于大部分的PocketPC设备都是不带键盘的，因些所有的输入全靠SIP(Soft

InputPanel)来进行噪作。在.Net的程序中只要加Menubar,就会出现SIP的按纽。但是

在SIP出现之后就会覆盖屏幕的下面。这样当在SIP的显示的地方有控件或者是有显

示内容时就会被覆盖抻，不能进行查看或者说操作。在实际的编程过程中可以采用两

种方法来进行：第一种，也是最简单的一种，在设计程序的时候把SIP的位置给空出

来；第二种，就是通过在Form中力口入InputPane控件，在InputPaneWEnableChange

事件中处理当InputPanel的状态发生变化时视图所做的变化操作。

如图所示:

代码示例:

privatevoidinpSIP_EnabledChanged(objectsender,System.EventArgse)

(

if(inpSIP.Enabled)

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

)

else

(

tabControl.Height=246：

)

)

3/11

WindowsMobileUI设iI

另外还有•种情况就是我不想在Form中增加Inpuipanel控件，但在我还想在当我

的输入框取得焦点时能够显示SIP,这种情况的解决方法是我们通过P/Invoke技术，调用

本地的SIP操作函数SipShowIMO来实现，具体的代码如下：

classSip

(

///<summary>

///SIPconstants(asdefinedinSIPAPI.h)

///</summary>

privateconstintSIPFON=0x00000001;

privateconstintSIPF_OFF=0x00000000:

///〈summary〉

///P/InvokenativeApiSipShowIM

///</summary>

///<paramname="dwF1ag*></param>

///<returns></returns>

[DllImportCcoredll.dll*,EntryPoint=*SipShowIM*)]

privateexternstaticboolshowSIP(intdwFlag);

publicstaticboolshowSIP()

(

returnshowSIP(Sip.SIPFON);

}

publicstaticboolhideSIPO

(

returnshowSIP(SIPF_OFF);

}

)

在文件的顶部增加usingSystem.Runtime.InteropServices;

使用方法为：比如对于TexBox来说，当TextBox取得焦点时，在TextBox控件的GotFocus

事件中实现SIP的显示，在LostFocus中实现SIP的隐藏，代码如下：

privatevoidtextBox_GotFocus(objectsender,System.EventArgse)

(

Sip.showSIP();

}

privatevoidtextBox_LostFocus(objectsender,System.EventArgsc)

(

Sip.hideSIPO;

}

(2)Panel控件的应用

Panel控件是一个容器，它可以包含其它的控件，主要应用有：1)

我最多的应用就是当在一个Form中可能会有几种显示样式时，我就增加几个

Panel,每个Panel中加入其所需的控件，当我需要显示某一样式时通过

4/1i

WindowsMobileUI设iI

panell.Visible=false;

pancl2.Visible=true;来实现。

2)设置一些不能直接设置背景色的控件的背景色。比如设置Label控件的背景色.

把Label控件改入到Panel控件当中，设置Panel的背景色就可以了。

3)实现Form的滚动，当一个Form要显示很多控件时，就会出现需要滚动显示，对

P.Net2003来说不能实现自动的滚动，这就要借助于Panel来实现。关于本点的实现可

以参见3、Form滚动的实现。

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

(1)Form最小亿和关闭的实现：

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

this.MinimizeBox=false;〃关闭

this.MinimizeBox=true;//最小化

(2)非全屏Form的实现：

新建一个Form,分别设置属性FormBordcrStyl?,Contro1Box等的值如下所示：

this.FormBorderStyle=System.Windows.Forms.EomBorderStyle.None:

this.ControlBox=false;

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

然后在Load事件中设置Form显示的位置,如下例(Form居中显示)：

privatevoidFornl.oad(objectsender,System.EventArgse)

(

Rectanglescreen=Screen.PrimaryScreen.Bounds：

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

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

)

(3)Form的强制最小化实现：

首先重写Form的onGotFocus方法,然后查找窗体的窗I」，最后用ShowWindow(hwnd,

SW_MINIMIZE)来最小化窗口。

代码示例如下：

usingSystem.Runtime.InteropServices;

[DllImport("CorcDlI")]

publicstaticexternIntPtrFindWindow(stringclassName,stringWindowsName);

[DI1Import(*CoreDlL*)]

publicstaticexternboolShowWindow(IntPtrhwnd,intnCmdShow);

constintSWJITNIMfZE=6;

protectedoverridevoidOnGotFocus(EventArgse)

(

IntPtrhwnd=FindWindow(nul1,this.Text);

ShowWindow(hwnd,SWMINIMIZE);

base.OnGotFocus(e);

)

(4)父窗口与子窗口之间的关系：

在.Net里当一个窗口产生一个子窗口后，如果常时间不操作或者是一小心回到home

screen,这时当你再打开程序关闭子窗口时，会返回到homescreen,而不是你想要的

5/11

WindowsMobileUI设iI

父窗口，对于这种情况的处理，最好的方法是把父窗口的指斜传入到子窗口中，然后在子窗

口关闭时，在子窗口的Closing事件中调用父窗口的show方法来显示父窗口，代码示例

片段如下：

父窗口：

publicclassForml:System.Windows.Forms.Form

privatevoidmenuItem3_Click(objectsender,System.EventArgse)

{

CustomerFormfmCustom=newCustomerForm(this);

fmCuston.ShowDialogO;

this.textBoxl.Focus()：//这点很重要

)

)

子窗口：

publicclassCustomerForm:System.Windows.Forms.Form

(

privateFormparentForm;

publicCustomerForm(FormparentForm)

{

InitializeComponent();

this.parentEorm=parentEorm;

)

privatevoidCustomerFormClosing(objectsender,CancelEventArgse)

{

parentForm.Show();

)

)

注：我见意子窗口的产生最后用模态对话框，即ShowDialog,这样可以避免过多的子

窗口的产生，造成内存的浪费。另外，对于窗口返回后，指定要接受焦点的控件，

并且这点很重要.

3、Form滚动的实现：

由于.Net的Form不支持自动滚动，因些要实现Form的滚动要借助于Panel来实现。

在Form中加入•个Panel控件，加入•个vScrollBar控件，设置vScrollBarl控件的高度

为Foi川的而度或者说你Panel的设度，如果你的滚动范围不是整个FOE,设为Panel的高度,

反之也可为Form的高度。然后根据需要设置vScrollBar的LargeChange和Maximum属性，

通过在vScrollBar的ValueChanged事件中设置Panel的位置来实现滚动。如下所示：

privatevoidvScrollBarVaiueChanged(objectsender,System.EventArgse)

(

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

}

具体的可参见\\192.168.20.199机器上VSS下的windowsmobile\sample中的

CustomForm.cs文件，此示例是Smartphon。的，但也可用于PocketPC,对于Smartphone

6/11

WindowsMobileUI设iI

里还有另•种实现方法，见（ScrollForm.cs）,稍后将会详细介绍。

4、PocketPCUI的整体设计：

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

用手操作，且不会出现误操作，比如：bunon控件不能过小且紧挨等。当某一功能有

过多的操作时，可以将一些常用的或者说主要的操作放到首页面上，然后增加一个

More或者高级按按钮来显示其它的操作。也可以借助TabContW来进行分类显示。

如下图所示:

设置小«6:480♦加《6:48。

连接

单位设置

添加需调制觞调署;车尾

流加弱的VPN股条黑连售

沿蕾龙的代理肥冬器

任务高级任务高级

母

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

比如：设置-＞区域设置如图:

国设置吨*6:55。阖设蚩吨“7:01。

区域设置

短日期：05-11-21

长日期：2005年11月21日

短日期：

日期分隔符:

长日期：

日历类型：

区域数字货币时间日期区域数字货币时间日期

（3）尽量对控件进行动态的创建。由于现在的PockelPC增加了横屏显示，以及高分

辨率的出现，这样为了便于程序能够运行在各种各样PocketPC上，在开发的过程中要

尽量的考虑这些因素。这点也是今后开发过程中最锯要注意的一点。

三、SmartphoneIII设计：

Smartphone的U1设计相对于PocketPC来说又有一定的差异，首先Smartphone

7/11

WindowsMobileUI设iI

不支持触笔的操作，增加了键盘操作，并且所有的操作都是通过键盘来完成。这样就

限制「Smartphone对一些控件的支持度。在Smartphone的开发中有许多控件不支持，

比如：Butlon,TabControl,Inpulpanel等等。所有在MicrosoftVisualStudio.NET2003的

Toolsbox中显示恢色的控件我们都不能使用，对「一些特定的控件要我们自己来进行

开发。

(1)SmartphoneMenuBar设计习惯。

Smartphone的MenuBar有两个hem,左键主要是常用操作，并且不支持子菜单，右键为

菜单项，可以在其中设置任何菜单操作。另外，我们可以在一个Form中设置多个主菜单,

当根据需要时进行切换。切换方式为：

this.Menu=this.mainMenuK〃mainMenul为你当前需要的menu。

(2)设置基于WindowsMobile的Smartphone输入模式：

代码示例如下：

publicclassWin32Pinvoke

(

publicenumInputMode

(

Spell=0,

T9=1,

Numbers=2,

Text=3

)

//Constantsrequiredforinterop

constintGWCHILD=5:

constuintEM_SETINPUTMODE=OxOODE;

[DllImport(*COEG<111.dll",EntryPoint=*G©tCaptur^/，)]

privatestaticexternIntPtrGctCapturcO;

[DI1Import(*coredl1.dll",EntryPoint=*GetWindowv)]

privatestaticexternIntPtrGetWindow(IntPtrhVnd,intuCmd)：

[DI1Import(*coredll.dll*,EntryPoint=*SendMessage*)]

privatestaticexternuintSendMessage(IntPtrhVnd,uintmsg,uintwParam,

uint1Param);

publicstaticvoidSetInputMode(ControlCtrl,InputModemode)

(

//Getthehandleforthecurrentcontrol

Ctrl.Capture=true;

IntPtrh=GetCapture();

Ctrl.Capture=false;

//GetthechiIdwindowforthecontrol

IntPtrhEditbox=GetWindow(h,GW_CHILD);

//Settheinputmode

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

8/11

WindowsMobileUI设iI

)

}

使用方法如下：

privatevoidtextBox_GotFocus(objectsender,System.EventArgse)

(

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

}

(3)Smartphone中控件的Tab顺序：

Smartphone中控件的Tab顺序和加入控件的顺序一致，比如：有

件:TextBoxl,TextBox2,Tex【box3我们想要Tab顺序为3->2->1,那么我们在Form中加

入的顺序就应该为

this.Controls.Add(this.TextBox3);

this.Controls..Add(this.TextBox2);

this.Controls.Add(this.TextBoxl);

对于VS2003自动生成的代码，我们需要在InilializeComponenlO函数中手动更改他们的

顺序。

(4)Form滚动的实现：

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

Label滚动；另一种是有接受输入焦点的控件的实现，我称为TextBox滚动。

1)Label滚动：见(PockeiPCUI设计第三点Form滚动的实现)这点最主要的一

点是焦点要在VScrollBar上，在Form的Load事件中要指定vScrollBar.Focus0»这样

就可以响影导航键里上下键的操作。

2)TexlBox滚动：同样是利用Panel和VScrollBar来实现，不同的地方就是当每次

可接受焦点的控件接受到焦点时，要计算当前Panel的显示位置。

代码示例：

publicScrollForraO

(

//

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

//

InitializeComponenl();

//

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

//

this.vScrollBarl.Height=this.ClientSize.Height;

this.vScrollBarl.Minimum=0;

this.vScrollBarl.Maximum=this.panel1.Height-this.ClienlSize.Height;

)

///<summary>

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

///</summary>

///<paramname"topSender")当前接受焦点的控件的顶层控件，比如一个TextBox上的解释性

9/11

WindowsMobileUI设iI

Label控件〈/param)

///<paramname='boilomSender”》当前接受焦点的控件〈/param)

privatevoidSetScrollPosition(objecttopSender,objectbottomSender)

(

//getboundsofcontrolstofocuson

inttop=((Conti'ol)topSender).Top-2;

intbottom=((Contro1)bo11omSender).Bottom;

intheight=bottom-top;

//getscrollposition

intpos=this.vScrollBarl.Value;

//checkifcontroliswithinview

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

{

//donothing

return;

)

//checkifcontrolisaboveview

if(bottom<pos+height)

{

//scrolIuptoview,ensuringthetopSenderisfirstvisibleonform

this.vScrollBarl.Value=top;

)

//checkifcontrolisbe1owview