26

This is kind of driving me insane. Adding a DropShadowEffect to a button. In the IDE it looks like this:

enter image description here

Second button is for reference with no DropShadowEffect. As you can see there next no difference. Then I build the project and when it runs it looks like this:

enter image description here

What is causing this change? Here is the XAML for the two buttons:

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

Edit: Taking @gretro does make it look better but it still is not right:

enter image description here

Yet once again in the IDE it looks fine:

enter image description here

D .Stark
  • 145
  • 11
Xaphann
  • 3,195
  • 10
  • 42
  • 70

2 Answers2

50

Your entire button is rendering on a cross-pixel boundary. Note how the 1-point border actually spans multiple pixels, causing a blurring effect.

Try setting UseLayoutRounding="True" on a parent or ancestor element. The further up the tree, the better (your view's root visual would be ideal). You can also try SnapsToDevicePixels="True".

Mike Strobel
  • 25,075
  • 57
  • 69
  • 2
    Although your soln did not help me, i found this which did: http://www.cplotts.com/2009/02/25/gpu-effects-blurry-text/ – Peter pete Mar 14 '16 at 09:59
  • 3
    If it still isn't working move the `UseLayoutRounding` up a 'level'. eg. I had a fuzzy image in a `DataGrid` and moving `UseLayoutRounding` from the image to the datagrid. Now it's clear :-) – Simon_Weaver Aug 21 '17 at 23:18
  • 1
    Setting `UseLayoutRounding="True"` on the border fixed it for me. (In my case, the text was only blurry with DPI scaling ≠ 100%.) – Sören Kuklau Jul 01 '21 at 12:16
  • It does work, but usually I don't really like UseLayoutRounding="True", it breaks pixel alignment? WPF always confuses me. – CodingNinja Aug 14 '22 at 01:10
4

Remove the attached Property TextOptions.TextFormattingMode="Display". This is what is causing the button to be blurry.

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

This XAML renders crystal clear text in the button with the shadow effect for me.

gretro
  • 1,934
  • 15
  • 25
  • 1
    I checked with Snoop to see if the Effect is inherited in the 'TextBlock' displaying the Content, but it is not. This means that this blur might come from an inherited style. Install Snoop, you'll know right away. If nothing is conclusive try to remove your Shadow effect to see if it's what is causing the bug. PS : It's normal that the IDE looks better. In order to reduce Memory consumption, VS renders the UIElement to give you an idea of what it will look like. – gretro Feb 03 '14 at 22:07
  • For me, TextOptions.TextFormattingMode="Display" changes the rendering, but the blurring problem is still not solved, UseLayoutRounding="True" makes the text clear (other elements are also clearer). – CodingNinja Aug 14 '22 at 01:08