WPF: Strange image stretching in Buttons

Question

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.

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>

Answer 1

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.

For example, PNG files store DPI. Windows has a particular DPI. Check your system DPI and check the 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.

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.

Answer 2

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

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

Answer 3

The two images probably have different DPIs.