Add image silverlight hovereffect from codebehind

Question

Hi I have a stackpanel that has a dynamic amount of images that are added programatically, Is there a way I can set a hover/click effect programatically on these images. I would like for the image to "glow" when clicked. How do i do that in silverlight? I've noticed the Image.Effect property, but I'm not really sure how to use it.

Answer 1

You can use a transformation to create an animation to change the colour of your image when it is clicked.

Have a look at the MSDN page: Animation Overview. This page includes details on how to do this programmatically (Creating an Animation in Procedural Code).

Answer 2

What you need to do is create a new usercontrol with the image control inside with the visualstates attached to it. This way, you can dynamically add the usercontrol to the stackpanel and have the animations being called without attaching them by events from your main app.

I used the DropShadowEffect on the Image.Effect to create a pulsating animation.

For eg. This is inside your 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);
    }

Then you can add this usercontrol to your stack panel like so:

 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.

Tell me if this works.