I loved the cool fisheye effect that Amir Khella described in his blog. He used a WPF grid, created grid columns of star width, placed objects within the columns and added handlers on mousemove/leave to change the star factor of the grid-width based on mouse location. Simple code, but very cool effect.

However, I wanted it to be more scalable. I wanted all the magic to happen automatically and all the user should do is just add/remove items to the grid and viola the grid just applies the fisheye effec to its children. Also, in Amir's example, if I wanted the effect to be vertical instead of horizontal, then I would have to remove grid columns and use Grid rows instead. All this should just be taken care of by the Grid itself. And so, I decided to write my own custom grid control that does all of the above.

The FishEyeGrid control is designed to stack children either horizontally or vertically by just setting its Orientation property, as this makes it easier to place the child within particular rows/columns.. Also, it silently adds rows/columns depending on orientation whenever a new child is added/removed.

The Orientation property is animatable as well. So feel free to have fun changing the orientation of the control during the lifetime of the app.

I have attached the source code to this post. Note, that this was tested on Feb CTP of WPF and March CTP of Expression Interactive Designer.

Feel free to use the control to enrich your applications and let me know what you think. 

Using FishEyeGrid in Expression Interactive Designer

Horizontal Orientation:

Vertical Orientation:

Here are the steps for creating the above FishEye effect on bunch of images.

1. In Expression Interactive Designer (EID), create new project.
2. Project -> Add reference .. Add the attached FishEyeGrid.dll
3. In Library palette, select FishEyeGrid in the assembly combobox. Then select FishEyeGrid library item.
4. With FishEyeGrid selected in the library palette, draw the grid to fill the size of the artboard. Change the background color of the grid to a linear gradient for better look.
5. Project -> add existing items. Add any images you have on your machine.
6. Double click on the FishEyeGrid in the Timeline tree view to make it the active element.
7. In the Project palette, double click on the image items so that they get added as children to the FishEyeGrid in the artboard. Note that the items automatically get stacked and resized to fit the invisible grid row/column size.
8. Hit F5, to build the project and view the built application.
9. By default orientation is horizontal. You can change it to Vertical by selecting the FishEyeGrid in the timeline and then setting the Orientation property in the Properties palette.
10. You can also animate the Orientation property using the timeline and setting keyframes at different times and then looping the animation.

Using FishEyeGrid control in WPF

Here is how you can use it in xaml. (Default Orientation is Horizontal)

<CustomControls:FishEyeGrid Margin="56,44,98,87" x:Name="FishEyeGrid" RenderTransformOrigin="0.5,0.5">
     <Button Content="Button1"/>
     <Button Content="Button2"/>
     <Button Content="Button3"/>
     <Button Content="Button4"/>
 </CustomControls:FishEyeGrid>

Here is how you can use it in code: (Here we explicitly set the orientation to be vertical)

public partial class Scene1
 {
    public Scene1()
     {
      FishEyeGrid fishEyeGrid = new FishEyeGrid();
      fishEyeGrid.Orientation = Orientation.Vertical;
      fishEyeGrid.Children.Add(new Button());
      fishEyeGrid.Children.Add(new Button());
      fishEyeGrid.Children.Add(new Button());
      fishEyeGrid.Children.Add(new Button());
      this.Children.Add(fishEyeGrid);
     }
 }

Feel free to use the control to enrich your applications and let me know what you think.