Silverlight - Image Thumbnail Enlarge on HoverOver!??!

Question

Hello! Could anyone offer me some advice on how I might go about implementing a control in Silverlight that displays image thumbnails that when hovered over, enlarge to a bigger size!?

Help greatly appreciated.

Answer 1

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

Creating the different VisualStates (inside a VisualStateGroup) for your thumbnail/image control will save you the trouble of having to wire your events in the code behind. You'll also be able to define the different scaling visually in Blend which is a nice feature to have.

Answer 2

I did something similar for a button. Here is the code for that - I'm sure you can adapt it easily to work with an image instead. Note that I never actually released this code; it was just an experiment when I was learning Silverlight. Don't take it as an example of best practise.

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 3

This page - Fish Eye Menu has an example that does something similar to what you want. For some reason it's not displaying the Silverlight version despite me having Silverlight installed. It might be something to do with it being in Silverlight 2.