在 WPF 中，创建工具栏按钮以正确缩放图像的最佳方法是什么？答案

【问题标题】：In WPF, What is the best way to create toolbar buttons so that the images are properly scaled?在 WPF 中，创建工具栏按钮以正确缩放图像的最佳方法是什么？
【发布时间】：2010-10-16 02:15:11
【问题描述】：

具体来说，我希望使用 VS2008ImageLibrary 中包含的 16*16 32 位 png 图像。我试过手动设置图像的高度和宽度属性，调整边距和填充，调整拉伸和渲染选项。我创建工具栏按钮的尝试都导致缩放不当（图标模糊）、图标上的底行像素被截断或工具栏按钮的大小不正确——更不用说已经提到的图标消失了Here。有没有人找到制作标准的、VisualStudio/WinForms 风格的工具栏按钮在 WPF 中正确显示的最佳方法？

【问题讨论】：

标签： wpf visual-studio user-interface icons toolbar

【解决方案1】：

首先，将图像分辨率更改为 96DPI，这可以使用免费的 Paint.net (http://www.getpaint.net) 打开文件，从菜单中选择 Image->Canvas Size 并将“分辨率”调整为 96 并保存.

如果这对您没有帮助，您可以使用我在博客http://www.nbdtech.com/blog/archive/2008/11/20/blurred-images-in-wpf.aspx中写的解决方案@

【讨论】：

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

【解决方案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>

【讨论】：

【解决方案3】：

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

<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”，以便底部对齐更多与其他图标正确搭配。

【讨论】：

【解决方案4】：

您可能需要考虑尝试 WPF4 中现在可用的新属性。将RenderOptions.BitmapScalingMode 留给HighQuality 或者干脆不声明它。

在您的根元素（即您的主窗口）上添加此属性：UseLayoutRounding="True"。

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

请注意 - 一些效果布局舍入可以有精确的布局：

元素的宽度和/或高度最多可以增加或缩小 1 个像素

物体的放置最多可以移动 1 个像素

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

在此处找到更多信息：http://blogs.msdn.com/text/archive/2009/08/27/layout-rounding.aspx

【讨论】：