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

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?
Thanks.

Anonymous said...

Thank you that's cool