2010-12-05 37 views
1

J'ai plusieurs boutons, chacun ayant une image PNG 32x32 pixels. La chose étrange est, que les deux boutons montrent des tailles différentes (Oui, j'ai triplé que les icônes sont vraiment 32x32!). Le bouton des secondes ressemble à une taille de 48x48 pixels. Le plus drôle est, si j'omets l'attribut Stretch="None", les icônes sont mises à l'échelle pour remplir presque tout l'écran.WPF: Strange image stretching in Buttons

Je ne peux pas m'expliquer pourquoi cela se produit!

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

Répondre

5

Les deux images ont probablement différentes DPIs.

+0

comment puis-je éviter cette mise à l'échelle et montrer l'image avec sa résolution d'origine? – codymanix

+0

@Cody: Vous pouvez définir explicitement 'Width' et' Height'. – SLaks

+0

J'ai maintenant changé le DPI des images à 96, de sorte qu'il se conforme à Windows par défaut, maintenant cela fonctionne, merci :) – codymanix

2

Pour donner suite à SLaks Réponse: Pour utiliser les dimensions de pixels de l'image quel que soit le DPI, vous pouvez lier la largeur et la hauteur au PixelWidth et pixelHeight de la Source comme celui-ci

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

boah que plus d'une exagération, mais merci pour le concept :) – codymanix

4

Si vous avez définir Stretch="None" pour le Image, et il semble toujours plus grand/plus petit/flou, puis c'est probablement à cause de la non-concordance DPI.

Par exemple, les fichiers PNG stockent DPI. Windows a un DPI particulier. Vérifiez votre DPI système et vérifiez le DPI PNG.

Dans Photoshop, vous pouvez aller à Image -> Image Size et il affichera les points/boîte pouces. Vous pouvez également l'utiliser pour changer le DPI. Assurez-vous de désactiver la case à cocher Resample Image pour ne modifier que le DPI. Vous devez utiliser la boîte de dialogue Save for Web pour enregistrer cette modification car le Save As normal n'enregistre pas cette information.

enter image description here

Dans mon cas, j'avais un fichier PNG avec une taille de 24x24, et un DPI 72,009 et mon système est la valeur par défaut DPI. L'image a semblé plus grande et plus floue, maintenant c'est bien après avoir ajusté le DPI PNG de 72.009 à 72 avec Photoshop et en utilisant le Save for Web.