按钮模板无法清晰呈现图像答案

【问题标题】：Button Template does not render Image clearly按钮模板无法清晰呈现图像
【发布时间】：2009-12-14 11:40:42
【问题描述】：

这是我的按钮模板，

<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>

现在你可以根据这个问题看到My Images are blurry on StackOverflow我试过了..

RenderOptions.BitmapScalingMode="NearestNeighbor"

在所有级别上，网格、chrome .. 并尝试了 SnapsToDevicePixels 的各种组合，但图像无法正确显示。我设置了Stretch=None，图片居中对齐，为什么还是自动拉伸？

这是输出，非常令人沮丧。

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

图像的实际尺寸为 16x16，但我通过使用 Windows Maginifier 发现无论我做什么，图像实际上都在尝试渲染为 20x20，对于更大的图像，它甚至会裁剪最右侧和底部.我认为当 Stretch=None 时图像应该正确渲染为 16x16，任何人都可以澄清这里有什么问题吗？

【问题讨论】：

标签： wpf image blurry

【解决方案1】：

这是微软尚未修复的已知 wpf 问题。唯一的解决方法是调整大小，使其不会以小数像素部分结束。

【讨论】：

【解决方案2】：

尝试在图像元素上设置明确的宽度和高度。

【讨论】：

因为没有明确调整大小的元素会倾向于（也有例外）占用其容器的大小。
设置显式尺寸 16x16 裁剪图像，我可以看到图像仅显示 16x16，但仍然缺少部分显示它正在尝试显示 20x20。当水平对齐和垂直对齐设置为“中心”时，它应该将自身拉伸到父容器，对吗？

【解决方案3】：

调整图片大小就可以了。

【讨论】：

【解决方案4】：

我创建了一个按钮样式并覆盖了控件模板，为其赋予了自定义高度。

您可能需要考虑尝试 WPF4 中现在可用的新属性。将RenderOptions.BitmapScalingMode 留给HighQuality 或者干脆不声明它。

在您的根元素（即您的主窗口）上添加此属性：UseLayoutRounding="True"。

以前仅在 Silverlight 中可用的属性现在已修复所有位图大小问题。 :)

请注意 - 一些效果布局舍入可以有精确的布局：

元素的宽度和/或高度最多可以增加或缩小 1 个像素

物体的放置最多可以移动 1 个像素

居中的元素最多可以垂直或水平偏离中心 1 像素

在此处找到更多信息：http://blogs.msdn.com/text/archive/2009/08/27/layout-rounding.aspx

【讨论】：

【解决方案5】：

如果您认为您的图像是 16x16，但 WPF 似乎认为它是 20x20，那么您可能在图像本身中遇到了 DPI 问题。你的图片是PNG吗？将其另存为 jpg 并查看其外观。

参考：http://www.hanselman.com/blog/BeAwareOfDPIWithImagePNGsInWPFImagesScaleWeirdOrAreBlurry.aspx

【讨论】：