按钮模板无法清晰呈现图片

Question

这是我的按钮模板，

<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，图像位于中心对齐，但为什么它会自动拉伸？

这是输出，非常令人沮丧。 WPF上的错误图像 http://akashkava.com/blog/wp-content/uploads/2009/12/BadButton.PNG 实际图像大小为16x16，但我通过使用Windows Maginifier发现，无论我做什么，图像实际上都在尝试呈现为20x20，对于更大的图像，甚至会裁剪右侧和底部部分。我认为当Stretch=None时，图像应该以16x16的正确尺寸呈现，有人能澄清这里的问题吗？

- Akash Kava

Answer 1

我创建了一个按钮风格，并且重写了控件模板，使其具有自定义高度。

您可能想要考虑尝试一下现在在 WPF4 中可用的新属性。将 RenderOptions.BitmapScalingMode 保留为 HighQuality 或者只是不声明。

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

以前只在 Silverlight 中可用的属性现在已经解决了所有位图大小问题。 :)

请注意 - 布局四舍五入可能对精确布局产生以下影响：

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

• 对象的放置最多可以移动 1 个像素

• 居中的元素可以在垂直或水平方向上偏离中心最多 1 个像素

更多信息请参见：http://blogs.msdn.com/text/archive/2009/08/27/layout-rounding.aspx

- Domokun

Answer 2

如果您认为您的图像是16x16，但WPF似乎认为它是20x20，那么您可能在图像本身中有一个DPI问题。您的图像是PNG吗？将其保存为jpg并查看其外观如何。

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

- Rob Fonseca-Ensor

Answer 3

尝试在您的图像元素上设置显式宽度和高度。

- Mike LaSpina

---

因为未明确设置大小的元素（有例外情况）通常会采用其容器的大小。 - Chris Hagan

设置显式尺寸16x16剪裁图像，我可以看到图像仅显示16x16，但仍然显示缺失的部分，表明它试图显示20x20。当水平对齐和垂直对齐设置为“居中”时，它应该将自身拉伸到父容器中，对吗？ - Akash Kava

Answer 4

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

- Jay

Answer 5

调整图片大小，就可以了。

- user232583