实现鼠标在图片上时,图片外侧有发光效果,如上图
可使用触发器修改Image控件的Effect属性
<Style.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Effect"> <Setter.Value> <DropShadowEffect ShadowDepth="0" Direction="0" Color="Violet" BlurRadius="20"/> </Setter.Value> </Setter> </Trigger> </Style.Triggers>
但是Image的DropShadowEffect触发时,会导致图片变得比较模糊
解决方案:
可新建一个Border控件,置于Image控件正下方(大小和位置与Image控件相同),将DropShadowEffect效果放到Border控件上。并把Image的IsHitTestVisible属性设置为False,以便触发Border的MouseOver。
<Image x:Name="image" RenderOptions.BitmapScalingMode="HighQuality" IsHitTestVisible="False"/> <Border x:Name="bd" Width="{Binding ActualWidth, ElementName=image, Mode=OneWay}" Height="{Binding ActualHeight, ElementName=image, Mode=OneWay}" Panel.ZIndex="-1" Background="#FFBFC2F7"> <Border.Style> <Style TargetType="{x:Type Border}"> <Style.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Effect"> <Setter.Value> <DropShadowEffect ShadowDepth="0" Direction="0" Color="Violet" BlurRadius="20"/> </Setter.Value> </Setter> </Trigger> </Style.Triggers> </Style> </Border.Style> </Border>