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.