Button Template does not render Image clearly.

Question

Here is my button template,

<Microsoft_Windows_Themes:ButtonChrome 
   x:Name="Chrome" 
   Background="{TemplateBinding Background}" 
   BorderBrush="{TemplateBinding BorderBrush}" 
   RenderDefaulted="{TemplateBinding IsDefaulted}" 
   RenderMouseOver="{TemplateBinding IsMouseOver}" 
   RenderPressed="{TemplateBinding IsPressed}">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Image 
               Source="{TemplateBinding ImageSource}" 

               RenderOptions.BitmapScalingMode="NearestNeighbor"

               SnapsToDevicePixels="True"

               HorizontalAlignment="Center"
               VerticalAlignment="Center"
              Stretch="None"
               />
        <ContentPresenter 
            Grid.Column="1"
            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
            Margin="{TemplateBinding Padding}" 
            VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
            RecognizesAccessKey="True"/>
    </Grid>
</Microsoft_Windows_Themes:ButtonChrome>

Now you can see as per this question My Images are blurry on StackOverflow I tried ..

RenderOptions.BitmapScalingMode="NearestNeighbor"

On all levels, grid, chrome .. and tried various combinations of SnapsToDevicePixels but images just wont show up correctly. I set Stretch=None, image is aligned at center, still why it stretches automatically?

here is the output and its very frustrating.

Actual size of the image is 16x16 but I some how figured out by using Windows Maginifier that no matter what I do, the image is actually trying to render as 20x20, for the bigger images its even cropping the right most and bottom part. I think image should be rendered correctly 16x16 when Stretch=None, can anyone clarify whats problem here?

Answer 1

Try setting an setting an explicit width and height on your image element.

Answer 2

This is a known wpf issue that microsoft hasn't fixed. The only work around is to adjust the size so it doesn't end up with a fractional pixel portion in size.

Answer 3

Resize the image and it would be ok.

Answer 4

If you think your image is 16x16, but WPF seems to think it's 20x20, then you've probably got a DPI issue in the image isself. Is your image a PNG? Save it as a jpg instead and see how that looks.

Ref: http://www.hanselman.com/blog/BeAwareOfDPIWithImagePNGsInWPFImagesScaleWeirdOrAreBlurry.aspx