Dans WPF, Quelle est la meilleure façon de créer des boutons de barre d'outils afin que les images soient correctement mises à l'échelle?

Question

Plus précisément, je cherche à utiliser les 16 * 16 images 32 bits png inclus avec la VS2008ImageLibrary. J'ai essayé de définir manuellement les attributs Height et Width de l'image, en ajustant les marges et le remplissage, en ajustant Stretch et RenderOptions. Mes tentatives de création de boutons de la barre d'outils ont toutes conduit soit à une mauvaise mise à l'échelle (icônes floues), soit à la ligne inférieure de l'icône tronquée, soit à une mauvaise taille du bouton de la barre d'outils - Here Est-ce que quelqu'un a trouvé le meilleur moyen de créer des boutons de barre d'outils standard, VisualStudio/WinForms, qui s'affichent correctement dans WPF?

Answer 1

D'abord, changer la résolution d'image à 96 ppp, cela peut faire avec le Paint.net libre (http://www.getpaint.net) en ouvrant le fichier, Sélection Image-> Canvas Taille dans le menu et ajuster la "résolution" à 96 et enregistrer.

Si cela ne fonctionne pas, vous pouvez alors utiliser la solution que j'ai écrit dans mon blog ici http://www.nbdtech.com/blog/archive/2008/11/20/blurred-images-in-wpf.aspx

Answer 2

La meilleure solution que je peux trouver est la suivante:

<Image x:Key="TB_NewIcon" Source="Toolbar Images/NewDocumentHS.png" Height="16" Width="16" SnapsToDevicePixels="True" RenderOptions.BitmapScalingMode="NearestNeighbor"/> 
... 
<Button Command="ApplicationCommands.New" Content="{StaticResource TB_NewIcon}" Padding="2,2,2,1"/> 

Ou bien:

<BitmapImage x:Key="TB_NewIcon" UriSource="Toolbar Images\NewDocumentHS.png"/> 
... 
<Button Command="ApplicationCommands.New" Padding="2,2,2,1"> 
    <Image Source="{StaticResource TB_NewIcon}" Height="16" Width="16" SnapsToDevicePixels="True" RenderOptions.BitmapScalingMode="NearestNeighbor"/> 
</Button> 

pour la balise Button, l'attribut Rembourrage est nécessaire pour faire en sorte que l'image ne soit pas tronqué à une hauteur de 15 pixels, et que le bouton n'est pas redimensionné pour s'adapter à l'image. Alternativement, nous pourrions spécifier Padding = "1", mais nous devons alors définir manuellement Height = "21" et Width = "22" pour que le bouton ne soit pas redimensionné pour s'adapter à l'image.
Sur l'onglet Image, la hauteur et Largeur sont nécessaires pour s'assurer que l'image n'est pas étirée. SnapsToDevicePixels et RenderOptions.BitMapScalingMode sont tous deux nécessaires pour garantir l'absence de flou. Je ne peux pas promettre que cela fonctionnera bien pour toutes les résolutions.

Remarque: Pour l'icône NewDocumentHS.png, celle qui provoque le plus de problèmes, car elle occupe les 16 pixels de hauteur, vous pouvez ajuster le remplissage à "1,1,3,2" , de sorte que le fond s'aligne plus correctement avec d'autres icônes.

Answer 3

La meilleure façon serait d'utiliser des graphiques vectoriels au lieu de png. Je sais que ce qui suit n'est pas exactement ce que vous avez demandé, mais à mon avis il n'y a aucun moyen d'améliorer l'apparence des icônes. En outre, cela vous aiderait à vous débarrasser des marges et des rembourrages. (Ok, si vous voulez utiliser des photos, vous êtes vissé)

Mauvaises nouvelles est probablement nécessaire de repeindre toutes vos icônes. Vous pouvez le faire en utilisant MS Expression Blend (il est capable de sauvegarder les images peintes en .xaml) ou vous les faites vous-même avec un texteditor. Je préfère le Border.Background au lieu de Image.Source pour placer l'icône, cela me permet de mettre du texte sur l'image. Cela ressemblerait samething comme ça:

<Window.Resources> 
    <ResourceDictionary Source="Resources/Icons.xaml"/> 
</Window.Resources> 
<!-- 
... 
--> 
<Button> 
    <Border Background="{StaticResource IconName}" Height="16" Width="16" /> 
</Button> 

Answer 4

Vous voudrez peut-être envisager d'essayer une nouvelle propriété disponible maintenant dans WPF4. Laissez le RenderOptions.BitmapScalingMode à HighQuality ou ne le déclarez pas. Sur votre élément racine (c'est-à-dire votre fenêtre principale), ajoutez cette propriété: UseLayoutRounding="True"

Une propriété précédemment disponible uniquement dans Silverlight a désormais résolu tous les problèmes de dimensionnement Bitmap.:)

S'il vous plaît noter - uns des effets d'arrondi mise en page peut avoir sur la mise en page exacte:

• largeur

  et ou la hauteur des éléments peut augmenter ou diminuer d'au plus 1 pixel

• placement

  d'un objet peut se déplacer d'au plus 1 pixel

• éléments peuvent être centrés verticalement ou horizontalement décentré par au plus 1 pixel

Plus d'info trouvée ici: http://blogs.msdn.com/text/archive/2009/08/27/layout-rounding.aspx