Post Reply

Free SliderList control (kinetic scrollable list with functional items)

OP Obelix_A

17th February 2010, 07:46 AM   |  #1  
OP Member
Flag Passau
Thanks Meter: 1
 
81 posts
Join Date:Joined: Oct 2007
More
Hi all!

I've written a small library and hope it is useful for some other software developers, too. As I got so many hints/tweaks/apps from xda-devs for free, I also want to give this lib out for free. But that does not mean that you are not welcome to donate if you like my work

Attached to this post you will find a zip file containing the library and a demo project showing the capabilities of the library.

As you can see on the screen shots below, 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.

Of course you can use any graphics you like to skin the list items. To see how it all works, please have a look at the demo project.

I hope this helps others a little bit!
Best regards,

Obelix

FOR DETAILED INFORMATION SEE NEXT POSTING.



Thanks a lot to my friend amird, who spent hours of his spare time to convert my sample from C# to VB. The sample is also available for download here. If you VB users want to contribute for his hard work, please use this thread to find his paypal button

Changelog:

2.3 improved click stability (list won't move while clicking)
2.2 minor changes
2.1
  • TextItem can now have empty text
  • fixed: Exception if SliderList has no items
2.0
  • GroupItems have events for Before-/AfterCollapse and Expand
  • SliderList has events for Before-/AfterSlideToChildren and -Parent
  • VirtualMode for SliderList (not internally managed items for a huge number of items)
1.8 HeadlineItems don't care about text, only if Color and Font are set
1.7 Added new Items: HeadlineCheckItem and HeadlineRadioItem
1.6 New Item: ControlHostItem
1.5
  • sliderList.Recalculate is now public (was internal)
  • OnItemFocused fired when FocusedItem is manually set
1.4 GroupItems have now published property SubItems
1.3
  • CheckItem Property: CompleteItemCheck (to check/uncheck the item by clicking anywhere (not thumbnail) on the item
  • internal Recalculate() in SLiderList. Used by GroupItem to be sure after adding/removing SubItems to have the internal list parameters recalculated
1.2
  • new methods (see next Post)
  • GroupItem and RadioGroupItem constructor changed and problem fixed when used in a ChildItem list
  • pInvoke added (BasItem) to exactly calculate multi line text height in TextItem
  • Static string SliderList.Version to get the current Version (would be nice to see this in your about screens )
  • Used some Invokes to make it WM5 compatible and thread save
1.1 event chain changed
1.0 Initial release

If you like my work, you can buy me a glass of wine
Attached Thumbnails
Click image for larger version

Name:	checkitems.jpg
Views:	3292
Size:	64.1 KB
ID:	282062   Click image for larger version

Name:	childitems.jpg
Views:	2347
Size:	70.2 KB
ID:	282063   Click image for larger version

Name:	collapsedgroup.jpg
Views:	2019
Size:	66.9 KB
ID:	282064   Click image for larger version

Name:	radioitems.jpg
Views:	1642
Size:	45.1 KB
ID:	282065   Click image for larger version

Name:	simpletext.jpg
Views:	1686
Size:	75.9 KB
ID:	282066  
Attached Files
File Type: zip SliderListControlDemo.zip - [Click for QR Code] (482.9 KB, 683 views)
File Type: zip SliderListControlVB.zip - [Click for QR Code] (42.8 KB, 359 views)
File Type: zip SliderList_2.3.zip - [Click for QR Code] (46.6 KB, 511 views)
Last edited by Obelix_A; 20th April 2010 at 11:12 AM.
17th February 2010, 07:52 AM   |  #2  
OP Member
Flag Passau
Thanks Meter: 1
 
81 posts
Join Date:Joined: Oct 2007
More
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

event BeforeSlideToChildren OnBeforeSlideToChildren
is fired fired before the list slides to ChildItems of the focused item.

event BeforeSlideToParent OnBeforeSlideToParent
if fired before the list slides from the ChildItems back to the parent.

event AfterSlideToChildren OnAfterSlideToChildren
is fired fired after the list slided to the ChildItems

event AfterSlideToParent OnAfterSlideToParent
is fired after the list slided back to the ParentItem.

event GetMaxHeight OnGetMaxHeight
is fired in VirtualMode to determin some values.

event GetItem OnGetItem
is fired in VirtualMode to get the currently rendered item.

event GetIndexOf OnGetIndexOf
is fired in VirtualMode to determin the index of an item for the SliderList


SLIDERLIST PROPERTIES:
List<IItem> 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

void StartVirtualMode()
Starts the virtual mode. Can be called whenever changed on the items were made to reflect the changed in the SliderList.


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)
BeforeCollapseOrExpand OnBeforeCollapseOrExpand : fired before items is collapsed or expanded.
event AfterCollapseOrExpand OnAfterCollapseOrExpand : fired after item is collapsed or expanded.
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
List<IItem>SubItems : gets the IItems list of this group. Don't forget to call sliderList.Recalculate() after changing the list directly!

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

ControlHostItem
Control Control : the control to be hosted (may be TextBox or UserControl. See DemoProject)
depending on the guest control scrolling may be slow!

HeadlineCheckItem (derived from TextItem)
same settings as CheckItem
Font HeadlineFont (must be set to get headline displayed)
Color HeadlineColor (must be set to get headline displayed)
String HeadlineText

HeadlineRadioItem (derived from TextItem)
same settings as RadioItem
Font HeadlineFont (must be set to get headline displayed)
Color HeadlineColor (must be set to get headline displayed)
String HeadlineText

As example for extending the control with own items I post the source of CheckItem here.


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
  • Using Headline items and not setting Font/Color/Text for the Headline (results in headline not drawn)


Have fun!
Obelix
Attached Files
File Type: zip IItems.zip - [Click for QR Code] (409 Bytes, 306 views)
File Type: zip CheckItem.zip - [Click for QR Code] (892 Bytes, 215 views)
Last edited by Obelix_A; 18th March 2010 at 10:07 AM.
18th February 2010, 03:57 PM   |  #3  
Junior Member
Thanks Meter: 0
 
10 posts
Join Date:Joined: Aug 2005
for German speaking developers: http://www.pocketpc.ch/news/78204-fu...t-control.html
18th February 2010, 04:04 PM   |  #4  
Senior Member
Flag East Greenwich, RI
Thanks Meter: 2
 
876 posts
Join Date:Joined: Oct 2009
More
Very cool.
18th February 2010, 06:59 PM   |  #5  
OP Member
Flag Passau
Thanks Meter: 1
 
81 posts
Join Date:Joined: Oct 2007
More
... thanks!
I thought nobody will comment in any way...

I hope some suggestions and hints will show up. Maybe devs will use it in real world apps and will post screen shots and links to their software.
18th February 2010, 07:36 PM   |  #6  
efsane's Avatar
Senior Member
Flag Sivas-Merkez
Thanks Meter: 87
 
202 posts
Join Date:Joined: Mar 2007
More
Thank Obelix_A nice work !
19th February 2010, 01:21 AM   |  #7  
jdep1's Avatar
Senior Member
Flag El Paso
Thanks Meter: 15
 
223 posts
Join Date:Joined: Sep 2009
More
Thanxs for your hard work
19th February 2010, 07:50 AM   |  #8  
Member
Flag ZHENGZHOU
Thanks Meter: 2
 
46 posts
Join Date:Joined: Apr 2008
More
how to use?
19th February 2010, 07:51 AM   |  #9  
Junior Member
Thanks Meter: 0
 
20 posts
Join Date:Joined: Jun 2008
More
looks nice. will try it in one of my next projects!
19th February 2010, 08:02 AM   |  #10  
Junior Member
Thanks Meter: 2
 
28 posts
Join Date:Joined: Nov 2007
Thank you! Very good! Whether you plan to make library with an open source?

P.S. Sorry, my English is so bad.

P.P.S. ClickedItem example:
Code:
using System;
using System.Linq;
using System.Collections.Generic;
using System.Text;
using System.Drawing;
using Microsoft.Drawing;

namespace ARBOControls.PPC.SliderList
{

    public delegate void ItemClicked(IItem Item);

    public class ClickedItem : TextItem
    {
        public event ItemClicked OnItemClicked;

        public Bitmap Thumbnail { get; set; }
        protected Rectangle ThumbRect = new Rectangle(-1, -1, -1, -1);

        public ClickedItem(SliderList SL)
            : base(SL)
        {
        }

        #region IItem Members
        public override void Paint(System.Drawing.Graphics G, int Top, int Width)
        {
            int lMargin = 3;
            int thumbWidth = 0;
            if (Thumbnail != null)
            {
                int h = Thumbnail.Height;
                thumbWidth = Thumbnail.Width;
                lMargin = (this.height - h) / 2;
                ThumbRect = new Rectangle(lMargin, Top + lMargin, Thumbnail.Width, Thumbnail.Height);
            }

            int rMargin = 3;
            int bWidth = 0;
            textRect = new Rectangle(2 * lMargin + thumbWidth, Top + 4, Width - (2 * lMargin + thumbWidth) - (2 * rMargin + bWidth), height - 9);
            base.Paint(G, Top, Width);

            if (Thumbnail != null)
                G.DrawImageTransparent(Thumbnail, ThumbRect);
        }

        public override void Click(Point Position)
        {
            base.Click(Position);
            if (OnItemClicked != null)
                OnItemClicked(this);
        }
        #endregion
    }
}
Last edited by agcforum; 19th February 2010 at 08:07 AM.

Post Reply Subscribe to Thread

Tags
control, kinetic, list, manila list, slide
Previous Thread Next Thread
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes