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}}"
Width="32"
Height="32" />
<Image Source="{Binding Source={x:Static Images:ImageConstants.CONTACTS}}"
Width="32"
Height="32" />
<Image Source="{Binding Source={x:Static Images:ImageConstants.CALENDAR}}"
Width="32"
Height="32" />
</Controls:FishEyeControl>

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

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

Animated Dashboard

Please let me know if this helps you.

9 comments:

Anonymous 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? :)

Anonymous said...

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

Anonymous said...

Is it possible to stow them?
Thanks.

Anonymous said...

Thank you that's cool