Designing forms to work on different resolutions and aspect ratios on Windows CE

Question

I have a .NET 2.0 application that runs on Compact Framework. It has a bunch of different forms that were all originally designed to run on a specific device with a specific screen resolution. I'm now looking to get this application to run on some other devices that have very different screen resolutions (some have completely opposite aspect ratios where the screen is now taller than it is wide). My question is how can I change my forms to look good on these other screens?

This is a bit different from designing forms on the full framework since I have to design these forms to take up the full screen since the screens are so small. I've thought about creating separate forms for each type of screen orientation (e.g. MyForm_Wide.cs, MyForm_Tall.cs, etc). I'd like to be able to reuse the non-designer generated code that contains a lot of business logic that is tied to the UI controls. Maybe I could somehow use partial classes to make this happen (e.g. MyForm.cs somehow gets compiled into MyForm_Wide.Designer.cs, etc). I'd really like to avoid specifically compiled versions for each screen orientation. Another approach I've thought about is trying to rearrange some controls at runtime based on the determined screen size.

What do you guys think?

Answer 1

We use the Orientation Aware Control framework by Clarius. It solves the problem of not only form factor, but also on devices that support it, change of orientation (screen rotation).

Perhaps the most distinctive aspect of mobile development with regards to traditional desktop development is the need to support an ever increasing range of device form factors.

For expert mobile developers it's no news that designing mobile applications that support multiple form factors, resolutions and screen orientations is a non-trivial, time-consuming and challenging endeavor. It's also generally evident that the built-in docking and anchoring features in .NET Compact Framework v2.0 is far from being sufficient.

The Orientation Aware Control allows designing and coding a single control or form with multiple layouts or skins that are automatically applied at run-time (and design-time) according to the available form factor, resolution and orientation. Its outstanding Visual Studio forms and user control designer integration and zero-code adaptive UI behavior make the Orientation Aware Control a must-have companion for any mobile shop targeting multiple devices, bringing back the productivity you need to focus on growing your business.

Answer 2

Since the c# designers are very 'pixel-orientated' there is no easy way to convert your forms.

I don't know how much effort you want to put into this, but if you have a lot of time and want a really flexible solution I suggest you should use some kind of layout manager that supports flow layouts, border layouts etc.

Of course the original c# designers won't be much help designing these flexible layout-managed forms.

But using a layout manager might slow down the initial display of your form. If you want really high speed form display you will have to calculate all positions of all controls on your form before you show the form. Rearrange the controls and display your form - this is however a lot of coding and not very flexible regarding gui changes.

Answer 3

You should probably set your main forms 'AutoScaleMode' property to 'DPI'.

Then, its a matter of using anchors and docking on your particular controls on the forms. If you do it this way, the compact framework will keep things where you thought they'd be.

Also, can change the 'Form Factor' property of the form to see how your form would look on mobile devices of different sizes and shapes.

Answer 4

I think I've figured out what I want to do. For some reason even on my high res devices the DPI still shows up as 96 according to the WinForms API so the auto scaling isn't doing anything. Instead, if I manually call Scale on my controls I get them to scale out exactly how I want. Now, this doesn't completely solve my problem in scenarios where I don't want to do any scaling but I do want to reorganize my controls if the screen is in the opposite aspect ratio than what I originally designed for. For that case, I think I'm going to look at using different layout panels (e.g. FlowLayoutPanel and TableLayoutPanel) to hopefully organize the controls appropriately.

Hopefully this will help any future Googler...

Answer 5

The 'Auto Size' property on labels messes up when switching between form factors too - btw - so I keep it set to false.