如何使用WPF效果模仿OuterGlowBitmapEffect？

Question

我尝试使用 DropShadowEffect，但当您增加 BlurRadius 时，它的“发光”强度会减弱。我想要像下图一样具有强烈的外发光。

如果我将相同的效果叠加十几次，我就能得到这个，但此后性能就会下降。使用 WPF 可以实现单一效果吗？

Answer 1

根据您想要的模糊半径有多大以及结果需要有多平滑，您可以堆叠不同的效果（例如渐变停止），而不是重复堆叠相同的效果。

正如您所指出的，DropShadowEffect强度随着增加而减弱BlurRadius。

<TextBox Text="DropShadowEffect">
    <TextBox.Effect>
        <DropShadowEffect BlurRadius="50"
                          ShadowDepth="0" 
                          Color="Blue" 
                          Opacity="1"/>
    </TextBox.Effect>
</TextBox>

此外，直接应用效果会TextBox 影响文本的渲染质量。所提出的链接问题的解决方案（TextOptions.TextFormattingMode="Display"在 上设置Window）也具有布局影响。相反，您可以在元素后面绘制一个Rectangle带有a 的符号。BlurEffect

<Rectangle Fill="Blue"
           Height={Binding ElementName=MyTextBox, Path=ActualHeight}"
           Width={Binding ElementName=MyTextBox, Path=ActualWidth}">
    <Rectangle.Effect>
        <BlurEffect Radius="50"/>
    </Rectangle.Effect>
</Rectangle>
<TextBox x:Name="MyTextBox" Text="Rectangle with BlurEffect"/>

然后，您可以Rectangle为每个梯度停止点添加一个附加值。这里有两个：一个用于50定义模糊的整体大小，另一个用于30增强控件周围的发光。

<Rectangle Fill="Blue"
           Height={Binding ElementName=MyTextBox, Path=ActualHeight}"
           Width={Binding ElementName=MyTextBox, Path=ActualWidth}">
    <Rectangle.Effect>
        <BlurEffect Radius="50"/>
    </Rectangle.Effect>
</Rectangle>
<Rectangle Fill="Blue"
           Height={Binding ElementName=MyTextBox, Path=ActualHeight}"
           Width={Binding ElementName=MyTextBox, Path=ActualWidth}">
    <Rectangle.Effect>
        <BlurEffect Radius="30"/>
    </Rectangle.Effect>
</Rectangle>
<TextBox x:Name="MyTextBox" Text="Two Rectangles with BlurEffect"/>

您询问了角落周围的清晰度TextBox，我必须承认我没有一个好的解决方案。Border我最初考虑使用 a而不是 a 来圆化控件后面的模糊元素的角Rectangle，但老实说，我没有看到太大的区别。

<!-- Remove the CornerRadius property for square corners. -->
<Border CornerRadius="10" Background="Blue">
    <Border.Effect>
        <BlurEffect Radius="50"/>
    </Border.Effect>
</Border>
<Border CornerRadius="10" Background="Blue">
    <Border.Effect>
        <BlurEffect Radius="30"/>
    </Border.Effect>
</Border>

当然，您始终可以使背景对象大于您的控件。在这里，它们位于 a 的同一个单元格中Grid，但有额外的空间供Border生长，因为TextBox具有Margin。较小的顶部/底部边距和较大的左/右侧边距意味着控件周围的发光将更加均匀。

<!-- These items should be in the same cell of a Grid -->
<Border CornerRadius="10" Background="Blue">
    <Border.Effect>
        <BlurEffect Radius="50"/>
    </Border.Effect>
</Border>
<Border CornerRadius="10" Background="Blue">
    <Border.Effect>
        <BlurEffect Radius="30"/>
    </Border.Effect>
</Border>
<TextBox Text="TextBox has an 8px, 4px margin" Margin="8 4"/>