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:
Very slick - clean code too.
A clean, well implemented control. Paging through your code taught me some useful lessons, thanks!
The dashboard is marvellous! I replaced my own objects/Images with plastic style very very nice hehe thx a bunch!
Hi, any silverlight 3 version? I tried to convert it but failed.
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...
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? :)
Nice blog.We are here for you to provide more technique about Dashboard Control
Is it possible to stow them?
Thanks.
Thank you that's cool
Post a Comment