Use BitmapScalingMode to ensure your rendering of Image is perfect

By | July 20, 2011

If you have worked with WPF 3.5 before, you know that declaring a normal image in your code will
render your image quite fine. But If you do the same thing in .NET 4.0 or even you convert your
existing application from previous version to .NET 4.0, all the images that were rendering quite Ok in
your previous application will look real ugly.

Every images exposes a property called BitmapScaleMode which you can specify for an image, which
renders your image in the way you specify. Lets see how to define a BitmapScaleMode :

<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.Resources>
<Style TargetType="{x:Type Image}" >
<Setter Property="Width" Value="90" />
<Setter Property="Width" Value="90" />
<Setter Property="Source" Value="MyImg.jpg" />
</Style>
</Grid.Resources>
<Image Grid.Row="0" Grid.Column="0"
RenderOptions.BitmapScalingMode="Fant" />
<Image Grid.Row="0" Grid.Column="1"
RenderOptions.BitmapScalingMode="HighQuality"/>
<Image Grid.Row="1" Grid.Column="0"
RenderOptions.BitmapScalingMode="Linear"/>
<Image Grid.Row="1" Grid.Column="1"
RenderOptions.BitmapScalingMode="LowQuality"/>
<Image Grid.Row="2" Grid.Column="0"
RenderOptions.BitmapScalingMode="NearestNeighbor"/>
<Image Grid.Row="2" Grid.Column="1"
RenderOptions.BitmapScalingMode="Unspecified"/>
</Grid>

The RenderOptions.BitmapScalingMode is a property that scales the images based on the quality.
WPF 4.0 defaults it to Unspecified, which refers to LowQuality image rendering.

But to ensure that the image remains good quality when the size increases, BitmapScalingMode
should be chosen as HighQuality.

Download Sample