最近在开发UI的过程中,为了美化,通常会使用事先做好的PNG图片作为按钮的背景,在鼠标动作中显示不同的效果。
网上找了一下,看到的目前都是新建一个图片来实现,觉得不太好。于是自己摸索了一下,使用Graphic的Transform可以很好的实现这个功能,代码也很简单。
public class ImageChangePictureBox : PictureBox
{
/// <summary>
/// 需要显示的图片序号
/// </summary>
private int _ImageIndex = 0;
/// <summary>
/// 图片的间隔,X方向
/// </summary>
public int ImageOffset { get; set; }
protected override void OnPaint(PaintEventArgs pe)
{
if (IsDisposed) return;
if (Image != null && _ImageIndex > 0)
{
using (Matrix transform = pe.Graphics.Transform)
{
transform.Translate(-ImageOffset * _ImageIndex, 0);
pe.Graphics.Transform = transform;
}
}
base.OnPaint(pe);
}
protected override void OnMouseEnter(EventArgs e)
{
_ImageIndex = 1;
Invalidate();
base.OnMouseEnter(e);
}
protected override void OnMouseLeave(EventArgs e)
{
_ImageIndex = 0;
Invalidate();
base.OnMouseLeave(e);
}
protected override void OnMouseDown(MouseEventArgs e)
{
_ImageIndex = 2;
Invalidate();
base.OnMouseDown(e);
}
}
显示效果如下,当鼠标移动上去可以显示第二张图片了。