从后面的代码添加图像silverlight悬停效果答案

【问题标题】：Add image silverlight hovereffect from codebehind从后面的代码添加图像silverlight悬停效果
【发布时间】：2010-05-30 16:32:55
【问题描述】：

我有一个堆栈面板，其中包含以编程方式添加的动态数量的图像，有没有一种方法可以在这些图像上以编程方式设置悬停/点击效果。我希望图像在单击时“发光”。我如何在 Silverlight 中做到这一点？我注意到Image.Effect 属性，但我不确定如何使用它。

【问题讨论】：

标签： silverlight expression-blend effects

【解决方案1】：

您需要做的是创建一个新的用户控件，其中包含图像控件，并附加了视觉状态。这样，您可以将用户控件动态添加到堆栈面板并调用动画，而无需通过主应用程序中的事件附加它们。

我使用Image.Effect 上的DropShadowEffect 创建了一个脉动动画。

例如。这是在您的用户控件中：

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>

    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);
    }

然后你可以像这样将这个用户控件添加到你的堆栈面板中：

 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.

告诉我这是否有效。

【讨论】：

感谢您的建议。我去了，实际上改变了 ffecttype，但我采取的是 usercontrol 方法！

【解决方案2】：

您可以使用转换来创建动画，以在单击图像时更改图像的颜色。

查看 MSDN 页面：Animation Overview。此页面包含有关如何以编程方式执行此操作的详细信息 (Creating an Animation in Procedural Code)。

【讨论】：

感谢您的建议