For one of our Surface related projects we needed to create a scrolling panel that makes the centered item look bigger. In top of that the items should grow gradually as they approach the center and shrink again as they move away.

The idea I implemented to achieve this effect is to bind the ScaleX and ScaleY properties of the ScaleTransform for the content images to a Gauss-curve. The following picture shows these normal distributions. Using the parameters of the functions you can easily control the height, width and position of the curve. This enables us to create the fish-eye effect.

I used the standard formula (see http://en.wikipedia.org/wiki/Gaussian_function):

for some real constants a > 0, b, c > 0, and e ≈ 2.718281828 (Euler's number). The graph of a Gaussian is a characteristic symmetric "bell curve" shape that quickly falls off towards plus/minus infinity. The parameter a is the height of the curve's peak, b is the position of the centre of the peak, and c controls the width of the "bell".

Using a, b and c we can thus control the shape of the bell and hence the shape of the Fish-Eye.

The final result looks like this:

I have included a demo-project showing the code for a proof-of-concept control. Please feel free to use the code but bear in mind that this is not production code and it is provided as is. If you feel like it, just let me know what you think about it and whether you are using it. All other comments, ideas or suggestions are also welcomed.

FishEyeScrollPanel.zip (1,96 mb)