WPF按钮上的投影效果导致文本模糊

Question

这让我有点疯狂。给一个按钮添加DropShadowEffect，在IDE中看起来像这样:

第二个按钮是没有DropShadowEffect的参考。你可以看到几乎没有任何区别。然后我编译这个项目并运行它，结果如下:

是什么导致了这种变化？以下是这两个按钮的XAML代码：

<Button Name="clearButton" Content="Clear" Click="clearButton_Click" Margin="5,0,5,0" MaxWidth="80" MinHeight="40" 
    TextOptions.TextFormattingMode="Display">
<Button.Effect>
    <DropShadowEffect BlurRadius="5" ShadowDepth="3" />
</Button.Effect>
</Button>
<Button Content="Clear" Margin="5,5,5,0" MaxWidth="80" MinHeight="40"  TextOptions.TextFormattingMode="Display" />

编辑： 采用 @gretro 提供的建议使其看起来更好了，但仍然不正确：

然而，在 IDE 中它看起来很好：

- Xaphann

Answer 1

你的整个按钮正渲染在跨像素边界上。请注意，1像素宽度的边框实际上横跨了多个像素，导致模糊效果。

尝试在父元素或祖先元素上设置UseLayoutRounding="True"。越靠近树的顶部越好（你的视图的根可视元素是理想的）。你也可以尝试SnapsToDevicePixels="True"。

- Mike Strobel

---

虽然你的解决方案没有帮助到我，但我找到了这个链接：http://www.cplotts.com/2009/02/25/gpu-effects-blurry-text/ - Peter pete

如果它仍然不起作用，把“UseLayoutRounding”提升一个层级。例如，我在DataGrid中有一张模糊的图像，把“UseLayoutRounding”从图像移到DataGrid中。现在很清晰了 :-) - Simon_Weaver

在边框上设置 UseLayoutRounding="True" 对我很有帮助。（在我的情况下，只有 DPI 缩放 ≠ 100% 时文本才会模糊。） - Sören Kuklau

它确实可以工作，但通常我不太喜欢使用UseLayoutRounding="True"，因为它会破坏像素对齐？WPF总是让我感到困惑。 - CodingNinja

Answer 2

移除附加属性 TextOptions.TextFormattingMode="Display"。这是导致按钮模糊的原因。

<Button Grid.Row="25" Grid.Column="0" Content="Clear">
    <Button.Effect>
       <DropShadowEffect BlurRadius="5" ShadowDepth="3" />
    </Button.Effect>
</Button>

这个XAML代码为我在按钮上呈现了清晰的文本，并带有阴影效果。

- gretro

---

我使用Snoop检查了一下，看看“TextBlock”中显示的内容是否继承了效果，但事实并非如此。这意味着这种模糊可能来自继承的样式。安装Snoop，你会立刻知道。如果没有什么确定的东西，尝试删除阴影效果，看看是否导致了错误。PS：IDE看起来更好是正常的。为了减少内存消耗，VS渲染UIElement以给你一个想法它会是什么样子。 - gretro

对我来说，TextOptions.TextFormattingMode="Display"可以改变渲染，但模糊问题仍未解决。使用UseLayoutRounding="True"可以使文本清晰（其他元素也更清晰）。 - CodingNinja