Button Template does not render Image clearly

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.ColumnDefi开发者_开发百科nitions>
        <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.

Bad Image on WPF http://akashkava.com/blog/wp-content/uploads/2009/12/BadButton.PNG

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?

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.

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

Resize the image and it would be ok.

I created a button style and had the control template overridden giving it a custom height.

You may want to consider trying a new property available now in WPF4. Leave the RenderOptions.BitmapScalingMode to HighQuality or just don't declare it.

On your root element (i.e. your main window) add this property: UseLayoutRounding="True".

A property previously only available in Silverlight has now fixed all Bitmap sizing woes. :)

Please Note - a few of the effects layout rounding can have on exact layout:

• width and or height of elements may grow or shrink by at most 1 pixel

• placement of an object can move by at most 1 pixel

• centered elements can be vertically or horizontally off center by at most 1 pixel

More info found here: http://blogs.msdn.com/text/archive/2009/08/27/layout-rounding.aspx

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