Smoothing image edges in WPF

c# wpf image antialiasing
Wilson picture Wilson · Jan 23, 2013 · Viewed 12.8k times · Source

I have a few 256x256 images I am using with Image controls in a WPF application. Although they are all 256x256, I changed some of the controls to 64x64, etc. When I resize it down (using fill as my stretch property), the edges become very rough. Even on something as simple as a triangle, it is painfully apparent:

enter image description here

Is there a good fix for this, or do i need to resize the images in photoshop before putting them into the application?

Answer

d.moncada picture d.moncada · Jan 23, 2013

You need to set the Image's render options.

Try setting the style of the Image to:

<Window.Resources>
    <Style TargetType="Image">
        <Setter Property="Height" Value="64" />
        <Setter Property="Width" Value="64" />
        <Setter Property="RenderOptions.BitmapScalingMode" Value="HighQuality" />
    </Style>
</Window.Resources>

To use the image, simply call as before:

<Image Source="/Images/MyImage.png" />

Or, to use the RenderOptions on a single image:

<Image RenderOptions.BitmapScalingMode="HighQuality"
       Source="/Images/MyImage.png"
       Width="64"
       Height="64" />

For more info see:

http://msdn.microsoft.com/en-us/library/system.windows.media.renderoptions.aspx

Related questions

Setting WPF image source in code

I'm trying to set a WPF image's source in code. The image is embedded as a resource in the project. By looking at examples I've come up with the below code. For some reason it doesn't work - the image …

Read More
Add an image in a WPF button

I tried this solution: <Button> <StackPanel> <Image Source="Pictures/img.jpg" /> <TextBlock>Blablabla</TextBlock> </StackPanel> </Button> But I can see the image only in the project …

Read More
Drag and drop files into WPF

I need to drop an image file into my WPF application. I currently have a event firing when I drop the files in, but I don't know how what to do next. How do I get the Image? Is the …

Read More