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.

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?

score 1 · Answer 1 · answered Dec 14 '09 at 15:37

1

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

answered Dec 14 '09 at 15:37

Mike LaSpina

410
3
8

1

Because an element which has not been explicitly sized will tend (there are exceptions) to take the size of its container. – Chris Hagan Dec 14 '09 at 17:14
Setting explicit size 16x16 crops image and I can see that image is displayed only 16x16 but still the missing part shows that it is trying to show 20x20. When horizontal align and vertical align is set to "Center", it should lever stretch itself to parent container am i right? – Akash Kava Dec 15 '09 at 08:16

score 1 · Accepted Answer · answered Dec 15 '09 at 18:23

1

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.

answered Dec 15 '09 at 18:23

Jay

13,803
4
42
69

score 1 · Answer 3 · answered Dec 16 '09 at 02:01

1

Resize the image and it would be ok.

answered Dec 16 '09 at 02:01

user232583

11
2

score 1 · Answer 4 · answered Apr 29 '10 at 06:11

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

score 1 · Answer 5 · answered Apr 29 '10 at 06:21

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

Button Template does not render Image clearly

5 Answers5