Add silverlight hovereffect image from codebehind

Question

I have a stack panel that has a dynamic number of images that are added programmatically, is there a way I can set the hover / click effect programmatically on these images. I would like the image to “glow” when pressed. How to do it in Silverlight? I noticed a property Image.Effect, but I'm not sure how to use it.

Answer 1

What you need to do is create a new usercontrol with an image control inside with visual contours attached to it. Thus, you can dynamically add usercontrol to the stack panel and call animations without binding them to events from the main application.

I used DropShadowEffectto Image.Effectto create a pulsating animation.

For example, 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>

WITH#

    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 the stack panel, for example:

 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.

Answer 2

You can use the transform to create animations to change the color of your image when clicked.

MSDN: . , ( ).