iPad Touch Battery Meter

I have spent some time of late, well the past 2-3 years, moving away from pure coding and into design (at least in my spare time). I have always looked for a couple of projects that would boost my understanding of Expression Design and its interaction with Expression Blend. To this end I have emulated (as copied is too harsh a word) a tutorial from Valeriu Dodon where an iPod Touch battery meter was designed within Photoshop. Not having Photoshop, or not currently, I thought that this would be something short and illuminating to see what Photoshop can, what Expression Design can, and, in the end, to see if I could take the result into Expression Blend and make the battery meter a more active element.

Well designing the battery meter was not really difficult but time consuming. However, it was worth the effort in the end. By the way, the final Expression Design does have a number of rough edges, especially around the inner curves, but no matter it is really not production ready design anyway.

What was needed

These are the tool and information required for this project:

  1. Access to Valeriu Dodon’s work.
  2. Expression Design
  3. Expression Blend

Building the static battery Meter with Expression Design

The artwork is split up into a number of layers representing each of the differing areas of the artwork

The battery level is defined as follows


The Gaussian Blur has a radius of 4. The colour is #00C800 and the levels are 100%, 70% and 40%. These were okay for me, however experimenting here can bring better effects. A point to note is that the gradient in Expression Design functions rather differently than in Expression Blend. This took a little time to figure out and I have not really come to terms with its operation as yet. The inner-ends are the weakest point in the artwork, but I just had enough of fine-tuning the Bezier curves late at night!


All three of the ends including the battery’s positive terminal were made from the same Bezier curve and the same Gradient. Here this was a little better done than the inner-ends.


Finally, the body of the battery was designed as follows:


The Gradient was the most time consuming but I got the effect that I wanted in the end. The colour was slightly off-white (#FEFEFE). The final battery meter in Expression Design is shown below.

Adding the dynamic level updating with Expression Blend

Open Expression Blend and select a new WPF project (I am sure that this will also work with Silverlight). In the MainWindow adjust the size to 1280 by 1024 or similar. Open the XAML view and position the cursor inside the default grid. Now back to Expression Design. To get the Expression Design artwork into Blend is quite simple. Select all the artwork and copy the selection to XAML as shown here:

Now that the XAML is in the clipboard we can move back to Expression Blend and paste the XAML into the XAML view at the cursor position. Adding a background gradient to the Grid element will add a little depth to the battery meter as shown.

Now with that complete we can add the mandatory drop shadow. This is achieved by copying the Canvas that contains the artwork and positioning it under the original as shown and applying an opacity mask.


Now the hard bit is over we can add a Slider control and databind the Slider Value property to the green battery level indicator. First we have to measure the “Battery Full” length. On my artwork that was 500 pixels. All that is left is to databind the “Battery Full” width of both the battery and its shadow as follows:



The finished application is as shown below:

That’s all Folks….



~ by Intelligence4 on April 7, 2011.

%d bloggers like this: