WinForms下的SliderButtons设计

其实以前也做过这个东西，只不过以前的按钮在进行缩放的时候，过渡不是很自然，总是先往左去一点，然后才展开，看起来很勉强。于是，今天稍微改造了一下，自然多了，但是图片闪烁的问题一直没有能够解决，先发上图片。

中间那个变小的图像是鼠标移上去以后，慢慢变小的，效果还是蛮好的。

首先，设计这个东西，需要利用userControl，添加一个UserControl，然后具体的设计代码如下：

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Drawing;
using System.Data;
using System.Linq;
using System.Text;
using System.Windows.Forms;

namespace SlideButtons
{
public delegate void RaiseEventHandler();

public partial class UserControl1 : UserControl
{
public UserControl1()
{
InitializeComponent();
}

public string imgPath { get ; set ; }
public string lblText { get ; set ; }

private int formWidth = 0 ;
private int formHeight = 0 ;

private int picWidth = 0 ;
private int picHeight = 0 ;

private int radisNum = 0 ;
private int radisStep = 0 ;

private bool flag = false ; // 鼠标进入的标识 鼠标进入为true 否则为false

private int count = 0 ; // 计数器

public RaiseEventHandler raiseEventHandler;


private void UserControl1_Load( object sender, EventArgs e)
{
formWidth = this .Width; // 窗体的宽度
formHeight = this .Height; // 窗体的高度

picWidth = this .pictureBox1.Width; // 图片的宽度
picHeight = this .pictureBox1.Height; // 图片的高度

this .radisNum = 40 ; // 宽度和高度缩小的值
this .radisStep = 5 ; // 步进


this .pictureBox1.Image = Image.FromFile(imgPath);
this .label1.Text = lblText;
this .label1.TextAlign = ContentAlignment.MiddleCenter;
}

private void pictureBox1_MouseLeave( object sender, EventArgs e)
{
timer2.Enabled = true ;
timer1.Enabled = false ;
flag = false ;
}

private void timer1_Tick( object sender, EventArgs e)
{
if (flag)
{
count ++ ;
if (count > radisStep)
{
timer1.Enabled = false ;
timer2.Enabled = false ;
}
this .pictureBox1.Height = this .pictureBox1.Height - radisStep;
this .pictureBox1.Width = this .pictureBox1.Width - radisStep;
this .pictureBox1.Left = this .pictureBox1.Left + radisStep / 2 ;
this .pictureBox1.Top = this .pictureBox1.Top + radisStep / 2 ;
}
}

private void timer2_Tick( object sender, EventArgs e)
{
if ( ! flag)
{
count -- ;
if (count < 0 )
{
timer2.Enabled = false ;
timer1.Enabled = false ;
}
this .pictureBox1.Height = this .pictureBox1.Height + radisStep;
this .pictureBox1.Width = this .pictureBox1.Width + radisStep;
this .pictureBox1.Left = this .pictureBox1.Left - radisStep / 2 ;
this .pictureBox1.Top = this .pictureBox1.Top - radisStep / 2 ;
}
}

private void pictureBox1_Click( object sender, EventArgs e)
{
raiseEventHandler();
}

private void pictureBox1_MouseEnter( object sender, EventArgs e)
{
timer1.Enabled = true ;
timer2.Enabled = false ;
flag = true ;
}
}
}

主要原理就是利用两个Timer控件来控制picture的大小改变效果，然后通过一个全局的委托函数，赋予控件事件。

具体的前台调用代码如下：

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;

namespace SlideButtons
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
this .DoubleBuffered = true ; // 设置双缓冲 防止页面闪烁
}

private void Form1_Load( object sender, EventArgs e)
{
UserControl1[] u = new UserControl1[ 5 ];
for ( int i = 0 ; i < 5 ; i ++ )
{
u[i] = new UserControl1();
u[i].imgPath = @" D:\img\ " + i.ToString() + " .png " ;
u[i].lblText = " 自定义 " + i.ToString();
u[i].Left = u[i].Width * i + 10 ;
u[i].Top = 10 ;
u[i].raiseEventHandler += new RaiseEventHandler(mycontrol_click);
this .groupBox1.Controls.Add(u[i]);
}
}

private void mycontrol_click()
{
MessageBox.Show( " 你单击了按钮 " );
}
}
}

挺简单的，希望以后能够继续扩展。