Silverlight 悬停时放大图像缩略图

有谁能给我一些建议，告诉我如何在Silverlight中实现一个控件，该控件显示图像缩略图，当鼠标悬停在上面时，可以将其放大到更大的尺寸？

只要您的控件具有鼠标悬停状态的VisualState，您就可以使用

双动画

（或者

使用关键帧的双动画

）在控件上执行一个操作

---

为缩略图/图像控件创建不同的VisualState（在VisualState组中）将省去在代码隐藏中连接事件的麻烦。您还可以在Blend中直观地定义不同的缩放比例，这是一个很好的功能。

我为按钮做了类似的操作。这里是代码-我相信你可以很容易地调整它来处理图像。请注意，我从未真正发布过这段代码；这只是我学习Silverlight时的一个实验。不要把它当作最佳实践的例子

XAML：

---

这个页面-有一个例子，做一些类似于你想要的。出于某种原因，尽管我安装了Silverlight，但它没有显示Silverlight版本。这可能与Silverlight 2有关。

您好，我正在尝试做类似的事情，如果我有多张图像，我是否只需在情节提要中添加名称。TargetName=“testButton”

<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>

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();
    }
}