图像图标在自定义 Visual Studio 工具窗口 (VSIX) 中看起来格式不正确答案

【问题标题】：Image icons do not look well formed in Custom Visual Studio tool window (VSIX)图像图标在自定义 Visual Studio 工具窗口 (VSIX) 中看起来格式不正确
【发布时间】：2018-06-07 14:49:30
【问题描述】：

我正在开发一个 VSIX（Visual Studio 扩展）项目。它包含一个显示信息的工具窗口。

工具窗口是基于 MSDN 中的 walkthrough 创建的。

我观察到添加到工具窗口的图像图标（根据我的测试，Png、jpg 格式）看起来格式不正确（不是原始外观），有时当我更改工具窗口的大小或位置时（通过拖放、停靠和取消停靠）。

使用的图片图标：Cross.png

FirstToolWindowControl.xaml 的修改源代码（如上walkthrough）

<UserControl x:Class="FirstToolWin.FirstToolWindowControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             Background="{DynamicResource VsBrush.Window}"
             Foreground="{DynamicResource VsBrush.WindowText}"
             mc:Ignorable="d"
             d:DesignHeight="300" d:DesignWidth="300"
             Name="MyToolWindow">
    <Grid Width="auto" Height="auto">       
        <Image Margin="20" Source="C:\Cross.png" Width="16" Height="16" HorizontalAlignment="Center"  />
    </Grid>
</UserControl>

格式错误的图像屏幕截图：MalformedImageIcon.png

感谢任何人帮助找到根本课程并解决问题。谢谢。

【问题讨论】：

M，你想在哪里添加这个图标？
在作为上述工具窗口一部分的堆栈面板中。 <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="3" Orientation="Horizontal"> <Label Content="You can view this..."/> <Button Margin="1,0" Cursor="Hand" BorderBrush="Transparent" BorderThickness="0" Command="{Binding SomeCommand}" CommandParameter="{Binding SelectedItem.Lot}" Background="Transparent"> <Image Source="cross.png" HorizontalAlignment="Left" /> </Button> </StackPanel>
@JackZhai-MSFT，我们还尝试了矢量（基于 XAML）和光栅图像。观察到相同的行为。
@JackZhai-MSFT，感谢您对此的任何反馈 :)

标签： wpf visual-studio-extensions vsix

【解决方案1】：

使用基于 XAML 的矢量图像而不是光栅图像图标。我们能够从this 存储库中找到大多数标准图标（基于 XAML）。

【讨论】：

感谢您在此处分享您的解决方案，如果可能，您可以将其标记为答案，这样可以帮助遇到相同问题的其他社区成员。再次感谢您的分享：）

【解决方案2】：

我可以正常显示的一个解决方案：

<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" >
        <Image Width="16" Height="16" RenderOptions.BitmapScalingMode="NearestNeighbor"
   RenderOptions.EdgeMode="Aliased">
            <Image.Source>
                <BitmapImage DecodePixelWidth="200"  UriSource="C:\Users\xxx\source\repos\ColeVSIXProject\ColeVSIXProject\Resources\Test2.png" /> 
            </Image.Source>
        </Image>
    </StackPanel>

【讨论】：

我试过这个选项。有时它看起来很完美，但并非如此，因为我们改变了工具窗口的位置（调整大小时）。这与我之前的观察结果相同。
@Zameer M，我更新了我的答案，如果可能的话，你可以再检查一次。这将与渲染场景有关。
感谢您的回复。随着新的更新，图像失真似乎是最小的。在将代码的 BitmapScalingMode 进一步修改为 BitmapScalingMode="Fant" 后，它有所改进，但并不完美。对于具有圆形边缘的图像来说，这仍然是一个问题。请让我知道任何其他选择。谢谢
@JackZhai-MSFT 这是 VSIX 工具窗口中的错误还是限制？
@Zameer M，在不同的机器上是否有这个问题？实际上，我无法在我这边重现这个问题，它在我这边运行良好。所以我在考虑这是否与Windows环境本身有关。