Click here to Skip to main content
15,868,292 members
Articles / Mobile Apps

Windows Mobile - Attractive UI: Part I

Rate me:
Please Sign up or sign in to vote.
4.92/5 (11 votes)
17 Sep 2009GPL32 min read 50.7K   1K   39   12
Windows Mobile - attractive UI (description about AlphaMobilecontrols).

Introduction

This article describes how to develop a mobile application with .NET CF having features like background transparency. There is one set of controls created by Rémy Baudet available at AlphaMobileControls. These controls offer background transparent images, image buttons and labels. I have added the following items to the library provided by alphamobilecontrols:

  • AlphaButton
  • AlphaListBox
  • Modified the AlphaImage control so that image can stretch itself as per size of the control

In Part I, I shall describe details about the existing AlphaMobileControls and then in the next part, we will discuss about building controls on top of AlphaMobileControls:

Windows_Mobile_UI/using_alphabutton.jpg

Background transparency of the controls

Background

Mobile thick client applications are getting more and more popular every day. When I started developing a client application, I did not have much knowledge about .NET Compact Framework. I found that CF class library controls are not sufficient for creating smart looking UIs. Then I tried a number of third party controls - most of them were either too heavy to use in handheld devices or they are very error prone (specifically memory leakage was the common problem of these third party controls). Then I came to know about AlphaMobileControls developed by Rémy Baudet. But, they did not have all the features that I wanted, i.e. a key navigable button control and a list control to display list of items.

How Alpha Mobile controls Work !!

AlphaControl has been derived from control base class and Alpha button derives from alpha control.

C#
public class AlphaControl : Control
public class AlphaButton : AlphaControl

Alpha controls should be placed over an alpha container class - either alphaform or alphapanel. This container classes contain the main trick of transparency. It has a paint method which in turn fires the draw method of all containing alpha controls:

C#
    /// <summary>
    /// Handles the Paint event, it is where the magic happens :-)
    /// </summary>
    public void OnPaint(PaintEventArgs e)
    {
        if (_backBuffer != null)
        {
            // We need a Graphics object on the buffer to get an HDC
            using (Graphics gxBuffer = Graphics.FromImage(_backBuffer))
            {
                // Since we nop'd OnPaintBackground, take care of it here
                gxBuffer.Clear(_control.BackColor);

                Region gxClipBounds = new Region(Rectangle.Ceiling(gxBuffer.ClipBounds));

                // Iterates the child control list in reverse order
                // to respect the Z-order
                for (int i = _control.Controls.Count - 1; i >= 0; i--)
                {
                    // Handle controls inheriting AlphaControl only
                    AlphaControl ctrl = _control.Controls[i] as AlphaControl;
                    if (ctrl == null)
                        continue;

                    // Something to draw?
                    Rectangle clipRect = 
			Rectangle.Intersect(e.ClipRectangle, ctrl.Bounds);
                    if (clipRect.IsEmpty)
                        continue;

                    // Clip to the control bounds
                    gxBuffer.Clip = new Region(clipRect);

                    // Perform the actual drawing
                    ctrl.DrawInternal(gxBuffer);
                }

                // Restore clip bounds
                gxBuffer.Clip = gxClipBounds;
            }

            // Put the final composed image on screen.
            e.Graphics.DrawImage
		(_backBuffer, e.ClipRectangle, e.ClipRectangle, GraphicsUnit.Pixel);
        }
        else
        {
            // This should never happen, should it?
            e.Graphics.Clear(_control.BackColor);
        }
    }
}

AlphaControl inherits from the Control class and hides itself.

C#
/// <summary>
/// Default constructor.
/// </summary>
public AlphaControl()
{
    base.Visible = false;
}

It has a method drawinternal which is called from its parent container (either AlphaPanel or AlphaForm). This drawinteral method calls the draw method of the derived classes. The draw method paints/draws the control on the container using methods like drawstring, drawrectangle, drawline.

C#
/// <summary>
/// Internal Draw method, called by the container.
/// Will call the actual Draw method if the control is visible.
/// </summary>
internal void DrawInternal(Graphics gx)
{
     if (_visible)
         Draw(gx);
}

/// <summary>
/// Must be overridden.
/// </summary>
public virtual void Draw(Graphics gx)
{
}

What'll Be There in Part II and Part III

I shall post further articles:

  • Part II will contain AlphaImage controls
  • Part III will contain AlphaButton, AlphaListBox and other controls. Once those articles are posted, I shall update this article with the links.

Points of Interest

AlphaMobile controls have been a very interesting piece of development with a lot of scope to extend the functionalities and control collections. Some possible enhancements can be empowering controls with designer support. This can be very useful while using Alpha Datagrid controls or other list controls.

History

  • 17th September, 2009: Initial post

License

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


Written By
Technical Lead
India India
Atanu Mandal works as a technical lead in a leading Software service company. He is from Kolkata, India. His primary interests are website development, software architecture and integration.

Comments and Discussions

 
QuestionAlphaListBox Pin
htauserdan6-Jan-12 1:43
htauserdan6-Jan-12 1:43 
GeneralInstall control to toolbox Pin
peter@howudodat.com17-Jan-10 8:25
peter@howudodat.com17-Jan-10 8:25 
Generalaccess internet from emulator Pin
Pushpa869-Nov-09 18:40
Pushpa869-Nov-09 18:40 
GeneralRe: access internet from emulator Pin
Atanu Mandal6-Dec-09 9:20
Atanu Mandal6-Dec-09 9:20 
GeneralI am waiting for the list box control too Pin
Member 390579628-Oct-09 6:15
Member 390579628-Oct-09 6:15 
thanks for your article again
GeneralRe: I am waiting for the list box control too Pin
Atanu Mandal2-Nov-09 0:34
Atanu Mandal2-Nov-09 0:34 
GeneralStretch ImageButton Image. Pin
Member 266122827-Oct-09 4:59
Member 266122827-Oct-09 4:59 
GeneralGreat article! Pin
Remy Baudet3-Oct-09 3:25
Remy Baudet3-Oct-09 3:25 
GeneralGood Work Pin
Arindam Sinha19-Sep-09 7:49
Arindam Sinha19-Sep-09 7:49 
Generalgreat articale Pin
Asit Sen17-Sep-09 6:27
Asit Sen17-Sep-09 6:27 
GeneralRe: great articale Pin
Atanu Mandal17-Sep-09 6:31
Atanu Mandal17-Sep-09 6:31 
GeneralRe: great articale Pin
Member 390579628-Oct-09 6:11
Member 390579628-Oct-09 6:11 

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.