前言 在这里制作一个9宫格的小程序,如果超过9个,那么就自动翻页。翻页采用划动实现,并且有惯性作用。
原理 mobile手机里滑动效果主要是原理是支持屏幕的触摸,当我们按下、松开时系统分别可以捕捉到相应的坐标位置,然后动态的改变布局,从而达到划动的效果。 图型button
由于mobile还没有支持图片button,所以我们做出一个辅佐类,当按下、弹开时分别使用钢笔绘制不同的图片到屏幕。
Code using System; using System.Collections.Generic; using System.Text; using System.Drawing; using System.Windows.Forms; using System.Drawing.Imaging;
namespace iPhoneUI { public class ImageButton { internal Rectangle clientArea; internal Form owner; internal Bitmap image; internal Bitmap imageDown; internal bool pushed = false; internal Point location; internal Point start; internal int h=30,w=30; internal bool Enable = false; private double pressTime = Environment.TickCount; internal bool pushedOneTime = false;
public string Name {get;set;}
public bool IsPressedOneTime { get { return pushedOneTime; } set { pushedOneTime = value; } }
public event System.EventHandler Click; public event System.EventHandler DoubleClick;
public ImageButton(Form owner,int w,int h) { this.w = w; this.h = h; this.owner = owner; Attach(owner); } public ImageButton(Form owner,Point location) { this.owner = owner; Attach(owner); this.location = location; this.clientArea = new Rectangle(location.X, location.Y, h, w); }
public Point Location { set { this.location = value; this.clientArea = new Rectangle(location.X, location.Y, w, h); } get { return location; } }
public Bitmap Image { get { return image;} set { image = value; if (image != null) { clientArea = new Rectangle(location.X, location.Y, image.Width, image.Height); } } }
public Bitmap ImageDown { get { return imageDown;} set { imageDown = value; } } public bool HitTest(int x, int y) { return clientArea.Contains(x, y); }
private void Attach(Form owner) { owner.MouseDown += new MouseEventHandler(owner_MouseDown); owner.MouseUp += new MouseEventHandler(owner_MouseUp); owner.DoubleClick += new EventHandler(owner_DoubleClick); }
void owner_DoubleClick(object sender, EventArgs e) { }
public virtual void owner_MouseUp(object sender, MouseEventArgs e) { if (!Enable) return;
if (pushed) { using (Graphics gx = owner.CreateGraphics()) { this.pushed = false; this.Paint(gx); owner.Invalidate(); } pushed = false;
if ((Environment.TickCount - pressTime) < 100) { if (Click != null) Click(this, e); } }
// SendMessage(ButtonCode, "Button Pressed"); }
public virtual void owner_MouseDown(object sender, MouseEventArgs e) { if (!Enable) return;
if (this.HitTest(e.X, e.Y)) { using (Graphics gx = owner.CreateGraphics()) { this.pushed = true; IsPressedOneTime = true; this.Paint(gx);
if ((Environment.TickCount - pressTime) < 300) { if (DoubleClick != null) DoubleClick(this, e); }
pressTime = Environment.TickCount; } start = new Point(e.X, e.Y); } } public void Paint(Graphics gx) { if (!Enable) return; //gx.Clear(Color.White);
ImageAttributes attrib = new ImageAttributes(); Color color = GetTransparentColor(image); attrib.SetColorKey(color, color);
if (!pushed || imageDown == null) gx.DrawImage(image, clientArea, 0, 0, clientArea.Width, clientArea.Height, GraphicsUnit.Pixel, attrib); else { gx.DrawImage(imageDown, clientArea, 0, 0, clientArea.Width, clientArea.Height, GraphicsUnit.Pixel, attrib); } Brush b = new SolidBrush(Color.Black); int txtX=clientArea.Location.X; if(Name.Length<5)//右移5个PIX txtX+=5; gx.DrawString(this.Name, owner.Font, b, txtX, clientArea.Bottom);
}
internal Color GetTransparentColor(Bitmap image) { return image.GetPixel(0, 0); } } }
当mouse按下时,判断是否在图像所在的区域内,就执行按下时绘制图像。并且判断两次按下时间小于300毫秒,就认为是双击,发出注册双击事件。当mouse弹起时,恢复按前的图像,并且如果按下时间间隔不超过100毫秒,认为是单击。
初使化按扭
Code 1<?xml version="1.0" standal?> 2<DocumentElement> 3 <menu> 4 <Name>测试1</Name> 5 6 <path>Chat 46x46.bmp</path> 7 <pressPath>Chat 46x46.bmp</pressPath> 8 </menu> 9 <menu> 10 <Name>测试1a</Name> 11 12 <path>Chat 46x46.bmp</path> 13 <pressPath>Chat 46x46.bmp</pressPath> 14 </menu> 15 <menu> 16 <Name>测试1b</Name> 17 18 <path>lock 46x46.bmp</path> 19 <pressPath>lock 46x46_pressed.bmp</pressPath> 20 </menu> 21 <menu> 22 <Name>测试1c</Name> 23 24 <path>Internet Explorer 46x46.bmp</path> 25 <pressPath>Internet Explorer 46x46_pressed.bmp</pressPath> 26 </menu> 27 <menu> 28 <Name>测试1d</Name> 29 30 <path>Close 46x46.bmp</path> 31 <pressPath>Close 46x46_pressed.bmp</pressPath> 32 </menu> 33 <menu> 34 <Name>测试1e</Name> 35 36 <path>Chat 46x46.bmp</path> 37 <pressPath>Chat 46x46_pressed.bmp</pressPath> 38 </menu> 39 <menu> 40 <Name>测试1f</Name> 41 42 <path>Camera 46x46.bmp</path> 43 <pressPath>Camera 46x46_pressed.bmp</pressPath> 44 </menu> 45 <menu> 46 <Name>测试1g</Name> 47 48 <path>Camera 46x46.bmp</path> 49 <pressPath>Camera 46x46_pressed.bmp</pressPath> 50 </menu> 51 <menu> 52 <Name> 53 测试1h 54 </Name> 55 56 <path>Camera 46x46.bmp</path> 57 <pressPath>Camera 46x46_pressed.bmp</pressPath> 58 </menu>
|