CODEWITHSUNDEEP
wpfimagexamlblureffect
CodeMouse92
CodeMouse92

Reputation: 6898

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

Upvotes: 0

Views: 4002

Answers (1)

ChrisF
ChrisF

Reputation: 137118

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

Upvotes: 4

Related Questions