Add Blur Effect to Image on MouseEnter; Remove on MouseLeave

all, I want an image to blur (using the Blur effect) when the mouse hovers over it, and return to normal when the mouse leaves.

I开发者_如何学JAVA'm using WPF 4, XAML, and VB.NET 2010 in a Silverlight-based project.

---

The simplest way is to use the VisualStateManager and modify the MouseOverState

<VisualStateGroup x:Name="CommonStateGroup">
    <VisualState x:Name="MouseOverState">
        <Storyboard>
            <DoubleAnimation From="10" To="0" Duration="00:00:02" 
                             Storyboard.TargetName="blurEffect" 
                             Storyboard.TargetProperty="Radius">
            </DoubleAnimation>
        </Storyboard>
    </VisualState>
    ...
</VisualStateGroup>

You can use the Transition to control the animation for the Normal -> MouseOver change and the MouseOver -> Normal change independently.

Then in the control that displays the image have the following Effect:

    <BlurEffect Radius="10" x:Name="blurEffect"/>

Tutorial
More information