Agrandir plusieurs images avec survol

Question

Alors j'essaie d'agrandir une image avec Survolez, alors j'ai examiné quelques exemples en ligne et il est capable de travailler pour une seule image, mais je voudrais que cela fonctionne avec plusieurs images, ce sont les codesJ'ai trouvé en ligne qui fonctionne avec une seule image (crédit à Jeff Yates pour fournir la solution)

xaml:

        <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-derrière:

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 1

J'utiliserais une animation sur ScalTransform pour le faire comme si:

    <Storyboard x:Key="MouseOverRectangleStoryBoard">
        <DoubleAnimation BeginTime="0:0:0" Duration="0:0:0.1" From="1" To="1.1"
                         Storyboard.TargetProperty="(Rectangle.RenderTransform).(ScaleTransform.ScaleX)">
        </DoubleAnimation>
        <DoubleAnimation BeginTime="0:0:0" Duration="0:0:0.1" From="1" To="1.1"
                         Storyboard.TargetProperty="(Rectangle.RenderTransform).(ScaleTransform.ScaleY)">
        </DoubleAnimation>
    </Storyboard>

    <Storyboard x:Key="MouseLeaveRectangleStoryBoard">
        <DoubleAnimation BeginTime="0:0:0" Duration="0:0:0.1" From="1.1" To="1"
                         Storyboard.TargetProperty="(Rectangle.RenderTransform).(ScaleTransform.ScaleX)">
        </DoubleAnimation>
        <DoubleAnimation BeginTime="0:0:0" Duration="0:0:0.1" From="1.1" To="1"
                         Storyboard.TargetProperty="(Rectangle.RenderTransform).(ScaleTransform.ScaleY)">
        </DoubleAnimation>
    </Storyboard>

Le code est pour un rectangle mais c'est exactement la même chose.