Click here to Skip to main content
Click here to Skip to main content

iPhone like List Scrolling with FingerFlicker

, 5 Oct 2007
Rate this:
Please Sign up or sign in to vote.
Simple example of how to build a finger controlled list that runs smoothly

Introduction

The other day I went searching on Google for a special list. I wanted it to work like the iPhone's list, but I wanted it to look more similar to Nano's list (I liked the simple layout).

I couldn't find the C# code to do this on Google, so I wrote my own list control. Today the list features a glassy button, double-buffered graphics, Win32 calls for async-audio and gradients. I also implemented multiple threads with event based innerthread communication. The list moves on one thread and is drawn on another.

At any rate, it's a work-in-process. This is not ready for production use, but I'm getting there.

If you search Google Video for "Finger Flick Technology" or click here, you should be able to view a video.

I'll be keeping this page up to date with major releases. You can also check my blog for the latest pre-release.

Screenshot - FingerFlickersmall3.png

The pictures on the bottom are displaying the multi-select mode. It didn't show-up well on the camera. Watch the video on Google here, it looks better in motion.

Using the Code

The first thing you'll notice about this app is how smoothly it scrolls. This is due to off-screen buffering done in the overridden OnPaint and OnPaintBackground events.

Basically off-screen or double-buffering is accomplished by drawing your form on a bitmap, then painting that bitmap on the form. This limits the number of actual graphics commands and improves your draw-rate.

bool paint = false;
Bitmap BackScreen = null;
protected override void OnPaint(PaintEventArgs e)
{
if (paint)
{
if (BackScreen == null)
{
BackScreen = new Bitmap(ClientSize.Width, ClientSize.Height);
}
Brush brush = new SolidBrush(Color.Black);
Graphics g = Graphics.FromImage(BackScreen);
g.Clear(Color.White);
for (int i = 0; i < FakeLabels.Length; i++)
{
g.DrawString(ListData[i], this.Font, brush, 0, FakeLabels[i]);
}
e.Graphics.DrawImage(BackScreen, 0, 0);
paint = false;
}
}

Points of Interest

This project also illustrates how to execute Win32 DLL calls using P/Invoke. One of those DLL calls draws a Gradient, it's a simple trick everyone should have in their code snippets.

The scrolling effect is actually an optical illusion. The labels move up or down in a loop and the text shifts at just the right time to fool your eye...In theory. You be the judge.

History

The initial release here was terrible. The second release wasn't that much better, and so on. The latest release is another step in the right direction, but it's not what it needs to be.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

8r13n

United States United States
No Biography provided

Comments and Discussions

 
QuestionCan we make scrolling horizontal and with BMP images on each list element Pinmemberjohnangelo11-Aug-09 21:39 
Generalwow PinmemberDr.Luiji19-Dec-08 11:15 
QuestionAny chance for some updates? PinmemberSync6-Dec-08 20:39 
GeneralVGA support Pinmembert0PPy29-Sep-08 0:31 
GeneralImplementation PinmemberMember 343459520-May-08 23:23 
GeneralRe: Implementation Pinmembergemming9-Sep-08 14:55 
QuestionWhat hardware and OS is that? PinmemberEd Sutton31-Mar-08 4:16 
GeneralNEW VERSION Pinmember8r13n7-Oct-07 18:28 
GeneralNEW VERSION RELEASED Pinmember8r13n7-Oct-07 10:19 
GeneralCould not open project - 'Platform not found' PinmemberJoeSox6-Oct-07 3:43 
GeneralRe: Could not open project - 'Platform not found' Pinmember8r13n6-Oct-07 12:13 
GeneralRe: Could not open project - 'Platform not found' PinmemberJoeSox6-Oct-07 13:44 
GeneralRe: Could not open project - 'Platform not found' Pinmember8r13n6-Oct-07 14:45 
GeneralRe: Could not open project - 'Platform not found' PinmemberJoeSox18-Oct-07 4:53 
GeneralRe: Could not open project - 'Platform not found' Pinmemberdirtylarry19-Jan-08 15:05 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140826.1 | Last Updated 5 Oct 2007
Article Copyright 2007 by 8r13n
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid