在MouseEnter上为图像添加模糊效果；鼠标离开时删除

Question

所有，我希望当鼠标悬停在图像上时图像模糊（使用模糊效果），并在鼠标离开时恢复正常。

我在基于 Silverlight 的项目中使用 WPF 4、XAML 和 VB.NET 2010。

Answer 1

最简单的方法是使用VisualStateManager并修改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>

即可使用Transition来控制Normal -> 动画。 MouseOver 变化和 MouseOver ->正常变化独立。

然后在显示图像的控件中有以下效果：

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

教程
详细信息