How to make a GUI that works on all window mobile phones?

Question

Hi

Up to now I been using the pda emulator in visual studios 2008 (I am using windows mobile 6.1 professional sdk).

So I just dragged and dropped most of my GUI components into the form. In one instance I made a panel then in this panel I dynamically generated labels in it with certain location positions.

I then put it on my Hp PAQ 110 Classic pda and it looked fine and everything. Then I was looking through the emulators one of them was called professional square. So I decided to run it and when it ran my program it looked like crap.

I had missing labels, missing controls and it just looked horrible.

I thought maybe it would like do some resizing for me but it seems to either did a shitty job or it does not do it at all.

So how do you make a GUI that will work well on all mobile phones(or at least the vast majority of them).

Is there like X number of types of mobile phones? Like the emulator emulates a pda and it works on my HP one so I am assuming that all window mobile device pdas have the same screen size.

Then the next question is how do you make the controls position properly from one device to another? I heard of people using XML files that have all the location position, sizes and etc that they call up and I guess essentially generate the GUI dynamically based on the information in XML.

But I could not find any examples how the XML file would look like, how to detect what phone type it is so that I could call up the right node of the file for that phone.

I am not sure if there are any other ways but this seems better then a set of GUI forms for each one.

Also would it be recommended to have most things in a panel so that way even if the stuff is bigger you can at least turn auto scrolling on.

thanks

Answer 1

I spent a good amount of time looking at different solutions for this problem (see my question here as well) and ended up with a pragmatic approach - consistent use of docking. You have to restrict yourself to the least common denominator, i.e. the lowest resolution you want to support, in terms of how much you can fit on the screen. The good news was that grids always use the entire available real estate, and my forms flow correctly on all devices and the screens don't look like they are broken.

Answer 2

This is far from being an easy task. You can follow some guidelines, but the only thing that will actually work is to always test the User Interface in all possible screen resolutions. Emulators are a good way to start, however it will be better to have an actual device. Some things like font sizes and text readability can only be tested in a real device. So, these are my advices:

• Try to use docking for positioning your controls.
• You need to be able to handle orientation changes correctly. Using docking helps, but again you always need to test in different screen resolutions.
• At some point you will find out that it is inevitable to detect the screen size and adapt the User Interface dynamically. I don't agree that you should restrict yourself to only display what can fit in the smallest screen. A professional application should adapt itself to the available screen size and take full advantage of it.
• Structure your application so that it is easy to support new screen resolutions. Make the main User Interface code screen size agnostic. Make it get all information about dynamic resizing - positioning from a configuration class. This way you only need to enhance a single item in your code in order to support a new screen resolution.

And of course:

• Test in all possible screen resolutions. After even a minor change to the User Interface, retest.

Answer 3

Hi

Eventhough the above posts where helpful this video I found solves all my problems and you don't have to develop for the the lowest screen.

http://www.microsoft.com/events/series/detail/webcastdetails.aspx?seriesid=86&webcastid=5112