Wednesday, December 10, 2008

WPF Fisheye Control

If you are a big fan of Apple - Mac OS X Leopard, you will love this WPF animated dashboard that I've created.

I was inspired to build a control (Fish Eye effect) that would mimic the dashboard of the Mac's.

This is a simple implementation of the Fish Eye control:

<Controls:FishEyeControl VerticalAlignment="Bottom">
<Image Source="{Binding Source={x:Static Images:ImageConstants.MESSAGES}}"
Height="32" />
<Image Source="{Binding Source={x:Static Images:ImageConstants.CONTACTS}}"
Height="32" />
<Image Source="{Binding Source={x:Static Images:ImageConstants.CALENDAR}}"
Height="32" />

This is a dynamic implementation (ItemsControl) of the Fish Eye control:

<ItemsControl ItemsSource="{Binding Path=DashBoardApps}" VerticalAlignment="Bottom" HorizontalAlignment="Center">
<Controls:FishEyeControl />
<StackPanel Orientation="Vertical">
<TextBlock x:Name="txtAppName"
Text="{Binding Path=ApplicationName}"
Foreground="#eff7ff" />
<Button Width="32" Height="32">
<Image Source="{Binding Path=ApplicationImage}" />
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="txtAppName" Property="Visibility" Value="Visible" />

Animated Dashboard

Please let me know if this helps you.


Kevin Doolan said...

Very slick - clean code too.

James said...

A clean, well implemented control. Paging through your code taught me some useful lessons, thanks!

Thinker said...

The dashboard is marvellous! I replaced my own objects/Images with plastic style very very nice hehe thx a bunch!

Anonymous said...

Hi, any silverlight 3 version? I tried to convert it but failed.

Nicolas said...

Is there a way to put this in a grid cell without any clipping? I've tried using an intermediate canvas but the horizontal alignment is off...

Pontus said...

Hi. Very nice project :)
I'm trying to adapt it, but i facing a problem.
When i try to change the "not-selected"-size in runtime i get problem

If i make them bigger, nothing happens. If i make them smaller, the images shrinks, but they don't move closer. And the results in huge space between the images. Could you make a solution for this? :)

Sarah Tiner said...

Nice blog.We are here for you to provide more technique about Dashboard Control

Anonymous said...

Is it possible to stow them?