iPhone’s beautiful "Battery Recharger" as a SilverLight animation

Sub Heading 5

this sample needs silverlight 1.1

Have I told you readers how much I love the user interface of Apple’s iPhone? Well I do!

There are so many goodies in there that over time I’ll reproduce them using Blend and SilverLight 🙂 . Today I’ll be recreating the “Battery Recharger”.

Here’s what it looks like on the iPhone


Now here’s my version done using Blend and if you click on the image it will go to the demo page where I have animated it using SilverLight


Apple took such care in painting a true “glass & light effect”. The light shining on the battery was done with such detail. I had to improvise with numerous separate “paths” to get the same result. If you look at my source you will see that each face (there are 4, top of the battery, middle of the battery, bottom of the battery, knob of the battery) has several “path shapes” each with complicated gradient brushes to produce  the lighting & glass effect of Apple’s control.

I love this control 🙂

Below is the tutorial of how I made this control. Enjoy!


“Top” and the “Bottom” are mirror images of each other. It is made up of several path’s each with different gradient fills.

Middle is made up of the “Filler” and a series of path’s with gradients. There are 2 groupings of paths (“group behind” and “group in-front” ) that surround the “filler path”, they were done this way to give a true 3D like affect.

The “Knob” is an exact copy of the “Top” that’s just shrunken down.

The “Filler” is a simple path shape that can be any color, which is currently showing as burgundy red.

The “Status” is a textblock that shows the status of the recharging battery.

The “Reflection” is an exact mirrored copy of the entire battery (without the text). Even the “Filler” is copied so that when the real “Filler” is animated we can animate the reflection as well giving an truly real reflection effect (see the demo animation).

The “TOP” part of the battery was achieved as follows, remember the “Bottom” and the “Knob” are just copies of the “Top”:

Take the basic “top” shape and make 5 copies, each copy will be the exact same shape but will have different gradients applied to them to give the glass/lighting effect.

First copy : forms the basic overall color of the top of the battery. It’s a black themed battery with a tinge of gray gradient at the bottom


Second copy: Lighting effect at the bottom part of the overall top shape

Third copy: Lighting effect in the middle of the overall top shape

Forth copy: Another lighting effect near the top of the overall top shape

Fifth copy: top most lighting effect of the overall top shape

all parts combined results in:

The “Middle” part of the battery was achieved as follows:

Like the “top” the “Middle” is made up of 5 copies of the same shape.

First copy: Basic color of the middle shape. Made up of a gradient

Second copy: Filler that we programmatically slide in width

Third copy: a lighting effect layer

Forth copy: another lighting effect layer

Fifth copy: another light effect layer


Combining all the layers without the filler layer it looks like this:

Add the filler layer to the combined layers above it looks like this:

I don’t think I need to go into the showing the rest of the parts of the battery, as I mentioned above they are all just variations of the previously covered 2 groups “Top”, “Middle”.

As you can see from my demo page this can be animated any way your heart desires. Create a stack of batteries and have them animate in different colors, the options are endless. I love SilverLight 🙂

Source code will soon be added to the “Blend Candy” area, stay tuned.

20 responses to “iPhone’s beautiful "Battery Recharger" as a SilverLight animation

  1. I’m getting an error, trying to open the recharge demo page…

    Silverlight error: 2251

  2. I forgot to mention at the top of the post that it uses silverlight 1.1 alpha refresh. Sorry!

  3. Hi ,
    I have developed one application using Visual studio 2008. I want to deploy it on my own website.Could you please tell me steps. How you are able to put any code on our website related to Silverlight 1.1

    Also i have installed Silverlight Alpha refresh on my website.

    Looking forward for reply.


  4. sorry Ajit only saw your comment know.. do you still need help?

  5. Pingback: My Hobby is Programming » Apple iPhone’s “Battery recharging” as a SilverLight Application

  6. Sweet Man! Looks Cool and will give it a try myself.


  7. Hi Jose, this is a great looking battery. We are looking to implement something similar in an app we are building – do you have any licensing restrictions on this?

  8. Ah, nevermind. Just found the WordPress license. Thanks!

  9. Good information once again. Thanks a lot=)

  10. Pingback: جلب الحبيب

  11. Pingback: Sandra Martinez

  12. Dead composed subject matter, thanks for information .

  13. Pingback: Windows 7 Home Premium 64 Bit Product Key

  14. If you want a light in this life you must remain to stand because the light will be hard to find people who are always hiding among the bushes

  15. After I initially commented I seem to have clicked the -Notify me when new comments are added- checkbox
    and from now on whenever a comment is added I get four emails with the same comment.
    There has to be a way you are able to remove me from that service?

  16. Keep smiling when getting into trouble is a sign that we are strong

  17. Melakukan hubungan seksual melalui mulut (oral seks) dengan seorang penderita gonore dapat menyebabkan gonore pada tenggorokan (faringitis gonokokal).

  18. You are my intake, I own few web logs and infrequently run out from post :). “Yet do I fear thy nature It is too full o’ the milk of human kindness.” by William Shakespeare.

  19. Mendengarkan musik favorit akan melebarkan pembuluh darah sehingga meningkatkan aliran darah

  20. Jangan jadikan kegagalan kemarin sebagai penghambat hari ini Semangat untuk membuat hari esok lebih baik melalui hari ini

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s