WPF：按钮中奇怪的图像拉伸答案

【问题标题】：WPF: Strange image stretching in ButtonsWPF：按钮中奇怪的图像拉伸
【发布时间】：2011-05-20 09:30:33
【问题描述】：

我有多个按钮，每个按钮都有一个 32x32 像素的 PNG 图像。奇怪的是，两个按钮显示不同的大小（是的，我三次检查图标真的是 32x32！）。秒按钮的大小看起来像 48x48 像素。最有趣的是，如果我省略了Stretch="None" 属性，图标会放大到几乎填满整个屏幕。

我无法解释为什么会这样！

    <ToolBar Name="toolBar1" DockPanel.Dock="Top">
        <Button Name="importButton" ToolTip="Import" Click="importButton_Click">
            <Image Source="Icons/Import.png" Stretch="None" />
        </Button>
        <Button Name="toggleDetails" ToolTip="Details for Item" Click="toggleDetails_Click">
            <Image Source="Icons/maximize.png" Stretch="None" />
        </Button>           
    </ToolBar>

    <StackPanel Name="stackPanel1" DockPanel.Dock="Top" Orientation="Horizontal" Margin="0,5,0,5">
        <Label  Name="label2" Content="Find"></Label>
        <TextBox  Name="tags" Width="400" KeyDown="tags_KeyDown" />
        <Button ToolTip="Find" Name="findItemsButton" Click="findItemsButton_Click">
            <Image Source="Icons/xmag.png" Stretch="None" />
        </Button>
        <CheckBox Content="Show Closed" Name="showClosedItemsCheckBox" VerticalAlignment="Center" Margin="10,0,0,0" Click="showClosedItemsCheckBox_Click" />
    </StackPanel>
    <TabControl  Name="tabControl" TabStripPlacement="Top">

    </TabControl>

</DockPanel>

【问题讨论】：

标签： .net wpf image button stretch

【解决方案1】：

这两个图像可能具有不同的 DPI。

【讨论】：

如何避免这种缩放并以原始分辨率显示图像？
@Cody：您可以明确设置Width 和Height。
我现在把图片的DPI改成了96，所以符合windows默认，现在可以了，谢谢:)

【解决方案2】：

要跟进 SLaks 的回答：要使用图像的像素尺寸而不考虑 DPI，您可以像这样将 Width 和 Height 绑定到 Source 的 PixelWidth 和 PixelHeight

<Button Name="toggleDetails" ToolTip="Details for Item" Click="toggleDetails_Click">  
    <Image Source="Icons/maximize.png"
           Stretch="None"
           Width="{Binding RelativeSource={RelativeSource Self}, Path=Source.PixelWidth}"
           Height="{Binding RelativeSource={RelativeSource Self}, Path=Source.PixelHeight}"/>
</Button>

【讨论】：

【解决方案3】：

如果您为Image 设置了Stretch="None"，但它仍然看起来更大/更小/模糊，那么可能是因为 DPI 不匹配。

例如，PNG 文件存储 DPI。 Windows 具有特定的 DPI。检查您的系统 DPI 并检查 PNG DPI。

在 Photoshop 中，您可以转到 Image -> Image Size，它将显示点/英寸框。您也可以使用它来更改 DPI。确保禁用 Resample Image 复选框，以便仅更改 DPI。您需要使用Save for Web 对话框来保存该更改，因为普通的Save As 不会保存该信息。

在我的例子中，我有一个大小为 24x24 的 PNG 文件，DPI 为 72.009，我的系统是默认 DPI。图片看起来更大更模糊，现在用 Photoshop 将 PNG DPI 从 72.009 调整到 72 并使用Save for Web 后就好了。

【讨论】：