Button Template does not render Image clearly.
- by Akash Kava
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?
