Enlarge image thumbnail image on pair

Question

Can someone offer me some tips on how I can implement a control in Silverlight that displays thumbnails of images that, when frozen, enlarge it to a larger size?

Answer 1

I did something similar for a button. Here is the code for this - I'm sure you can easily adapt it to work with the image. Note that I have never released this code; it was just an experiment when I studied Silverlight. Do not take this as an example of best practice.

XAML:

<UserControl x:Class="GrowingButton.Page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="300"> <Grid x:Name="LayoutRoot" Background="White"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Grid.Resources> <Storyboard x:Name="growStoryboard"> <DoubleAnimation Storyboard.TargetProperty="Width" Storyboard.TargetName="testButton" Duration="0:0:0.1" By="20"> </DoubleAnimation> <DoubleAnimation Storyboard.TargetProperty="Height" Storyboard.TargetName="testButton" Duration="0:0:1" By="-20"> </DoubleAnimation> </Storyboard> <Storyboard x:Name="shrinkStoryboard"> <DoubleAnimation Storyboard.TargetProperty="Width" Storyboard.TargetName="testButton" Duration="0:0:1" By="-20"> </DoubleAnimation> <DoubleAnimation Storyboard.TargetProperty="Height" Storyboard.TargetName="testButton" Duration="0:0:0.1" By="20"> </DoubleAnimation> </Storyboard> </Grid.Resources> <Button x:Name="testButton" Content="Test" Grid.Column="1" MouseEnter="Button_MouseEnter" MouseLeave="Button_MouseLeave" VerticalAlignment="Center" HorizontalAlignment="Center" Width="50" Height="50"> </Button> </Grid> </UserControl> 

code:

 public partial class Page : UserControl { public Page() { InitializeComponent(); } private void Button_MouseEnter(object sender, MouseEventArgs e) { this.shrinkStoryboard.SkipToFill(); this.growStoryboard.Begin(); } private void Button_MouseLeave(object sender, MouseEventArgs e) { this.growStoryboard.SkipToFill(); this.shrinkStoryboard.Begin(); } } 

Answer 2

As long as your control has a VisualState for the MouseOver state, you can use DoubleAnimation (or DoubleAnimationUsingKeyframes ) for the ScaleTransform in the control.

Creating various VisualStates (inside VisualStateGroup) for your thumbnail / image management will save you from having to connect your events to the code behind. You can also define visual visual scaling in Blend, which is a nice feature.

Answer 3

This page - Fish Eye Menu contains an example that does something similar to what you want. For some reason, it does not display the version of Silverlight, even though I have Silverlight installed. This may be due to the fact that it is in Silverlight 2.