Click here to Skip to main content
15,867,568 members
Articles / Product Showcase
Article

Designing UI of Windows Mobile Applications

12 Oct 2011CPOL3 min read 24.8K   1   8   1
The article contains the sample and the guide for creating a user interface of Windows Mobile application for booking flights and renting cars with Resco MobileForms Toolkit.

This article is in the Product Showcase section for our sponsors at CodeProject. These articles are intended to provide you with information on products and services that we consider useful and of value to developers.

Based on the feedback from mobile developers we concluded that there are several similar scenarios they have to solve. They often need to design a mobile application that can be controlled with the finger-touch. Let’s design a simple application that meets these requirements.

The end user application will have following features:

  • Touch-scrolling in the roller navigation
  • Animation for additional information
  • Navigation with a finger in whole app

Prerequisites

To see how Resco developers got the app down to the fine art, download either the source code or application below:

You will need:

  • Microsoft Windows Mobile 5.0 SDK (or later) which you can download here.
  • Resco MobileForms Toolkit 2011 Windows Mobile Edition which you can download here.
  • Any WM device (or emulator)

Resco MobileForms Toolkit is a set of Visual Studio controls designed for mobile devices. The toolkit includes 46 controls. The biggest set of Windows Mobile controls on the market. After installing Resco MobileForms Toolkit 2011 on your computer, the controls will be automatically added to the Visual Studio’s toolbox. We will use following Resco controls and libraries in the project:

  • Resco TabControl for .NET CF
  • Resco MessageBox for .NET CF
  • Resco ImageButton for .NET CF
  • Resco UIAnimatedLabel for .NET CF
  • Resco UIRollerPicker for .NET CF
  • Resco UIDateTimePicker for .NET CF
  • Resco UIColorPicker for .NET CF
  • Resco TouchRadioButton for .NET CF
  • Resco TouchCheckBox for .NET CF

UIControls.png

The application can be created for both .NET Compact Framework 2.0 and .NET Compact Framework 3.5. The app supports both resolutions, VGA and QVGA. Just download the appropriate version of Resco MobileForms Toolkit 2011.

User interface

The application consists of one Form object – Form contains the TabControl with two TabPages.

First page contains the AnimationLabel with the advertisement, the Radiobuttons to choose a flight option, the RollerPickers to select a destination and number of persons, the DateTimePickers to select dates and the MessageBox is displayed after the click on the ImageButton. The page contains two more TransparentLabels for additional information and the TouchCheckBox to confirm the terms of use.

Second page consists of the AnimatedLabel with the advertisement, the RollerPicker to select a city, the ColorPicker to select a color and DateTimePickers. The page also contains the ImageButton and TransparentLabels.

Designing the controls

  • UIAnimatedLabel – AnimationSpeed, BorderThickness and BorderColor properties are changed. All corners are rounded. The control is displayed with the gradient background color.
  • UIRollerPicker – two corners are rounded and that creates a great look. The control is displayed with the gradient background color.

  • UIControls1.png

  • UIDateTimePicker – two opposite corners are rounded. The control is using the gradient color and it has more format date options.

  • UIControls2.png  UIControls3.png

  • UIColorPicker – the control is displayed with two rounded corners and gradient background color. Special ColorList is created for the control. You can choose which colors will be displayed in the DropDownList.

  • UIControls4.png

  • TouchCheckBox and TouchRadioButton – replaced checked and unchecked boxes with transparent images.
  • ImageButton – the control is displayed with rounded corners and gradient background color.
  • MessageBox – advanced control to the standard message box class.

  • UIControls5.png

Conclusion

This kind of an application provides user with all important functionality available on a simple finger touch. Developers need to design applications which meets current trends , such as fingers touch support, intuitive operation and attractive graphic design. It was inevitable to use 3rd party components that have it all – Resco MobileForms Toolkit 2011.

About Resco MobileForms Toolkit

Resco MobileForms Toolkit is one of the richest and most comprehensive sets of Microsoft Visual Studio controls and libraries designed for developers of software solutions for mobile devices. In its portfolio there are controls and libraries that tackle most problems developers encounter in the mobile environment. Flexible keyboard, professional list control, powerful grid control, charting control, and scheduling control - to mention only the most frequently used ones.

For more information about Resco MobileForms Toolkit, visit http://www.resco.net/developer/mobileformstoolkit/default.aspx

Take a look at the sample application made with Resco MobileForms Toolkit controls:

Follow us:

twitter.pngfacebook_48.pngyoutube_48.png

http://blog.resco.net

License

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


Written By
Marketing Resco
Slovakia Slovakia
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralWindows Mobile dead Pin
aa.azizkhani13-Oct-11 7:33
aa.azizkhani13-Oct-11 7:33 
Windows Mobile dead Blush | :O Blush | :O Blush | :O

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.