Click here to Skip to main content
Licence 
First Posted 12 Apr 2006
Views 173,606
Bookmarked 202 times

Iconits

By | 12 Apr 2006 | Article
An icon control that zooms and fades-in when your mouse hovers over it, which creates interesting visual effects if your application uses icons instead of buttons.

Sample Image

Introduction

For an application that uses icons instead of buttons, perhaps there might be a need to add some fancy effects rather than only showing a rising icon (when hovering). This control gives you an interesting visual effect, which makes an icon to zoom when the mouse hovers over it. Also, there is a Blur property that will cause the icon to be rendered transparent (without a single line of code!); of course, you may turn it off.

Usage

You can start using this control by following these two simple steps:

  1. Add the control to the toolbox (if you don't know how to do it, right click on the Toolbox, choose Add/Remove items, find Iconits.dll, and press OK).
  2. Now that you have seen the control on the toolbox (Iconits), you can start using it. However, these properties are essential:
    Property name Type Description
    Blur Boolean Set to true if you want the transparency effect, set to false otherwise.
    Icon Bitmap Set the icon from any available image.
    IconSize Size Icon initial size.
    Size Size Icon actual size when mouse hovers over it.
    TooltipText String Icon's tooltip text which pops up when the mouse hovers over it for some seconds.

Alpha class

The trick on how the image becomes slightly transparent is done by creating three additional bitmaps instead of the original image. These additional bitmaps, with different opacity (0.25, 0.5, 0.75), will make the effect of the icon slightly fading.

The idea of generating bitmaps instead of direct rendering is, of course, speed. Another reason is, only three images are necessary and that is not too much. So, we develop a class which generates a new bitmap with a different opacity level from the available image:

public static Bitmap returnAlpha(Bitmap bmp, int alpha)
{
    Color col; 
    Bitmap bmp2=new Bitmap(bmp);
    
    for (int i=0;i<bmp.Width;i++)
          for (int j=0;j<bmp.Height;j++) 
          {
            col=bmp.GetPixel(i,j); 
            if (col.A>0)
                bmp2.SetPixel(i,j,Color.FromArgb(min(
                       col.A-alpha),col.R,col.G,col.B)); 
          } 
      return bmp2;
}

It simply iterates through the image and redraws the image with a new transparency level, and, of course, you don't need to redraw the pixel which is already transparent (Alpha=0).

Optimization Issues

Optimization is a critical issue when you develop such controls that employ heavy computations. In this case, the problems are speed and image flickering since GDI+'s DrawImage is used. Double buffering is implemented so that the animation will displayed smoothly. Another issue, slow speed, only occurs if you do a direct rendering of the transparent image. We build additional bitmaps for this reason, which causes another drawback, the use of additional memory.

History

  • v0.1 (9 April 2006): Initial release.

    Implemented alpha transparency, and zoom on mouse-hover.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

About the Author

hanifku

Web Developer

Indonesia Indonesia

Member

Yojana Hanif was love to code, he is just graduated from Institut Teknologi Sepuluh Nopember Surabaya Indonesia.

Sign Up to vote   Poor Excellent
Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

 
You must Sign In to use this message board. (secure sign-in)
 
Search this forum  
 FAQ
    Noise  Layout  Per page   
  Refresh
Generalprofblem if transparent Pinmemberjinfrics18:51 23 Sep '09  
Generalvery good job [modified] PinmemberiowhfojfljLEJFSFLJafa23:45 11 Sep '07  
GeneralFurther simplification Pinmemberblackholeat17:50 17 Jan '07  
After being a lurker here for a while, and getting many good ideas, like "Iconits", Here is a small contribution. A partial update to the original code, which I think helps clarify what it does, and simplifies it.

When I found Iconits, I thought it was neat, but had several issues with it, which are improved here; 1) The alpha shading didn't seem right, and was really slow and/or unsafe. You can delete the whole "Alpha.cs" business now. 2) Names of properties improved to be more meaningful. 3) System.Component model attributes added to the properties to group them together in the properties pane (and dropped "Blur" - why would you use that?). 4) Started renaming other things to be accurate - like "Icon", which is now "Image" (and the whole class name, for that matter)...

Thanks to the original poster, and all who added to it over the months. I found it in Jan '07 and thought I would post this update (about half-way along its transformation to becoming "production code") for all to enjoy!

This class is still not polished, but I wanted to post it while there was still enough of it left to be recognized as "Iconits".

Anyhow, put this class in your project, drop one on your form, set an icon and some sizes and you will see it does the same thing Icontits does.
 

// Started with code and ideas from the "Iconits" project at
// http://www.codeproject.com/cs/miscctrl/Iconits.asp
// Then tried to use it and realized it needed work...
// See http://msdn.microsoft.com/library/default.asp?url=/library/en-us/cpguide/html/_gdiplus_using_a_color_matrix_to_set_alpha_values_in_images_usecsharp.asp
// Now it is totally different... and only about half-way done.
 
using System;
using System.Collections;
using System.ComponentModel;
using System.Drawing;
using System.Windows.Forms;
using System.Drawing.Drawing2D;
using System.Drawing.Imaging;
 
namespace UsedToBeIconits
{
public partial class PuffyImage : UserControl
{
private System.Windows.Forms.Timer drawingTimer;
private System.Windows.Forms.ToolTip t = new ToolTip();
 
private Bitmap bitmap;
private Bitmap dblbuffer;
private Graphics dbufGraphics;
 
private int imwidth, imheight;
private double curwidth, curheight;
private double addx, addy;
 
private int flag;
private bool enter;
 
// Set up the ColorMatix values changing all pixel Alpha values
static float[][] _matrixItemsActive ={
new float[] {1, 0, 0, 0, 0},
new float[] {0, 1, 0, 0, 0},
new float[] {0, 0, 1, 0, 0},
new float[] {0, 0, 0, 1.00f, 0}, // 100% alpha (1.00f)
new float[] {0, 0, 0, 0, 1}
};
static float[][] _matrixItemsDim ={
new float[] {1, 0, 0, 0, 0},
new float[] {0, 1, 0, 0, 0},
new float[] {0, 0, 1, 0, 0},
new float[] {0, 0, 0, 0.75f, 0}, // 75% alpha
new float[] {0, 0, 0, 0, 1}
};
static float[][] _matrixItemsDimmer ={
new float[] {1, 0, 0, 0, 0},
new float[] {0, 1, 0, 0, 0},
new float[] {0, 0, 1, 0, 0},
new float[] {0, 0, 0, 0.50f, 0}, // 50% alpha
new float[] {0, 0, 0, 0, 1}
};
static float[][] _matrixItemsDimmest ={
new float[] {1, 0, 0, 0, 0},
new float[] {0, 1, 0, 0, 0},
new float[] {0, 0, 1, 0, 0},
new float[] {0, 0, 0, 0.25f, 0}, // 25% alpha
new float[] {0, 0, 0, 0, 1}
};
 
ColorMatrix[] _colorMatrix = {
new ColorMatrix(_matrixItemsActive),
new ColorMatrix(_matrixItemsDim),
new ColorMatrix(_matrixItemsDimmer),
new ColorMatrix(_matrixItemsDimmest)
};
 
// We will use an array of ImageAttributes with those ColorMatrices...
ImageAttributes[] _imageAttributes;
 
// TODO - make this obvious that it is a 4 image animation.
// Add events for enter/leave/click/double-click...
public PuffyImage()
{
// There will be four different alpha levels...
_imageAttributes = new ImageAttributes[4];
for (int ii = 0; ii < 4; ii++)
{
_imageAttributes[ii] = new ImageAttributes();
 
_imageAttributes[ii].SetColorMatrix(
_colorMatrix[ii],
ColorMatrixFlag.Default,
ColorAdjustType.Bitmap);
}
 
dblbuffer = new Bitmap(Width, Height, PixelFormat.Format32bppArgb);
dbufGraphics = Graphics.FromImage(dblbuffer);
 
SizeWhenIdle = new Size(Width / 2, Height / 2);
 
InitializeComponent();
 
this.drawingTimer = new System.Windows.Forms.Timer(this.components);
 
this.drawingTimer.Interval = 10;
this.drawingTimer.Tick += new System.EventHandler(this.timer1_Tick);
 
this.BackColor = System.Drawing.SystemColors.Control;
this.Name = "BalloonButton";
this.SizeWhenActive = new System.Drawing.Size(160, 128);
this.Paint += new System.Windows.Forms.PaintEventHandler(this.Iconits_Paint);
this.MouseEnter += new System.EventHandler(this.Iconits_MouseEnter);
this.MouseLeave += new System.EventHandler(this.Iconits_MouseLeave);
}
 
private void Iconits_Paint(object sender, System.Windows.Forms.PaintEventArgs e)
{
draw(3);
}
 
private void calc()
{
curwidth = imwidth;
curheight = imheight;
 
addx = (double)(Width - imwidth) / 10;
addy = (double)(Height - imheight) / 10;
}
 
private void draw(int state)
{
int st; // normal = 3 (dimmest)... 2, 1, 0 (active, original image)
 
st = state;
 

if (bitmap == null)
return;
 
dbufGraphics.Clear(((this.Parent == null) || (this.BackColor != Color.Transparent)) ? this.BackColor : this.Parent.BackColor);
 
Rectangle rb = new Rectangle(
(int)((double)Width - curwidth) / 2,
(int)((double)Height - curheight) / 2,
(int)curwidth,
(int)curheight);
 
// take out the "draw one-of-four-bmps..."
 
// Draw the bitmap image using different Alpha values, defined in imageAtt[]
dbufGraphics.DrawImage(
bitmap,
rb, // destination rectangle
0.0f, // source rectangle x
0.0f, // source rectangle y
bitmap.Width, // source rectangle width
bitmap.Height, // source rectangle height
GraphicsUnit.Pixel,
_imageAttributes[st]);
 

#if (DEBUG)
dbufGraphics.DrawRectangle(Pens.Goldenrod, rb); // idle size
#endif
 
using (Graphics g = this.CreateGraphics())
{
g.DrawImageUnscaled(dblbuffer, 0, 0);
#if (DEBUG)
Rectangle r = this.ClientRectangle;
r.Inflate(-1, -1);
g.DrawRectangle(System.Drawing.Pens.Green, r); // active (full quality) size
#endif
}
}
 
private void timer1_Tick(object sender, System.EventArgs e)
{
if (enter)
{
if (curwidth < Width)
curwidth += addx;
 
if (curheight < Height)
curheight += addy;
 
if (curwidth >= Width && curheight >= Height)
drawingTimer.Enabled = false;
 
flag++;
}
else
{
if (curwidth > imwidth)
curwidth -= addx;
 
if (curheight > imheight)
curheight -= addy;
 
if (curwidth <= imwidth && curheight <= imheight)
drawingTimer.Enabled = false;
 
flag--;
}
 
if (flag > 9)
draw(0);
else if (flag > 6)
draw(1);
else if (flag > 3)
draw(2);
else
draw(3);
}
 
private void Iconits_MouseEnter(object sender, System.EventArgs e)
{
enter = true;
drawingTimer.Enabled = true;
}
 
private void Iconits_MouseLeave(object sender, System.EventArgs e)
{
enter = false;
drawingTimer.Enabled = true;
}
 
[Category("Settings")]
[Description("Basic image for your Iconit")]
public Bitmap Image
{
// was "Icon"
get { return bitmap; }
set
{
bitmap = value;
 
calc();
draw(3);
}
}
 
[Category("Settings")]
[Description("Maximum size for your image (set to the native size)")]
public new Size SizeWhenActive
{
// Was "Size"
get { return new Size(Width, Height); }
set
{
Width = ((Size)value).Width;
Height = ((Size)value).Height;
calc();
draw(3);
}
}
 
[Category("Settings")]
[Description("Minimum size for your image (when it is idle and dim)")]
public Size SizeWhenIdle
{
// Was "IconSize"
get { return new Size(imwidth, imheight); }
set
{
imwidth = ((Size)value).Width;
imheight = ((Size)value).Height;
if (imwidth > Width)
imwidth = Width;
if (imheight > Height)
imheight = Height;
calc();
draw(3);
}
}
 
public string TooltipText
{
get { return t.GetToolTip(this); }
set { t.SetToolTip(this, value); }
}
 
protected override void OnVisibleChanged(EventArgs e)
{
base.OnVisibleChanged(e);
if (this.Visible == true)
draw(3);
}
 
} // End-of-class
 
} // End-of-namespace

GeneralRe: Further simplification Pinmembersly59615:18 23 Apr '07  
QuestionWhat kind of icon does one want to import Pinmembergordingin4:02 19 Nov '06  
GeneralResource Question Pinmembergordingin3:52 19 Nov '06  
Generalso cool Pinmemberamin keshani1:05 12 Oct '06  
General[LONG] Big update with everybody contributions PinmemberLelhu7:05 18 Sep '06  
GeneralRe: [LONG] Big update with everybody contributions Pinmemberfemme10:42 8 Mar '07  
QuestionMemory Problem fixed? PinmemberK3210:31 18 Aug '06  
QuestionRe: Memory Problem fixed? Pinmemberswtechno4:23 18 Aug '06  
GeneralExcellent!! But maybe an addition.... PinmemberK32120:30 17 Aug '06  
GeneralBug + Fix: Iconit after visibility change PinmemberKel_22:37 24 Jul '06  
GeneralBug + Fix: BackColor problem PinmemberPink Floyd12:07 10 May '06  
GeneralA question PinmemberMengChih23:20 24 Apr '06  
AnswerRe: A question PinmemberPink Floyd12:08 10 May '06  
GeneralRe: A question PinmemberMengChih23:08 14 May '06  
Generalvery creative work ! PinmemberBillWoodruff15:25 24 Apr '06  
Generaltooltip behavior Pinmemberagarcian7:25 21 Apr '06  
GeneralRe: tooltip behavior Pinmemberjayoscar20:48 23 Apr '06  
GeneralRe: tooltip behavior PinmemberPink Floyd4:04 11 May '06  
GeneralA more efficient alpha routeen... PinmemberJon Rista17:21 20 Apr '06  
GeneralRe: A more efficient alpha routeen... PinmemberJon Rista17:38 20 Apr '06  
GeneralRe: A more efficient alpha routeen... Pinmemberjayoscar0:30 21 Apr '06  
GeneralRe: A more efficient alpha routeen... PinmemberJon Rista12:06 22 Apr '06  

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Mobile
Web03 | 2.5.120529.1 | Last Updated 12 Apr 2006
Article Copyright 2006 by hanifku
Everything else Copyright © CodeProject, 1999-2012
Terms of Use
Layout: fixed | fluid