Agrandir une image miniature sur le vol stationnaire

Question

Quelqu'un pourrait me donner quelques conseils sur la façon dont je pourrais aller sur la mise en œuvre d'un contrôle Silverlight qui affiche les vignettes d'image que lorsque plané au-dessus, l'agrandir à une plus grande taille?

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 à la place. Notez que je n'ai jamais vraiment publié ce code; c'était juste une expérience quand j'apprenais Silverlight. Ne le prenez pas comme un exemple de bonne 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 VisualState pour l'état MouseOver, vous pouvez utiliser un DoubleAnimation (ou DoubleAnimationUsingKeyframes) pour effectuer un ScaleTransform sur le contrôle.

Création des différentes VisualStates (dans un VisualStateGroup) pour ongle du pouce/contrôle d'image vous permettra d'économiser la peine d'avoir à câbler vos événements dans le code derrière. Vous serez également en mesure de définir visuellement les différentes mises à l'échelle dans Blend, ce qui est une fonctionnalité intéressante.

Answer 3

Cette page - Fish Eye Menu a un exemple qui fait quelque chose de semblable à ce que vous voulez. Pour une raison quelconque, il n'affiche pas la version Silverlight malgré l'installation de Silverlight. Il est peut-être quelque chose à voir avec elle étant dans Silverlight 2.