WPF:奇怪的图像拉伸按钮。

I have multiple buttons, each having a 32x32 pixels PNG image. The strange thing is, that both buttons show different sizes (Yes, I triple checked that icons are really 32x32!). The seconds button looks like as it would be 48x48 pixels in size. The funniest thing is, if I omit the Stretch="None" attribute, the icons are scaled up to fill nearly the whole screen.

我有多个按钮，每个按钮都有一个32x32像素的PNG图像。奇怪的是，两个按钮都显示不同的大小(是的，我三遍检查图标是否为32x32!)秒按钮看起来像48x48像素大小。最有趣的是，如果我省略了拉伸="None"属性，图标就会按比例放大，以填充几乎整个屏幕。

I cannot explain myself why this is happening!

我无法解释为什么会发生这种事!

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

3 个解决方案

#1

The two images probably have different DPIs.

这两幅图像可能有不同的DPIs。

#2

If you have set Stretch="None" for the Image, and it still looks larger/smaller/blurry, then it's probably because of the DPI mismatch.

如果您为图像设置了Stretch="None"，并且它看起来仍然较大/较小/模糊，那么这可能是因为DPI不匹配。

For example, PNG files store DPI. Windows has a particular DPI. Check your system DPI and check the PNG DPI.

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

In Photoshop you can go to Image -> Image Size and it will display the dots/inch box. You can also use it to change the DPI. Make sure you disable Resample Image checkbox so that you only alter the DPI. You need to use the Save for Web dialog for saving that change because the normal Save As won't save that information.

在Photoshop中你可以点击图像->图像大小，它会显示点/英寸的盒子。您还可以使用它来更改DPI。请确保禁用Resample图像复选框，以便只修改DPI。您需要使用Save for Web对话框保存该更改，因为普通的Save As不会保存该信息。

In my case, I had a PNG file with size of 24x24, and a DPI 72.009 and my system is at the default DPI. The picture looked larger and blurrier, now it's fine after adjusting the PNG DPI from 72.009 to 72 with Photoshop and using the Save for Web.

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

#3

To follow up on SLaks answer: To use the Pixel dimensions of the Image regardless of the DPI you can bind the Width and Height to the PixelWidth and PixelHeight of the Source like this

回答:使用图像的像素尺寸而不考虑DPI，可以将宽度和高度绑定到源的像素宽度和像素高度

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