WPF: Странное изображение растягивается в кнопках - PullRequest
Новая
       30

WPF: Странное изображение растягивается в кнопках

2 голосов
/ 05 декабря 2010

У меня есть несколько кнопок, каждая из которых имеет изображение PNG размером 32x32 пикселя.Странно то, что обе кнопки имеют разные размеры (да, я трижды проверил, что иконки действительно 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>

Ответы [ 3 ]

6 голосов
/ 05 декабря 2010

Два изображения, вероятно, имеют разные DPI.

5 голосов
/ 28 апреля 2012

Если вы установили Stretch="None" для Image, и он все еще выглядит больше / меньше / размытым, то это, вероятно, из-за несовпадения DPI.

Например, файлы PNG хранят DPI.У Windows есть определенный DPI.Проверьте системный DPI и проверьте PNG DPI.

В Photoshop вы можете перейти на Image -> Image Size, и он отобразит окно точек / дюйм.Вы также можете использовать его для изменения DPI.Убедитесь, что вы отключили Resample Image флажок, чтобы вы только изменили DPI.Вам нужно использовать диалог Save for Web для сохранения этого изменения, потому что обычный Save As не сохранит эту информацию.

enter image description here

В моем случае у меня был файл PNGс размером 24x24 и DPI 72,009, и моя система использует DPI по умолчанию.Изображение выглядело больше и размытее, теперь все нормально после настройки PNG DPI с 72.009 до 72 с помощью Photoshop и использования Save for Web.

2 голосов
/ 05 декабря 2010

Чтобы следить за SLaks, ответьте: Чтобы использовать размеры изображения в пикселях независимо от DPI, вы можете привязать ширину и высоту к 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>
...