Add Blur Effect to Image on MouseEnter; Remove on

Question

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'm using WPF 4, XAML, and VB.NET 2010 in a Silverlight-based project.

Answer 1

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