Click here to Skip to main content
14,970,700 members
Articles / Web Development / XHTML
Posted 25 Feb 2007


156 bookmarked

iTunes Bar Look-a-Like

Rate me:
Please Sign up or sign in to vote.
4.94/5 (38 votes)
30 Dec 2007GPL32 min read
A control that mimics the look-n-feel of iTunes and the iPod manager.

Screenshot - screen04.png


This is my first article here on CodeProject, so please let me know about any bad English, or bad implementation in the code and bugs.

I have always liked the Apple design for both OS's and devices. So, naturally, I try to mimic some of the cool controls that OSX and iTunes provide in their GUI. The control I will present here is the "How much space is left" bar in iTunes under the iPod view.

I have also extended the control to support a ProgressBar style with increasing and decreasing values, all customizable.

Points of interest

All features that the control uses is fully customizable, inluding base colors, borders, mirror opacity etc.

The control

The control comes as a DLL, so all you need to do is add a reference to the DLL in your .NET project and you will have full access to the control, or you could include the DLL project and make your own extra customizations.

The control also has full support for Mono. As long as you use the System.Windows.Forms bindings with Mono, it works great.

Public Properties

public float StepSize
public int StepInterval
public int BarDividersCount
public float BarMirrorOpacity
public float BarFillProcent
public float BarBorderWidth
public Color BarBackgroundLight
public Color BarBackgroundDark
public Color BarLight
public Color BarDark
public Color BarBorderColor
public BarType BarType

All properties listed here are the only values you need to modify the look-n-feel of the control completely. Some of them need a little explanation.

The StepSize and StepInterval properties controls whether or not the control should act as a progressbar control. You activate this by setting the StepSize to a value that's not 0 (zero). If the value is less then 0, the progress will tick backwards, and if the value is greater than 0, it will move as a usual progress control and the StepInterval goes to a value > 0.

The BarDividersCount controls how many vertical lines the control will draw.

The BarType property is an enum that controls the control state or type. For example, if you set the BarType property to ProgressBar, it will act as a progressbar. If you set the BarType to Animation, the control will "Rubber Band" to the new percent value, and last, you can set the BarType to Static, and it will be a static control without motion or animations.

The Animation effect idéa was submitted by Ben_64, thanks for the great idéa :)

Basic knowledge to implement the "drop effect"

To accomplish the drop effect, we need to create a replica of the image we originally draw and then flip it 180 degrees. Also, we need to make the image semi-transparent and then add a fade from transparent to the target background color.

The following code demonstrates this:

Bitmap theImage = new Bitmap( width, height );
Graphics g = Graphics.FromImage( theImage );

g.SmoothingMode = SmoothingMode.AntiAlias;
g.Clear( bgColor );

// Here we generate the actual bar
Bitmap bmp = GenerateBarImage( width, height - ( height / 3 ), procent );

// We then take this image and apply the opacity and fade effect's
Bitmap mirror = FadeToBg( bmp, bgColor, -90.0F );

// This is important, we need to save the current state of the device
GraphicsState state = g.Save();

// Here we apply a upside down flip before we draw the "glassy" part
g.ScaleTransform( 1, -1.0F, MatrixOrder.Prepend );

// Then we create a ColorMatrix and the ImageAttributes we are going to use
// to make the reflected image opaque
ColorMatrix clr = new ColorMatrix();
ImageAttributes attributes = new ImageAttributes();

// This is important, it's the Matrix33 propertie that controls the opacity
// of the image. We set this to our desired value.
// This is a float value that takes a value from 
// 0.0F -> Completly transparent
// to
// 1.0F -> No transparency
clr.Matrix33 = ( mirrorOpacity / 100 );

// We then apply the color matrix to the image attributes we
// that we will use when drawing the image.
attributes.SetColorMatrix( clr );

// Here we create a destination rectange that the image will be drawn within.
Rectangle source = new Rectangle( 0, -( height ), mirror.Width, mirror.Height );
g.DrawImage( mirror, source, 0, 0, mirror.Width, 
             mirror.Height, GraphicsUnit.Pixel, attributes );

// Now, when the image is drawn upside down, we are going to restore the
// device to it's original state. This is simply done with our
// saved device state
g.Restore( state );

// Now we can draw the correct bar on the top of the flipped and opaque
// shadow.
g.DrawImage( bmp, 0, -5 );


I really hope that someone will put this control to use in some project. And maybe, I have made it a simpler to flip graphical objects and to modify the transparency of an image. Because of my poor English, I really hope that the code will speak for itself. ;)


This article, along with any associated source code and files, is licensed under The GNU General Public License (GPLv3)


About the Author

Software Developer Microsoft, Skype Division
Sweden Sweden
I'm a pragmatic developer working as a Software Development Engineer at Microsoft, Skype Division - Windows Phone

Comments and Discussions

GeneralMy vote of 5 Pin
javedsmart17-Apr-12 0:56
Memberjavedsmart17-Apr-12 0:56 
GeneralLooks fine Pin
Marcelo Ricardo de Oliveira7-Dec-09 3:17
MemberMarcelo Ricardo de Oliveira7-Dec-09 3:17 
GeneralRe: Looks fine Pin
Snews1-Feb-10 5:56
MemberSnews1-Feb-10 5:56 
GeneralExcellent Work! Pin
OnAir1-May-08 11:47
MemberOnAir1-May-08 11:47 
GeneralSome minor updates Pin
Snews30-Dec-07 21:51
MemberSnews30-Dec-07 21:51 
QuestionWhat License? Pin
andy7465615-Oct-07 3:20
Memberandy7465615-Oct-07 3:20 
AnswerRe: What License? Pin
Snews15-Oct-07 7:16
MemberSnews15-Oct-07 7:16 
GeneralGreat Control few suggestions... Pin
Christopher Stratmann25-Sep-07 4:38
MemberChristopher Stratmann25-Sep-07 4:38 
GeneralRe: Great Control few suggestions... Pin
Snews25-Sep-07 6:49
MemberSnews25-Sep-07 6:49 
QuestionDoesn't redraw under high cpu usage in vista Pin
Andre_J20-Jul-07 4:31
MemberAndre_J20-Jul-07 4:31 
AnswerRe: Doesn't redraw under high cpu usage in vista Pin
Snews20-Jul-07 6:17
MemberSnews20-Jul-07 6:17 
GeneralRe: Now it's "half working" Pin
Andre_J22-Jul-07 20:54
MemberAndre_J22-Jul-07 20:54 
GeneralRe: Now it's "half working" Pin
Snews23-Jul-07 2:13
MemberSnews23-Jul-07 2:13 
AnswerRe: Now it's "half working" [modified] Pin
Snews23-Jul-07 2:46
MemberSnews23-Jul-07 2:46 
GeneraliTunes Bar & .net CF2.0 Pin
gembob3-Jul-07 4:31
Membergembob3-Jul-07 4:31 
GeneralRe: iTunes Bar & .net CF2.0 Pin
Snews3-Jul-07 9:28
MemberSnews3-Jul-07 9:28 
GeneralRe: iTunes Bar & .net CF2.0 Pin
Snews6-Jul-07 7:34
MemberSnews6-Jul-07 7:34 
GeneralThx Pin
EDVBS18-Apr-07 20:53
MemberEDVBS18-Apr-07 20:53 
GeneralRe: Thx Pin
Snews19-Apr-07 1:46
MemberSnews19-Apr-07 1:46 
Generalwow Pin
Darchangel17-Apr-07 8:06
MemberDarchangel17-Apr-07 8:06 
GeneralRe: wow Pin
Snews17-Apr-07 8:25
MemberSnews17-Apr-07 8:25 
GeneralGreat Work Pin
Mc Gwyn9-Apr-07 10:33
MemberMc Gwyn9-Apr-07 10:33 
GeneralRe: Great Work Pin
Snews9-Apr-07 14:02
MemberSnews9-Apr-07 14:02 
GeneralSource Update Pin
Snews9-Apr-07 2:26
MemberSnews9-Apr-07 2:26 
GeneralLooks good Pin
ronzulu26-Feb-07 23:27
Memberronzulu26-Feb-07 23:27 

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

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