Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

How to scroll a customized list box without using a scroll bar

From Wiki
Jump to: navigation, search

This article will show how we can scroll the customized list items drawn on the screen without using a scroll bar. The example make use of TPonterEvent's EDrag event mainly.

Article Metadata
Code ExampleTested with
SDK: [1])
Platform(s): S60 5th Edition
S60 5th Edition
Created: pooja_1650 (13 Mar 2012)
Last edited: hamishwillee (30 May 2013)



In this example we will create a container made up of three sub-containers. The top container or the Header container can be used to draw some header for the page like any image or some status. In this example we are drawing two images in the Header container. The bottom most container or the Footer container can be used to draw such kind of data which changes less frequently. We will show our page status and two buttons(Next/Previous) in this container. The final Middle Container/Main Body Container will be having a list box items drawn on it. This will be a customized list box i.e. all the list box items will be drawn directly on screen with the help of Draw() rather than any native List box API.

  • So. Main Body Container = Total User Space - (Header Container + Footer Container)

The final UI will look like:

Final output will look like this

Listing Page

By default we will show 10 list items on the screen each of which will be made up of a list item heading and two icons. First icon (Call button) will let the user call the corresponding person and second icon ("Location button") will let the user view the location of the corresponding person. Please note that we are not going to implement the calling and the map functionality here so we will just show an information note when ever those icons will be tapped.

Persons Data

We will use some static data (Here, the Nokia Developer Champions names) as our list box headings.

Basic Logic

  • We will divide our Main Body Container into 10 equal areas (in the form of TRects)
  • If you want to show more than 10 items in total, then either you can exceed the list items to be shown on screen at a time or you can use Next/Prev buttons to show further records.
  • Suppose we are using an icon of dimensions 25*25 then our TRect’s height should be minimum 25 pixels so that icon can be viewed easily. We will maintain some buffer height as well in the TRect’s height so that some text (in n number of rows) can be drawn according to our requirement.
  • We will have to maintain a height offset value (integer) which will signify the magnitude which is either incremented or decremented from the previous position. This height offset value will be set as 0 when the application starts and it will be re-calculated every time during the TPointerEvent's EDrag event.
  • We will also maintain a backup height offset value which will store the last value of height offset.
  • The main use of height offset value will be in calculating the new TRect's which needs to be drawn after a drag. For example, suppose initially we are drawing 4 TRect's out of 10 we had. Then after dragging towards up, we will show next TRect items and the first four will be out of sight. The actual number of new list items to be drawn will depend on the amount of dragging which is we are calculating with heigth offset value.

Sample Code

Sample Code is attached with this article which can be downloaded to see it's usage.

This page was last modified on 30 May 2013, at 04:38.
219 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.


Thank you!

We appreciate your feedback.