Screen real estate on mobile devices and the SIP

Over the last months I’ve been doing more and more mobile apps. The CF framework 2 really rocks and mobile apps which communicate with PC based app are a welcome extension of functionality. This post marks the start of a new post category : Mobile. I’ll add my older post on the subject.


Mobile devices have small screens. 320*240 pixels used to be default but with smartphones and the iPaq mobile messenger 240*240 is becoming a new standard. Another thing eating up screen real estate is the Soft Input Panel, the screen based keyboard. The problem with that is that it steals away the bottom 80 pixels of the screen. Guidelines for mobile apps advise not to use the bottom 80 liner for text based input controls. That would be quite a waste.


Container controls like a form or a panel have the AutoScroll property. Setting this to true will automatically show up a scrollbar in case the contained controls don’t fit. So when you develop a mobile app based on 320*240 forms it will show with a scrollbar on a 240*240 screen. But this autoscroll property does not work with the SIP. Popping up that still covers the bottom of the form. Searching around for a way to solve this you will find information on a resize of the form when the SIP pops up. This does not work either, the resize event of the form does not fire when the SIP pops up. What does work is this:



  • Cover your form with a panel.

  • Set the panel’s anchors to top, left, bottom, right. So the panel will always cover the full form, whatever size.

  • Set the panel’s autoscroll property to true.

  • Place all the controls on this panel.

  • Add an inputpanel to the form.

An example form will look like this in VS:



Add the following code to the input panel’s enablechanged event



private void inputPanel1_EnabledChanged(object sender, EventArgs e)


{


   const int SIPsize = 80;


   if (inputPanel1.Enabled)


       panel1.Height -= SIPsize;


   else


       panel1.Height += SIPsize;


}


The standard size of the SIP is 80 pixels. When the SIP pops up the panel shrinks by 80 pixels. Autoscroll will keep all controls accessible. When the SIP goes away the panelsize is restored. This is the app on a mobile messenger.



It would be tempting to resize the form itself instead of the panel. This does not work, you cannot change a mobile form from code.

This entry was posted in Mobile. Bookmark the permalink. Follow any comments here with the RSS feed for this post.