在WPF中,创建工具栏按钮以便正确缩放图像的最佳方法是什么?

在WPF中,创建工具栏按钮以便正确缩放图像的最佳方法是什么?,wpf,visual-studio,user-interface,icons,toolbar,Wpf,Visual Studio,User Interface,Icons,Toolbar,具体来说,我希望使用VS2008ImageLibrary附带的16*16 32位png图像。我尝试过手动设置图像的高度和宽度属性,调整边距和填充,调整拉伸和渲染。我尝试创建工具栏按钮都会导致缩放不当(图标模糊)、图标底部的一行像素被截断,或者工具栏按钮大小不当——更不用说已经提到的消失图标了。是否有人找到了制作在WPF中正确显示的标准VisualStudio/WinForms样式工具栏按钮的最佳方法?我能想到的最佳解决方法是: <Image x:Key="TB_NewIcon" Sourc

具体来说,我希望使用VS2008ImageLibrary附带的16*16 32位png图像。我尝试过手动设置图像的高度和宽度属性,调整边距和填充,调整拉伸和渲染。我尝试创建工具栏按钮都会导致缩放不当(图标模糊)、图标底部的一行像素被截断,或者工具栏按钮大小不当——更不用说已经提到的消失图标了。是否有人找到了制作在WPF中正确显示的标准VisualStudio/WinForms样式工具栏按钮的最佳方法?

我能想到的最佳解决方法是:

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

...
或者:

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

...
对于按钮标记,需要Padding属性来确保图像不会在15像素的高度被截断,并且按钮不会调整大小以适合图像。或者,我们可以指定Padding=“1”,但必须手动设置Height=“21”和Width=“22”,以确保按钮的大小不会调整到适合图像的大小
在“图像”选项卡上,需要设置高度和宽度以确保图像不会拉伸。SnapsToDevicePixels和RenderOptions.BitMapScalingMode都需要确保没有模糊。我不能保证这会很好地适用于所有决议

注:
对于NewDocumentHS.png图标,最容易引起问题的图标,因为它占用了整整16个像素的高度,您可能需要将填充调整为“1,1,3,2”,以便底部与其他图标更正确地对齐。

最好的方法是使用矢量图形而不是png。我知道下面的内容并不是你想要的,但是我认为没有办法让图标看起来更好。此外,它还可以帮助你摆脱边缘和填充物。(好吧,如果你想用照片,你就完蛋了)

坏消息是,您可能需要重新绘制所有图标。您可以使用MS Expression Blend(它能够将绘制的图像保存为.xaml)或使用文本编辑器自己制作它们。 我更喜欢Border.Background而不是Image.Source来放置图标,这允许我在图像上放置文本。这看起来是一样的:

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

首先,将图像分辨率更改为96DPI,这可以使用免费的Paint.net()完成,方法是打开文件,从菜单中选择“图像->画布大小”,将“分辨率”调整为96并保存


如果这不起作用,那么你可以使用我在我的博客中写到的解决方案

你可能想考虑在<>强> WPF4中尝试一个新的属性。 将
RenderOptions.BitmapScalingMode
保留为高质量,或者干脆不声明它

在根元素(即主窗口)上添加以下属性:
UseLayoutRounding=“True”

以前仅在Silverlight中可用的属性现在修复了所有位图大小问题。:)

请注意-一些效果 在精确布局上可以有:

  • 元素的宽度和/或高度最多可以增加或减少1个像素

  • 对象的放置最多可以移动1个像素

  • 居中图元最多可以垂直或水平偏离中心 1像素


更多信息请点击此处:

谢谢!调整分辨率大大简化了代码。按钮将图像截短为15像素的问题似乎已经奇迹般地自行消失,即使对于非96DPI图像也是如此。