前言
在这里制作一个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>