Click here to Skip to main content
12,512,314 members (58,327 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


355 bookmarked

iPhone UI in Windows Mobile

, 24 Mar 2009 CPOL
Rate this:
Please Sign up or sign in to vote.
It's an interface that works with transparency effects. As a sample I used an interface just like the iPhone one. In this tutorial I am explaining how simple is working with transparency on Windows Mobile.


What is iPhoneUI?

It's an interface that works with transparency effects. As a sample I used an interface just like the iPhone one.
In this tutorial I am explaining how simple is working with transparency and animation on Windows Mobile.


In all this article I have been mentioning Alpha blending. Alpha blending is a convex combination of two colours allowing transparency effects.
In order to raise more interest in this article I added an animation (status bar), events notifications (battery, GPS signal, timer), fingered movement of the objects (unlock button) and the second part concerning buttons view and their respective interactions with mobile native programs.
As a project base I used an example by Alex Yakhnin that concerns, of course, the use of API AlphaBlend in c#.

IPhoneUI/Info.png Info:  If you are interested in: Resolution-aware and Orientation-aware, Dynamic graphic text resize I suggest to you my new article: iPod touch UI[^].   


As already mentioned, this program shows how to display bitmaps that have transparent or semitransparent pixels with c#.

Using the Code

The solution

I have chosen C#/.Net to make things simpler and we will be using Visual Studio 2005 as the IDE.
If you have a bit of understanding of writing with C# or C++ (Windows GDI) this reading can be quicker and useful.
To debug the project you need the Windows Mobile 6 Professional and Standard Software Development Kits Refresh[^]. The project contains:
  • Two form Home.cs and MainMenu.cs
  • The class to manage the P/Invoke PlatformAPIs
  • The class for the image ImageButton
  • The class to move the Image SlideButton
  • The class to Intercept the touched button InterceptButtonPressed
  • The class to execute the programsProcessExecute
  • and a lot of BMP files.  
    Originally I have released only one form, but successively I have split it in two to make things more clear and removed the Topbar from the MainMenu.cs.
    This is a sample with 4 different wallpapers, all included in the solution.

    The forms are in full screen (WindowState = Maximize) for best image and I have overridden the OnPaint().


    In order to draw the background, you need to clear the screen and put on it (in the right order) your back ground first and the transparency object after. In the end you can add the items that require interaction.

    Drawing off screen

    In order to draw quicker, I drew all the controls off screen (in memory) in advance and at the end I have put them on the screen.
    protected override void OnPaint(PaintEventArgs e)
        gxBuffer = Graphics.FromImage(offBitmap);
        //Graphics gxBuffer = e.Graphics;
        e.Graphics.DrawImage(offBitmap, 0, 0);

    Draw with transparency

    In order to draw the alpha I used the DrawAlpha that uses the P/Invoke to AlphaBlend.
    public class PlatformAPIs
        extern public static Int32 AlphaBlend(
               IntPtr hdcDest, Int32 xDest, Int32yDest, Int32 cxDest, Int32 cyDest,
               IntPtr hdcSrc, Int32 xSrc, Int32 ySrc, Int32 cxSrc, Int32 cySrc, 
               BlendFunction blendFunction);                 
    private void DrawAlpha(Graphics gx, Bitmap image, byte transp, int x, int y)
         using (Graphics gxSrc = Graphics.FromImage(image))
            IntPtr hdcDst = gx.GetHdc();
            IntPtr hdcSrc = gxSrc.GetHdc();
            BlendFunction blendFunction = new BlendFunction();
            blendFunction.BlendOp = (byte)BlendOperation.AC_SRC_OVER;   
            blendFunction.BlendFlags = (byte)BlendFlags.Zero;           
            blendFunction.SourceConstantAlpha = transp;
            blendFunction.AlphaFormat = (byte)0;                        
            PlatformAPIs.AlphaBlend(hdcDst, x, y, image.Width, image.Height, hdcSrc,
                                    0, 0, image.Width, image.Height, blendFunction);

    Initalize the image

    I have loaded all the images of the Form in the constructor of the class on the OnPaint(), firtly I positioned the images that do not have interaction and, in the end, I added the buttons that require interaction.
    Sample of constructor
    path = System.IO.Path.GetDirectoryName(Assembly.GetExecutingAssembly().GetName().CodeBase);
    backImage = new Bitmap(path + @"\BMP\wallpaper.bmp");
    topBar = new Bitmap(path + @"\BMP\topbar.bmp");
    topLock = new Bitmap(path + @"\BMP\toplock.bmp");

    Drawing all the images

    Sample of drawing (OnPaint)
    DrawAlpha(gxBuffer, signal, 200, 0, 0);
    DrawAlpha(gxBuffer, topLock, 200, signal.Width, 0);
    DrawAlpha(gxBuffer, GetBatteryImage(), 200, topLock.Width + signal.Width, 0);

    Battery level

    The screen isn't static'. The battery image changes when the SO changes this registry key. To do this I used the notification broker and split the image in more several parts and added a more comprehensive step.

    private Bitmap GetBatteryImage()
        switch (SystemState.PowerBatteryStrength)
            case BatteryLevel.VeryHigh:
                return batteryLevelVeryHigh;                    
            case BatteryLevel.High:
                return batteryLevelHigh;                    
            case BatteryLevel.Medium:
                return batteryLevelMedium;
            case BatteryLevel.Low:
                return batteryLevelLow;
            case BatteryLevel.VeryLow:
                _HideBattery = !_HideBattery;
                if (_HideBattery)
                    return batteryLevelVeryLow1;
                    return batteryLevelVeryLow2;                    
        return null;     

    Battery animation sample

    GSM signal strenght

    Same thing for the GPS signal.
    private Bitmap GetGPSSignalImage()
        int SignalStrength = SystemState.PhoneSignalStrength;
        if (SignalStrength > 80)
            return signalLevelVeryHigh;
        if (SignalStrength > 60)
            return signalLevelHigh;
        if (SignalStrength > 50)
            return signalLevelMedium;
        if (SignalStrength > 20)
            return signalLevelLow;
            _HideSignal = !_HideSignal;
                if (_HideSignal)
                    return signalLevelVerylow1;
                    return signalLevelVerylow2;
        return null;

    Signal animation sample

     Info:  WM 6 emulators must be connected to the Fake Network through Cellular Emulator. Below I add some steps that may be useful.

    Running Cellular Emulator

    1. Launch the Cellular Emulator (Start/All Programs / Windows Mobile 6 SDK / Tools / Cellular Emulator ) and the Device Emulator.
    2. Read the COM port configuration from the status bar of the Cellular Emulator main window.
    3. In the Device Emulator, go to File / Configure and select the Peripherals tab.
    4. Map the Serial port 0 of Device Emulator to the specific COM number obtained from step 2
    5. Soft reset the Device Emulator (File / Reset / Soft).  

    Drawing the animated slide

    In the end of the form I added another animation but the image does not change along with the system situation.
    As this is an animation, I chose to load everything onto a single image and added all the frames that are necessary for displaying it.

    Drawing the time

    I added a timer that regularly checks the time and updates it on the display.
    private void DrawDateAndTime(string time, Graphics gx, int y)
        SizeF sizeTime = gx.MeasureString(time, timeFont);
        int xTime = this.Width / 2 - (int)sizeTime.Width / 2;
        gx.DrawString(time, timeFont, new SolidBrush(Color.White), xTime, y);
        SizeF sizeDate = gxBuffer.MeasureString(date, dateFont);
        int xDate = this.Width / 2 - (int)sizeDate.Width / 2;
        gxBuffer.DrawString(date, dateFont, whiteBrush, xDate, 70);

    have two bitmapsandit overrides the,,and draw it selfs in the .
    public void Paint(Graphics gx)
        ImageAttributes attrib = new ImageAttributes();
        Color color = GetTransparentColor(image);
        attrib.SetColorKey(color, color);
        if (!pushed || imageDown == null)
            gx.DrawImage(image, clientArea, 0, 0, clientArea.Width, clientArea.Height, 
                         GraphicsUnit.Pixel, attrib);                
            gx.DrawImage(imageDown, clientArea, 0, 0, clientArea.Width, clientArea.Height, 
                         GraphicsUnit.Pixel, attrib);
    The transparency colour is set based on the first pixel of the image.
    private Color GetTransparentColor(Bitmap image)
        return image.GetPixel(0, 0);

    Moving the button

    In order to move the arrow button I used the SlideButton that inherits the previous one and adds functions to the movement. Once the mouse is released, the owner_MouseUp triggers the timer start with timeAnimation_Tick hereunder you can see the code.
    private void timeAnimation_Tick(object sender, EventArgs e)
        int x = (start.X - 20);
    void Move(int x)
        int shift = x - start.X;
        int newX = (this.clientArea.X + shift);// -mousePos;
        if (newX <= leftLimit)
            newX = leftLimit;
            timeAnimation.Enabled = false;
        if (newX + this.clientArea.Width >= rightLimit)
            newX = rightLimit - this.clientArea.Width;
            unLock = true;
        this.clientArea = new Rectangle(newX, clientArea.Y, this.clientArea.Width, this.clientArea.Height);
        //owner.Invalidate(new Rectangle(0, 258, 240, 70));
        start.X = x;


    The Main menu is displayed when the arrow button gets to the end of the race.
    It hides itself when the key button is pressed.
  • License

    This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


    About the Author

    Software Developer (Senior) Welcome Italia spa
    Italy Italy
    Bertoneri Luigi, alias Dr.Luiji
    Bachelor of Science in Computer Science, year 2K - University of Pisa (Italy).

    I'm a developer with more than 10 years of experience. I like the new technology, Windows, iOS and Android.
    I love challenges.

    - Language: Android, Objective-C, C++, C#, Java
    - Platform: Windows, .NET
    - Technology: Too much...

    I currently work and live in Italy.
    Music I listen to: Tool, Slipknot, NIN, Korn, Perfect Circle, Dry Kill Logic, Godsmack, and more.

    You may also be interested in...


    Comments and Discussions

    GeneralMy vote of 4 Pin
    Chloe Lim29-Mar-11 23:10
    memberChloe Lim29-Mar-11 23:10 
    GeneralRe: My vote of 4 Pin
    Dr.Luiji9-Sep-11 22:10
    memberDr.Luiji9-Sep-11 22:10 
    GeneralDebugging in the Emulator Pin
    Omesatone24-Mar-11 0:04
    memberOmesatone24-Mar-11 0:04 
    GeneralRe: Debugging in the Emulator Pin
    Dr.Luiji24-Mar-11 4:49
    memberDr.Luiji24-Mar-11 4:49 
    Generalit's a very nice project~ Pin
    yuanwenqun7-Jun-10 3:11
    groupyuanwenqun7-Jun-10 3:11 
    GeneralRe: it's a very nice project~ Pin
    Dr.Luiji7-Jun-10 5:12
    memberDr.Luiji7-Jun-10 5:12 
    GeneralIts nice try Dr. Luiji Pin
    Raheel Afzal Khan27-Apr-10 8:54
    memberRaheel Afzal Khan27-Apr-10 8:54 
    GeneralRe: Its nice try Dr. Luiji Pin
    Dr.Luiji28-Apr-10 9:21
    memberDr.Luiji28-Apr-10 9:21 
    Generalregarding imagebutton Pin
    Tim_w10-Feb-10 16:39
    memberTim_w10-Feb-10 16:39 
    GeneralRe: regarding imagebutton Pin
    Dr.Luiji13-Feb-10 0:26
    memberDr.Luiji13-Feb-10 0:26 
    Hi Tim,
    I have not implemented these features, but you can modify the code with few line of code.
    If you need a disable property, you must add a new image, and dispaly it when disable property is set, and stop the button event handler.
    If you need to set the invisible property, you must add a new property Visible, and modify the Paint method to show/hide the button.



    Trust and you'll be trusted.

    My Blog : The Code Is Art

    GeneralThanks a lot Pin
    liqiupost5-Jan-10 21:57
    memberliqiupost5-Jan-10 21:57 
    GeneralRe: Thanks a lot Pin
    Dr.Luiji6-Jan-10 4:23
    memberDr.Luiji6-Jan-10 4:23 
    GeneralHELP!!!AlphaBlend returned FALSE in wince6.0 Pin
    astroblazer26-Aug-09 21:25
    memberastroblazer26-Aug-09 21:25 
    GeneralRe: HELP!!!AlphaBlend returned FALSE in wince6.0 Pin
    Dr.Luiji26-Aug-09 21:54
    memberDr.Luiji26-Aug-09 21:54 
    GeneralRe: HELP!!!AlphaBlend returned FALSE in wince6.0 [modified] Pin
    astroblazer26-Aug-09 22:18
    memberastroblazer26-Aug-09 22:18 
    GeneralRe: HELP!!!AlphaBlend returned FALSE in wince6.0 Pin
    Dr.Luiji27-Aug-09 6:14
    memberDr.Luiji27-Aug-09 6:14 
    GeneralRe: HELP!!!AlphaBlend returned FALSE in wince6.0 Pin
    astroblazer27-Aug-09 14:49
    memberastroblazer27-Aug-09 14:49 
    GeneralRe: HELP!!!AlphaBlend returned FALSE in wince6.0 Pin
    Dr.Luiji28-Aug-09 3:36
    memberDr.Luiji28-Aug-09 3:36 
    GeneralRe: HELP!!!AlphaBlend returned FALSE in wince6.0 Pin
    astroblazer29-Aug-09 5:36
    memberastroblazer29-Aug-09 5:36 
    GeneralRe: HELP!!!AlphaBlend returned FALSE in wince6.0 Pin
    Dr.Luiji29-Aug-09 7:34
    memberDr.Luiji29-Aug-09 7:34 
    GeneralRe: HELP!!!AlphaBlend returned FALSE in wince6.0 Pin
    astroblazer30-Aug-09 17:02
    memberastroblazer30-Aug-09 17:02 
    GeneralRe: HELP!!!AlphaBlend returned FALSE in wince6.0 Pin
    Dr.Luiji30-Aug-09 20:24
    memberDr.Luiji30-Aug-09 20:24 
    GeneralRe: HELP!!!AlphaBlend returned FALSE in wince6.0 Pin
    astroblazer31-Aug-09 17:01
    memberastroblazer31-Aug-09 17:01 
    GeneralRe: HELP!!!AlphaBlend returned FALSE in wince6.0 Pin
    Dr.Luiji31-Aug-09 21:45
    memberDr.Luiji31-Aug-09 21:45 
    GeneralRe: HELP!!!AlphaBlend returned FALSE in wince6.0 Pin
    astroblazer31-Aug-09 22:22
    memberastroblazer31-Aug-09 22:22 

    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.

    | Advertise | Privacy | Terms of Use | Mobile
    Web01 | 2.8.160929.1 | Last Updated 24 Mar 2009
    Article Copyright 2008 by Dr.Luiji
    Everything else Copyright © CodeProject, 1999-2016
    Layout: fixed | fluid