2007-3-18   Wince5.0自定义ToolBar

做WinCE的开发时，碰到一很头疼的事（Coolpad机器）。它的菜单很难看，字体很大，样式也太简单，就选用了 CF2.0中的ToolBar控件。用户使用后反应很大，普遍说是用不方便，因为Toolbar没有文本，只有图标。所以自定义一个Toolbar，这里不方便提供所有源码，只是讲述开发过程中碰到的几点问题（主要问题），相信对其他朋友有帮助。

自定工具条ToolBarEx，我是模仿vs2005的工具条做，增加了文本功能。

1.高度25像素，图标16×16；

2.vs2005的工具条中，头部有4个点，我模仿做时，发现是8个方块（4*4像素），4个灰色方块，4个白色方块；白色方块向右下偏移1像素，这样画出来，就跟vs2005的工具条效果一致了；

3.分隔线(Separator button)。v s2005的工具条，分隔线高度20像素，颜色我选用的是Gray；

4.背景色选用渐变的颜色，CF2.0中没有提供渐变的GDI+方法，所以采取调用GDI的API函数实现，代码如下：

WinApi.DrawNiceRectangle(hdc, frame); 
internal class WinApi 
{ 
private const uint 
  GRADIENT_FILL_RECT_H = 0x00000000, 
  GRADIENT_FILL_RECT_V = 0x00000001, 
  GRADIENT_FILL_TRIANGLE = 0x00000002, 
  GRADIENT_FILL_OP_FLAG = 0x000000ff; 
  
[DllImport("coredll")] 
private static extern bool GradientFill( 
  IntPtr hdc,   // handle to DC 
  TRIVERTEX[] pVertex,// array of vertices 
  uint dwNumVertex, // number of vertices 
  ref GRADIENT_RECT pMesh,   // array of gradients 
  uint dwNumMesh,   // size of gradient array 
  uint dwMode   // gradient fill mode 
); 
  
internal static void DrawNiceRectangle(IntPtr graphPort,
 Rectangle Frame, Color a, Color b) 
{ 
// Draw from whitish blue at the top, to a light blue at the bottom 
//TRIVERTEX[] vert = new TRIVERTEX[]{ 
//new TRIVERTEX(Frame.Left,Frame.Top,0xff00,0xff00,0xffff,0xff00), 
//new TRIVERTEX(Frame.Right,Frame.Bottom,0x0000,0x0000,0xff00,0xff00)}; 
TRIVERTEX[] vert = new TRIVERTEX[]{ 
new TRIVERTEX(Frame.Left,Frame.Top,ToColor16(a.R),ToColor16(a.G),
ToColor16(a.B),(ushort)(0)), 
new TRIVERTEX(Frame.Right,Frame.Bottom,ToColor16(b.R) ,ToColor16(b.G ),
ToColor16(b.B) ,(ushort)(0))}; 
  
GRADIENT_RECT gRect = 
new GRADIENT_RECT(0, 1); 
  
WinApi.GradientFill(graphPort, vert, 2, ref gRect, 1, WinApi.GRADIENT_FILL_RECT_V); 
} 
  
private static ushort ToColor16(byte value) 
{ 
return (ushort)((int)value << 8); 
} 
 
 
internal static void DrawNiceRectangle(IntPtr graphPort, Rectangle Frame) 
{ 
Color a = Color.FromArgb(239, 239, 239); 
Color b = Color.FromArgb(139, 139, 139); 
DrawNiceRectangle(graphPort, Frame, a, b); 
} 
} 

这里采取的是从上至下的渐变，因为渐变高度的问题，所以有些颜色可能看不到效果，测试时可以调整高度，会看到效果。 

5.点击ToolBarExButton时的效果，vs2005中的效果是深色的边框(border  color)+比边框色浅一些的颜色，代码如下：

//我采取的border color 
Color border = Color.FromArgb(0, 0, 128); 
//计算填充色 
Color fillColor = GetHighlightColor(border); 
    
//原理就是将指定的Color淡化,请注意2个系数相加必须=1；用户可以自己调整系数，调节颜色的深度 
private Color GetHighlightColor(Color cl) 
{ 
int num1 = (int)(cl.R * 0.2); 
int num4 = (int)(cl.G * 0.2); 
int num7 = (int)(cl.B * 0.2); 
int num2 = (int)(Color.White.R * 0.8); 
int num5 = (int)(Color.White.G * 0.8); 
int num8 = (int)(Color.White.B * 0.8); 
return Color.FromArgb(num1 + num2, num4 + num5, num7 + num8); 
} 

6.  当Enabled=false时的效果，这个当初也是困扰我很久，如何灰显图标，因为我一直不愿意做个工具条，还用2套图标（正常和灰显）；灰显图标的方法：

private static bool GrayImage(Bitmap b) 
{ 
BitmapData bmData = b.LockBits(new Rectangle(0, 0, b.Width, b.Height), 
 ImageLockMode.ReadWrite, PixelFormat.Format24bppRgb); 
int stride = bmData.Stride; 
System.IntPtr Scan0 = bmData.Scan0; 
unsafe 
{ 
byte* p = (byte*)(void*)Scan0; 
int nOffset = stride - b.Width * 3; 
byte red, green, blue; 
for (int y = 0; y < b.Height; ++y) 
{ 
for (int x = 0; x < b.Width; ++x) 
{ 
blue = p[0]; 
green = p[1]; 
red = p[2]; 
p[0] = p[1] = p[2] = (byte)(.299 * red + .587 * green + .114 * blue); 
p += 3; 
} 
p += nOffset; 
} 
} 
b.UnlockBits(bmData); 
return true; 
} 

7.  ToolBarExButtonClick事件，上面所做的都是绘制工具条，现在进入正题，如何触发按钮单击事件。我是计算鼠标按下时的位置，然后通过每个ToolBarExButton的Rect判断是否为某个button，是则抛出事件。

8.  ToolBarEx代码层次，仅供参考。

ToolBarEx;

ToolBarExButton;

ToolBarExButtonClickEventArgs;

ToolBarExButtonCollection;

ToolBarExButtonStyle；

ToolBarExTextAlign;

ToolBarExDelegate;

9.效果如下：(通过PDA抓得图，有点失真，不过大致效果还能看到)

(ToolBarEx效果)                     (CF2.0中 ToolBar效果)

题外话，大家可以看到上面有一pda地图的界面。近半年来一直在搞移动地图引擎的开发，希望和从事相关行业的朋友交流，特别是移动地图的效率问题，大地图文件时效率问题。