CODEWITHSUNDEEP
c#wpf
fs_tigre
fs_tigre

Reputation: 10748

Blur images no matter what in WPF

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.

enter image description here

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>

Upvotes: 2

Views: 660

Answers (1)

scharette
scharette

Reputation: 10017

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

  1. 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.

  1. Recommended by @BradleyUffner in the comment section,

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

Upvotes: 3

Related Questions