從codebehind添加圖像silverlight hovereffect

Question

我有一個堆棧面板，它具有以編程方式添加的動態數量的圖像，有沒有辦法可以在這些圖像上以編程方式設置懸停/點擊效果。 我希望圖像在點擊時“發光”。 我如何在silverlight中做到這一點？ 我注意到了Image.Effect屬性，但我不確定如何使用它。

Answer 1

您需要做的是創建一個新的usercontrol，其中包含圖像控件，並附有視覺狀態。 這樣，您可以動態地將usercontrol添加到stackpanel並調用動畫，而無需通過主應用程序中的事件附加動畫。

我在Image.Effect上使用了DropShadowEffect來創建一個脈動動畫。

例如。 這是在你的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頁面： 動畫概述 。 此頁面包含有關如何以編程方式執行此操作的詳細信息（ 在過程代碼中創建動畫 ）。