Blur images no matter what in WPF

Question

I have a button with an image and no matter what I do the image looks blurry after rendered/compiled.

FYI - The image looks good when not in WPF controls

The image on the left is before compiled, the image on the right is blurry after compiled.

I tried applying UseLayoutRounding, applying SnapsToDevicePixels, RenderOptions.BitmapScalingMode and removing the antialiasing directly in the button and directly to the image but nothing.

Any idea how can I improve the quality of the images in WPF?

XAML:

Styles applied directly to the button:

  <Grid>
        <Button x:Name="recentButton" UseLayoutRounding="True" RenderOptions.BitmapScalingMode="HighQuality" SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased"
            Margin="10,137,302,10"
            Width="auto"
            Height="23" 
            HorizontalAlignment="Stretch"
            BorderBrush="{x:Null}" 
            Foreground="White" 
            BorderThickness="0" 
            Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}">
            <Image Source="/Tool;component/Design/Images/more-icon-active.png" Stretch="None"/>
        </Button>
    </Grid>

Styles applied directly to the image:

  <Grid>
        <Button x:Name="recentButton"
            Margin="10,137,302,10"
            Width="auto"
            Height="23" 
            HorizontalAlignment="Stretch"
            BorderBrush="{x:Null}" 
            Foreground="White" 
            BorderThickness="0" 
            Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}">
            <Image Source="/Tool;component/Design/Images/more-icon-active.png" UseLayoutRounding="True" RenderOptions.BitmapScalingMode="HighQuality" SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased" Stretch="None"/>
        </Button>
    </Grid>

Have you tried removing the Height attribute? Assuming that the image is 23 pixels in height, there may be some default padding causing it to be slightly smaller. — Scroog1
Also, try to use UseLayoutRounding="True" on the parent window instead of on the button. — scharette
Depending on the kind of image, RenderOptions.BitmapScalingMode="NearestNeighbor" may add some sharpness. — Clemens
I'd also highly recommend setting TextOptions.TextFormattingMode="Display" on your top level elements to greatly improve text rendering on desktop computers. Otherwise you can end up with slightly blurry text. — Bradley Uffner

scharette scharette · Accepted Answer · 2018-07-18T12:45:56

The problem is you're using UseLayoutRounding on the control directly.

But, be aware of this note in the linked documentation,

You should set UseLayoutRounding to true on the root element. The layout system adds child coordinates to the parent coordinates; therefore, if the parent coordinates are not on a pixel boundary, the child coordinates are also not on a pixel boundary. If UseLayoutRounding cannot be set at the root, set SnapsToDevicePixels on the child to obtain the effect that you want.

Therefore, use it on the parent container instead. In your case, that would be on the on the <grid> element.

Other recommandations

Recommended by @Clemens in the comment section,

Depending on the kind of image, RenderOptions.BitmapScalingMode="NearestNeighbor" may add some sharpness.

Note that you will have to apply that on the image directly.

Recommended by @BradleyUffner in the comment section,

Setting TextOptions.TextFormattingMode="Display" on your top level elements to greatly improve text rendering on desktop computers.

Blur images no matter what in WPF

1 Answers