如何使用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 impacts the rendering quality of the text. The proposed solution to the linked question (setting TextOptions.TextFormattingMode="Display" on the Window) also has layout implications. Instead, you can draw a Rectangle with 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 而不是 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>

当然，您始终可以使背景对象大于您的控件。这里它们在 Grid 的同一个单元格中，但是 Border 有额外的 space 可以增长，因为 TextBox 有一个 Margin。较小的 top/bottom 边距和较大的 left/right 边距意味着控件周围的发光会更均匀。

<!-- 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"/>

如何使用WPF效果模仿OuterGlowBitmapEffect？

How to imitate OuterGlowBitmapEffect using WPF effects?

.net

c#

wpf

effects

glow