Question

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

Answer 1

您需要做的是创建一个新的usercontrol，其中包含图像控件，并附有视觉状态。这样，您可以动态地将usercontrol添加到stackpanel并调用动画，而不必通过主应用程序中的事件附加它们。

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

例如。这是在你的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);
    }

然后您可以将此usercontrol添加到堆栈面板，如下所示：

 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.

告诉我这是否有效。

Answer 2

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

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

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

2 个答案: