Click here to Skip to main content
Click here to Skip to main content
Go to top

iTunes Bar Look-a-Like

, 30 Dec 2007
Rate this:
Please Sign up or sign in to vote.
A control that mimics the look-n-feel of iTunes and the iPod manager.

Screenshot - screen04.png

Introduction

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 Smile | :)

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 );

Finally

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. Wink | ;)

License

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

Share

About the Author

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

Comments and Discussions

 
GeneralMy vote of 5 Pinmemberjavedsmart17-Apr-12 0:56 
GeneralLooks fine PinmemberMarcelo Ricardo de Oliveira7-Dec-09 3:17 
GeneralRe: Looks fine PinmemberSnews1-Feb-10 5:56 
GeneralExcellent Work! PinmemberOnAir1-May-08 11:47 
GeneralSome minor updates PinmemberSnews30-Dec-07 21:51 
QuestionWhat License? Pinmemberandy7465615-Oct-07 3:20 
AnswerRe: What License? PinmemberSnews15-Oct-07 7:16 
GeneralGreat Control few suggestions... Pinmemberchris17525-Sep-07 4:38 
GeneralRe: Great Control few suggestions... PinmemberSnews25-Sep-07 6:49 
QuestionDoesn't redraw under high cpu usage in vista PinmemberAndre_J20-Jul-07 4:31 
AnswerRe: Doesn't redraw under high cpu usage in vista PinmemberSnews20-Jul-07 6:17 
GeneralRe: Now it's "half working" PinmemberAndre_J22-Jul-07 20:54 
GeneralRe: Now it's "half working" PinmemberSnews23-Jul-07 2:13 
AnswerRe: Now it's "half working" [modified] PinmemberSnews23-Jul-07 2:46 
GeneraliTunes Bar & .net CF2.0 Pinmembergembob3-Jul-07 4:31 
GeneralRe: iTunes Bar & .net CF2.0 PinmemberSnews3-Jul-07 9:28 
GeneralRe: iTunes Bar & .net CF2.0 PinmemberSnews6-Jul-07 7:34 
GeneralThx PinmemberEDVBS18-Apr-07 20:53 
GeneralRe: Thx PinmemberSnews19-Apr-07 1:46 
Generalwow PinmemberDarchangel17-Apr-07 8:06 
GeneralRe: wow PinmemberSnews17-Apr-07 8:25 
GeneralGreat Work Pinmembertim_mcgwyn9-Apr-07 10:33 
GeneralRe: Great Work PinmemberSnews9-Apr-07 14:02 
GeneralSource Update PinmemberSnews9-Apr-07 2:26 
GeneralLooks good Pinmemberronzulu26-Feb-07 23:27 
GeneralRe: Looks good PinmemberSnews27-Feb-07 8:09 
GeneralThanks mate! PinmemberBen_6426-Feb-07 21:07 
GeneralRe: Thanks mate! PinmemberSnews27-Feb-07 3:57 
GeneralRe: Thanks mate! PinmemberSnews27-Feb-07 9:30 
Generalthanks Pinmembernikita_sinenko26-Feb-07 13:02 
GeneralRe: thanks PinmemberSnews27-Feb-07 3:58 

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.

| Advertise | Privacy | Mobile
Web03 | 2.8.140926.1 | Last Updated 31 Dec 2007
Article Copyright 2007 by Snews
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid