Enlarge an image thumbnail on hover

0 votes
asked Sep 10, 2009 by goober

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 it to a bigger size?

3 Answers

0 votes
answered Sep 10, 2009 by jeff-yates

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();
    }
}
0 votes
answered Sep 10, 2009 by justin-niessner

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.

0 votes
answered Sep 11, 2009 by chrisf

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.

Welcome to Q&A, where you can ask questions and receive answers from other members of the community.
Website Online Counter

...