Glass Effect On Windows Mobile using Compact Framework

October 15, 2008 — Leave a comment

There has been a lot of talk about how the Windows Mobile user interface is just not up to par with mobile devices such as the iPhone.  As developers we cannot change the Windows Mobile user interface but we do have the opportunity to differentiate our applications from the competition or to just add a little “eye candy” to improve our applications user experience. 


So how do we get this done on Windows Mobile?


Well not being a graphics expert I decided to search the web. First thing I did is figure out how to implement a ‘glass effect’ using Paint.Net and found this post on how to make ‘glass buttons’.  Now that I had the knowledge on how to create a glass button using a graphics program I could try and implement in code.


Before I did that I searched for any existing code on the desktop.  I found an article on Code Project which uses GDI+ on the desktop to create a glass button and works great.  Using the knowledge form Alex Feinman’s article on Using GDI+ on Windows Mobile I was able to port the desktop code to Windows Mobile.


The glass button sample accompanying this post just draws on the main form and uses a panel for the bounds of the ‘button’ and checkboxes to set different states for the button.


In the interest of time, I did not implement a full glass button control and I’ll leave it up to you to implement a control possibly using the gradient button for Windows Mobile available on MSDN as a starting point.  Now that you have the knowledge (and code) on how to paint a ‘glass effect’ on Windows Mobile this should be straight forward.


The code results in the following:



Glass Button with Enabled State
GlassButton1 


Glass Button With Hovered State (or Focused)
GlassButton2 



Glass Button with MouseDown State
GlassButton3 


Although this will add some eye candy to your Windows Mobile application, there are a few caveats:



  1. The glass button sample code doesn’t really create a button control but just draws and blits to the screen
  2. GDI+ is only support on Windows Mobile 5+ with touch screens which means this code will not work on SmartPhone (or non-touch screens 🙂 )
  3. GDI+ on Windows Mobile is too slow IMO but caching the bitmaps should help.

So there you have it, glass effect on Windows Mobile.  I’ll be following up with some more posts on some techniques I’ve used in the past to give Windows Mobile applications a nice UI instead of the standard ‘grey controls’.

No Comments

Be the first to start the conversation.

Leave a Reply