仅在 WPF/XAML 中悬停图像时的投影效果或模糊效果 [英] Drop Shadow Effect or blur effect only on Image on-hovering in WPF/XAML

问题描述

我有一个阴影属性定义如下的图像.

I have an image with a shadow property defined as follows.

 <Border Background="Black" Margin="42,180,368,38">
   <Border.Effect>
     <DropShadowEffect Color="Aqua"  Opacity="0.5"/>
   </Border.Effect>

   <Image Height="92" Width="97" Source="/Images/image_search.png" />
 </Border>

这会生成带边框的图像.好的.但是，我只需要在图像悬停时显示边框?我怎么做 ?另外，如何模糊悬停在其上的图像?

This produces image with a border. OK. But, I need the border to be shown only on image-hovering? How do I do that ? Also, how to blur the image on-hovering upon it?

非常感谢.

推荐答案

您可以使用样式和触发器来做到这一点.

You can do this with styles and triggers.

    <Border Margin="42,180,368,38"> 
        <Border.Style>
            <Style TargetType="Border">
                <Setter Property="Background" Value="{x:Null}"/>
                <Setter Property="BorderThickness" Value="0"/>
                  <Style.Triggers>
                    <Trigger Property="Border.IsMouseOver" Value="True">
                        <Setter Property="Background" Value="Black"/>                            
                        <Setter Property="Effect">
                            <Setter.Value>
                                <DropShadowEffect Color="Aqua"  Opacity="0.5"/>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Border.Style>            
        <Image Height="92" Width="97" Source="/Images/image_search.png" />
    </Border>    

样式中的第一个 Setter 明确将背景颜色设置为 null，将边框粗细设置为0"以隐藏"边框.当边框控件的 IsMouseOver 属性设置为 true 时，Trigger 设置边框背景属性.

The first Setter within the Style explicitly sets the background color to null and the border thickness to '0' to "hide" the border. The Trigger sets the borders background property when the IsMouseOver Property of the border control is set to true.

这篇关于仅在 WPF/XAML 中悬停图像时的投影效果或模糊效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！