如何使用 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。链接问题的建议解决方案（在Window 上设置TextOptions.TextFormattingMode="Display"）也具有布局含义。相反，您可以在元素后面绘制 Rectangle 和 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 有额外的空间来增长，因为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"/>