[WPF]DropShadowEffect导致Image模糊问题

实现鼠标在图片上时，图片外侧有发光效果，如上图

可使用触发器修改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>