Sometimes when you develop an application you need a straightforward way to represent something which cannot easily be represented in an icon- a “Visual shortcut” if you will. When it comes to presenting information in controls like Listviews, you have a few options- fonts, colours, and, most prominently, Item Icons. As an example, you may have a list of files loaded from some other source. You could show the actual file icon for the icon in a listview, but depending on what the program is intended for, it may be more useful for the icon to be used to represent other information, such as the file not being present, or perhaps a different size from a specified size. In those cases it can be useful to be able to use indicator icons/images using coloured icons. A plain square works, but a small psuedo 3-D cartoon-style “sphere” often looks much better.

As per usual, this is primarily aimed at Windows Forms, since that is how I wrote the original. doing something similar in WPF is actually quite straightforward and can be done right in Blend via XAML. Really we are drawing three things- a main ellipse, which has the main colour and the shadow, a highlight ellipse, which adds a shine to the top, and finally a small “Specular” shine blob, to make the item appear shiny.

The first step: draw an ellipse, filling it with a pathed gradient to create a shadow along the bottom.

Second step- draw the white shine. We do this by drawing a half-height ellipse, using a white to transparent gradient on top of the first step.

Third and final step- we draw a shiny bit, a specular “shine” by drawing a small ,angled ellipse near the top which uses another gradient. This one we keep more white so it is defined against the background.

And, of course, the source code to do this all, wrapped into a neat package to create a bitmap of any size: