The Dynamic Resolution application block is just way too cool. So one of the on going issues with building applications for mobile devices with different screen orientations and resolutions is what to do when it changes (eg toggle between portait and landscape on a single device). With version 2 of the .NET CF we now have anchoring and docking, but this just doesn’t cut it – a screen layout that is designed for a portait device, just isn’t going to be appropriate when it is in landscape. The solution to this is to have different resource files for each orientation/resolution. This is where the Dynamic Resolution application block is useful (class library below).
This application block is broken into two parts. There is a device project (DynamicResolution) which you SHOULD reference in your project and there is a desktop designer project (DynamicReosltion.Designer) which you should NOT reference in your project.
In order to take advantage of this application block you need to create a control (or multiple) that inherit from the DynamicResolutionControl. When you open this control in the designer you will see that it starts to generate additional resx files (eg Form1.240×320.resx or Form1.320×240.resx). If you want to adjust the layout for a different orientation/resolution you can use the control properties to specify:
- FormFactor (drop down listing all skins installed)
- IsDefault (whether this layout should be used if no other specific layout found)
- Orientation (Horizontal or Vertical)
Alternatively if you only want to rotate the current layout you can select Rotate from either the right-click context menu (off the control) or from the action list on the properties grid.
As you change orientation/resolution you will see that additional resource files are created. If you also change the language/region you will see that specific language resource files are created. For example you may end up with a list of resource files like this:
MyControl.vb
MyControl.Designer.vb
MyControl.resources
MyControl.resX
MyControl.240×240.resX
MyControl.240×320.resX
MyControl.320×240.resX
MyControl.320×240.ar.resX
MyControl.320×240.ar-EG.resX
The last two resx files are Arabic (ar) language and Arabic (Egypt) (ar-EG) language/region resource files for the 320×240 display.
Now when you use this control you will see that it changes the layout depending on the orientation/resolution of the device that it is running on. However, there is a slight issue with the current version that is evident if you dock your control (for example if you dock your control into the main Form area). It appears that the resources are applied after docking occurs, which means that sub-controls appear in the wrong location and the wrong size.
The fix for this is relatively straight forward. Modify the ApplyResource method in the DynamicResolutionControl class to include the following lines:
private void ApplyResources()
{
DockStyle oldStyle=this.Dock;
if (this.Dock != DockStyle.None)
this.Dock = DockStyle.None;
….
this.Dock = oldStyle;
}