Ajouter une image silverlight hovereffect de codebehind

Question

J'ai un panneau de pile qui a une quantité dynamique d'images qui sont ajoutées par programmation, Est-il possible de définir un effet de survol/clic sur ces images. Je voudrais que l'image "brille" quand on clique dessus. Comment est-ce que je fais ça dans Silverlight? J'ai remarqué la propriété Image.Effect, mais je ne sais pas trop comment l'utiliser.

Answer 1

Ce que vous devez faire est de créer un nouveau contrôle utilisateur avec le contrôle d'image à l'intérieur avec les états visuels qui y sont attachés. De cette façon, vous pouvez ajouter dynamiquement le contrôle usercontrol à la pile et faire appel aux animations sans les attacher par des événements de votre application principale.

J'ai utilisé le DropShadowEffect sur le Image.Effect pour créer une animation pulsée.

Par exemple. Ceci est dans votre usercontrol:

XAML

<VisualStateManager.VisualStateGroups> 
     <VisualStateGroup x:Name="ImageState"> 
      <VisualState x:Name="NormalImageState"> 
       <Storyboard> 
        <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.BlurRadius)" Storyboard.TargetName="image1" d:IsOptimized="True"/> 
       </Storyboard> 
      </VisualState> 
      <VisualState x:Name="GlowingImageState"> 
       <Storyboard AutoReverse="True"> 
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.BlurRadius)" Storyboard.TargetName="image1"> 
         <EasingDoubleKeyFrame KeyTime="0" Value="0"/> 
         <EasingDoubleKeyFrame KeyTime="0:0:1" Value="20"/> 
         <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/> 
        </DoubleAnimationUsingKeyFrames>       
       </Storyboard> 
      </VisualState> 
     </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 

    <Image Name="image1" MouseEnter="image1_MouseEnter" MouseLeave="image1_MouseLeave" > 
     <Image.Effect> 
      <DropShadowEffect Color="Red" BlurRadius="0" ShadowDepth="0"/> 
     </Image.Effect> 
    </Image> 

C#

public ImageSource ImageSource 
    { 
     get; 
     set 
     { 
      image1.Source = value; 
     } 
    } 
    private void image1_MouseEnter(object sender, System.Windows.Input.MouseEventArgs e) 
    { 
     VisualStateManager.GoToState(this, "GlowingImageState", true); 
    } 

    private void image1_MouseLeave(object sender, System.Windows.Input.MouseEventArgs e) 
    { 
     VisualStateManager.GoToState(this, "NormalImageState", true); 
    } 

Ensuite, vous pouvez ajouter cette usercontrol à votre panneau de pile comme ceci:

MyUC uc= new MyUC(); //control we just created 
uc.ImageSource = sourceOfImg; //the source of the intended image 
myStack.Children.Add(uc); //adding it to the stackpanel. 

Dis-moi f cela fonctionne.

Answer 2

Vous pouvez utiliser une transformation pour créer une animation afin de changer la couleur de votre image lorsque vous cliquez dessus. Voir la page MSDN: Animation Overview. Cette page contient des détails sur la procédure à suivre par programme (Creating an Animation in Procedural Code).