Ingrandisci una miniatura dell'immagine al passaggio del mouse

Question

Qualcuno potrebbe offrirmi qualche consiglio su come potrei fare per implementare un controllo in Silverlight che mostri le miniature delle immagini che una volta passate il mouse sopra lo ingrandiscono?

Answer 1

Ho fatto qualcosa di simile per un pulsante. Ecco il codice per questo: sono sicuro che puoi adattarlo facilmente per lavorare con un'immagine. Si noti che non ho mai rilasciato questo codice; era solo un esperimento quando stavo imparando Silverlight. Non prenderlo come esempio di buone pratiche.

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>

Codice:

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

Finché il tuo controllo ha un VisualState per lo stato MouseOver, puoi usare un DoubleAnimation (o DoubleAnimationUsingKeyframes ) per fare un ScaleTransform sul controllo.

La creazione dei diversi VisualState (all'interno di un VisualStateGroup) per il controllo di miniature / immagini ti farà risparmiare il problema di dover collegare i tuoi eventi nel codice sottostante. Sarai anche in grado di definire visivamente il diverso ridimensionamento in Blend che è una bella caratteristica da avere.

Answer 3

Questa pagina - Fish Eye Menu ha un esempio che fa qualcosa di simile a quello che vuoi. Per qualche motivo non visualizza la versione di Silverlight nonostante io abbia installato Silverlight. Potrebbe essere qualcosa a che fare con l'essere in Silverlight 2.