Smoothing image edges in WPF

Question

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:

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

Answer 1

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