Problem solve Get help with specific problems with your technologies, process and projects.

Patterns for smart devices: Soliving the multiple resolution/orientation problem

Mobile development is similar to Web development in that clients that will be using an application may not be under your control, and they may support different sets of features and capabilities. With mobile devices, the most challenging issue is how to support different form factors and screen orientations. In this article, Daniel Cazzulino shows how the Mobile Client Software Factory (MC-SF) is a simplification for authoring UIs for multiple devices.

The reality of mobile development (especially if you're creating a product) is not so different to that of Web development: the clients that will be using the application may not be under your control, and they may support different sets of features and capabilities. In the ASP.NET world, this was solved by the set of mobile-enabled controls, that basically rendered different markup depending on the device. Even in ASP.NET 2.0, this solution, the so-called control adapters architecture, is still in its infancy and not fully completed in its integration with the "standard" controls.

In the mobile development world, the problem is not even in its infancy. Up to now, that is.

In the devices world, the critical difference between clients is not on the platform (as in the web, where you have different browsers supporting different standards, etc.). When you decide to develop your application using .NET Compact Framework (CF), you're already filtering the range of devices to Windows-based (most probably Windows Mobile 5.0 if it's a brand new one) Pocket PCs or SmartPhones. In this scenario, your most challenging issue is how to support the different so-called form factors (or resolutions, such as VGA, QVGA) and screen orientations (can be landscape or portrait).

More on the .NET Compact Framework
.NET Compact Framework: Less is more, especially on mobile devices 

Book excerpt: Creating graphical output using the .NET Compact Framework 

Your first app with the .NET Compact Framework and smart device extensions

The Microsoft .NET Compact Framework 2.0 introduces some features that certainly help alleviate the problem, specifically in the WinForms area, where you can use the familiar docking and anchoring funcionality to have your controls automatically resize according to screen size. However, this falls short for most applications. For example, say you're displaying a purchase order in a vertical QVGA screen (240x320). Most probably you have laid out the controls so that each value you want to show is displayed in a single "line." Well, if the screen is rotated, you probably don't want to simply make your fields wider. That may be a waste of valuable space, and result in a poorer user experience by the requirement to constantly scroll the screen. In this case, it may actually be better to lay out controls differently, so that you can for example display two values per "line."

Of course, the logic of the user control/form (hereafter simply referred to as "control," which is even technically correct as the Form class inherits from Control too) is the same -- the data binding, event wiring, the controller/presenter logic, etc. So in an ideal world the layouts would be sort of "skins" for the control, that are applied dynamically depending on the current device form factor and orientation.

If you think for a moment on the problem at hand, and how the ideal solution would look like, you may realize that the .NET Framework (and therefore the CF too) already provides a mechanism that allows applying "skins" to WinForms controls: localization. Making a form localizable allows you to completely re-arrange the layout for each supported language, including size, location, text, etc. Basically any property that has been "tagged" with [Localizable] can participate in this "skinning."

Good news is that the Mobile Client Software Factory (MC-SF) from Microsoft's Patterns & Practices group makes this ideal solution a reality with the introduction of a custom user control that you can use as the base class for yours. I've been working for the past few weeks on this feature, and I think it's an absolutely revolutionary simplification of the way you will author UIs for multiple devices. In future posts I will discuss its features and implementation, but in the meantime, here are a number of screenshots that should speak for themselves.

In this picture you can see the new Rotate verb on the context menu of a derived control, and also the new dependent file TeamView.resources, which I'll explain in future posts and is the key to the multiple resources design. You can also see the new Orientation property in the Design category, as well as the Localizable property which is now read-only and forced to True. I already hinted that our solution leverages the localization features of .NET, and therefore relies on that property being True.

Here you can see that the horizontal layout for the very same control has a completely different design. The labels and textboxes are now on the right side, to take advantage of the extra space available in landscape mode, and to avoid unnecessary scrolling.

This is a screenshot of the emulator running the application with the orientation aware control. In a future post I will link to the download of this sample, so that you get to know the team behind the Mobile Client Software Factory . (That's what the data on the list is).

Finally, you can see that when the user rotates the screen, the control automatically re-applies the corresponding layout. Pretty cool, right? Stay tuned.

For more information, check out Daniel Cazzulino's blog.


Next Steps

How do I create retina images for mobile devices?

Dig Deeper on .NET mobile application development

Join the conversation


Send me notifications when other members comment.

Please create a username to comment.

So, if I understand this correctly, it’s using inheritance to keep the developer from having to specifically plan and code the form for each size / screen orientation?
I get that it's really hard to make sense (or standardization) out of the plethora of form factors and operating systems. But I have hopes for the not-too-distant future.

For many years language was thought impossible to translate in real time. Along came Google's Universal Translator, echoing the prescient adventures of Star Trek. Far from an exact match to our specs, it actually works. Next year it'll work better. And the year after that, I suspect, we'll have forgotten that it wasn't quite perfect at launch.