以TIM软件为例,“微信登陆”图标默认显示为灰色。
鼠标移动到图标,“预览”显示的图标变化为高亮状态。
点击登陆图标,登陆图标高亮显示。再次移动鼠标,不发生“预览”变化效果。
下面使用c#语言编程,说明实现过程:
1、打开VS2012软件,新建一个窗体应用程序;
2、“公共控件”,选择“picturebox”控件,拖动到窗体。
3、选择“picturebox”控件,image属性,添加两张本地图片,默认显示为灰色图片(未选中状态)
图片可以从“阿里巴巴矢量库网站下载”网址:iconfont-阿里巴巴矢量图标库,搜索“收藏”即可获取各种类型的收藏图标,选择喜欢的图片,以png格式下载即可。
4、选择“picturebox”控件,在事件中添加“MouseMove”鼠标移动到图标函数、“MouseLeave”鼠标离开图标函数。如下所示添加代码。
可以实现,未选中状态下,鼠标移动到图标出现的“高亮”显示效果。
private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
{
pictureBox1.Image = Properties.Resources.blue;
}
private void pictureBox1_MouseLeave(object sender, EventArgs e)
{
pictureBox1.Image = Properties.Resources.gray;
}
5、添加一个布尔型的变量,缓存是否选中状态,
添加,如下代码。实现未选中状态才出现预览效果。
public partial class Form1 : Form
{
bool Bcollect = false;
public Form1()
{
InitializeComponent();
}
private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
{
pictureBox1.Image = Properties.Resources.blue;
}
private void pictureBox1_MouseLeave(object sender, EventArgs e)
{
if (!Bcollect)
pictureBox1.Image = Properties.Resources.gray;
}
6、双击“picturebox”控件,添加单击触发函数。
如果鼠标左键点击“picturebox”控件,“收藏”功能选中状态变化,同时切换显示图标。
private void pictureBox1_Click(object sender, EventArgs e)
{
if (!Bcollect)
{
Bcollect = true;
pictureBox1.Image = Properties.Resources.blue;
}
else if (Bcollect)
{
Bcollect = false;
pictureBox1.Image = Properties.Resources.gray;
}
}
9、视频教程连接: