Agrandir une image miniature en survol

Question

Quelqu'un pourrait-il me donner des conseils sur la manière de mettre en oeuvre un contrôle dans Silverlight qui affiche des vignettes d'image qui, une fois survolé, permettent de l'agrandir davantage?

Answer 1

J'ai fait quelque chose de similaire pour un bouton. Voici le code pour cela - je suis sûr que vous pouvez l’adapter facilement pour travailler avec une image. Notez que je n'ai jamais réellement publié ce code; c'était juste une expérience quand j'apprenais Silverlight. Ne le prenez pas comme exemple de meilleure pratique.

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

Tant que votre contrôle a un VisualState pour l'état MouseOver, vous pouvez utiliser un DoubleAnimation (ou DoubleAnimationUsingKeyframes ) pour effectuer une ScaleTransform sur le contrôle.

La création des différents VisualStates (dans un VisualStateGroup) pour votre contrôle vignette / image vous évite d'avoir à câbler vos événements dans le code qui se trouve derrière. Vous pourrez également définir visuellement les différentes mises à l’échelle dans Blend, ce qui est très pratique.

Answer 3

Cette page - Menu Fish Eye a un exemple qui fait quelque chose de similaire à ce que vous voulez. Pour une raison quelconque, la version Silverlight n’a pas été affichée malgré le fait que Silverlight soit installé. Cela pourrait être dû au fait qu’il se trouve dans Silverlight 2.