iPhone like List Scrolling with FingerFlicker

Download source - 50.95 KB

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.

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.