开发者

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

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜