TouchUI - ScrollList (part 10)

by Chris 11. December 2009 10:00

One of the controls that inherit from the ScrollControl (described in the previous part of this series) is the ScrollList control. As the name implies, this is a list that implement modern features like soft (kinetics) scrolling, and the design and functionality was inspired by the table view control on iPhone.

The control holds a generic list of scroll list items (suitably name ScrollListItem), and during the paining of the control, it instructs all the list items to paint themselves. It also takes care of the painting of the background of each item, to enable every other line to have a different background color, and also to highlight the selected item. The painting is efficient in the way that only the items that are (at least partly) visible is painted, and the code looks like this:

public override void Paint(Graphics g)
{
    DoAutomaticMotion();

   
int firstListItem = Math.Max(-(ScrollTop / ListItemHeight), 0);
   
int lastListItem = Math.Min(firstListItem +
        (Rectangle.Height / ListItemHeight) + 2, ListItems.Count);
   
for(int i = firstListItem; i < lastListItem; i++)
    {
       
if(i == SelectedLine)
        {
            ListItems[i].Selected =
true;
            g.FillRectangle(HighBrush,
new Rectangle(0,
                Rectangle.Top + ListItemHeight * i + ScrollTop,
                Rectangle.Width, ListItemHeight));
        }
       
else
        {
            ListItems[i].Selected =
false;
           
if(i % 2 == 1)
                g.FillRectangle(GrayBrush,
new Rectangle(0,
                    Rectangle.Top + ListItemHeight * i + ScrollTop,
                    Rectangle.Width, ListItemHeight));
        }

        ListItems[i].Rectangle =
new Rectangle(0,
            Rectangle.Top + ListItemHeight * i + ScrollTop,
            Rectangle.Width, ListItemHeight);
        ListItems[i].Paint(g);
    }
}

The control also takes care of translating a generic selection in the base class ScrollControl into an selection of an item in the list. The owner of this control, normally a dialog, is notified of each selection through an event (Selected). This is handled for both the finger (mouse) and if a hardware (physical) key on the phone is pressed. This hardware key support means that the control is also functional on a non-touch device.

The implementation of each list item is done by inheriting from ScrollListItem and mainly implement the Paint method. See the sample code for more details.

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags:

Chris | Compact Framework | User Interface | Windows Mobile

Comments

Add comment


(Will show your Gravatar icon)  

  Country flag

biuquote
  • Comment
  • Preview
Loading



Powered by BlogEngine.NET 1.4.5.0
Theme by Mads Kristensen