Wednesday, March 03, 2010

SliderList control


kinetic scrollable list with functional items

the list items can be simple text, check items with and without thumbnail and radio items. All items can be grouped, but do not have to. If you use grouping, you can decide, if the group is collapsible/expandable or not (see also screen shots)
Each item may have ChildItems (despite to the group items, which have *SubItems*). The child items slide in view either by using a ParentItem, which has a "button" to scroll the children in view, or by sliding the finger from right to left after tapping on the item.

If you need another functionality for your item, you can either inherit and extend the item that fits best, or implement IItem on your own.

Some annotations and sources...

- To skin the control you can use PNG graphics. The transparent color will be the bottom right pixel.
- If you use a graphic as background the height of the item is determined my the bitmap.
- If you inherit from TextItem (as it is done by CheckItem) you have to specify the textRect for the underlying item to render the text correctly.
- the SliderList has an event OnFocusedControl that is fired after tipping on an IItem. After this event the event chain for the items is fired.


SLIDERLIST EVENTS:
event OnItemFocused
is fired when an item is clicked


SLIDERLIST PROPERTIES:
List Items { get; }
Retrieves the list of items.

bool ShowIndicator
Determines if the indicator bar (Scrollbar) is shown

Color IndicatorColor
The color of the indicator.

Bitmap IndicatorBitmap
Is used as the list indicator. If this is used, the height of the indicator is determined by the height of the bitmap. The indicator color is ignored.

int TopIndex
The index of the IItem that is shown on top of the list.

IItem FocusedItem
The IItem that is currently focused.

Image BackgroundImage
The background image to use.


SLIDERLIST METHODS:
void AddItem( IItem Item )
Add one item to the list

void RemoveItem( IItem Item )
Removed the item from the list

void IndexOf( IItem Item )
Get the index of the item.

void InsertItem( int Index, IItem Item )
Inserts the Item at Index position.

void Clear()
Clears the list of items.

void SlideToChildren()
If the focused IItem has children, the list slides to the left and from the right the list with the children appears.

void SlideToParent()
When a list with children is displayed, it slides out to the right and the list with its parent item appears from the left.

void ScrollInView( IItem Item )
Ensure that the IItem is visible (this could be improved, because the IItem will always be the top item)

void BeginUpdate()
Prevent the list from updating while adding/removing items. If you call it twice, you also have to call EndUpdate twice before the list invalidates itself.

void EndUpdate()
Internally counts back how many BeginUpdate were called. If non is left the control invalidates.

internal Recalculate()
Used by GroupItem to be sure after adding/removing SubItems to have the internal list parameters recalculated



ITEMS
IItem interface
Implement this interface for own items.
Additional to the events and properties of IItem the items can have own events, methods and propertis

BaseItem
Bitmap Background : the background image that is used. If background image is used, the item height is determined by the image. Otherwise it can be set by property or constructor.

TextItem
string Text : the text to draw.
Font Font : the font to draw the text.
Color TextColor : the text color.
protected Rectangle textRect : internal used rectangle in which the text is drawn.

RadioItem (derived from TextItem)
Bitmap IconUnchecked : the bitmap displayed right hand side of the item as unchecked state
Bitmap IconChecked : the bitmap displayed right hand side of the item as checked state.
bool Checked : get/set checked state.

CheckItem (derived from TextItem)
event ItemChecked OnItemChecked : fired by cheking/unchecking the item
event ThumbnailClicked OnThumbnailClicked : fired by clicking on the thumbnail (if set)
Bitmap Thumbnail : the image that is displayed left hand side (if not set the corresponding event cannot be fired)
Bitmap IconUnchecked : the bitmap displayed right hand side of the item as unchecked state
Bitmap IconChecked : the bitmap displayed right hand side of the item as checked state.
bool Checked : get/set checked state.
bool CompleteItemCheck : get/set whether to check/uncheck the item by clicking anywhere (not thumbnail) on the item

ParentItem (derived from TextItem)
event ThumbnailClicked OnThumbnailClicked : fired by clicking on the thumbnail (if set)
Bitmap Thumbnail : the image that is displayed left hand side (if not set the corresponding event cannot be fired)
Bitmap IconShowMore : the icon used to indicate that children are available.
when clicked on that bitmap the list slides automatically to the childrens list.

GroupItem (derived from TextItem)
Bitmap IconExpanded : the icon used to indicate the list can be collapsed.
Bitmap IconCollapsed : the icon used to indicate the list can be expanded.
bool Expanded : get/set the expanded/collapsed state
AddSubItem( IItem SubItem ) : add a new item to the group.
RemoveSubItem( IItem SubItem ) : remove an item from the group

RadioGroupItem (derived from GroupItem)
takes care that only one RadioItem can be checked. Other items are allowed in that list.

The most common problems
using the items and not setting the Font property!
Using GroupItems and not adding them to the SliderList before adding SubItems to the group

SliderList control

No comments: