(untagged)

Designing UI of Windows Mobile Applications

Resco Developer Tools

11 Oct 2011

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

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.

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

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.

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.

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:

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here