为什么我的图像在运行时变得像素化？答案

【问题标题】：Why is my image becoming pixelated during runtime?为什么我的图像在运行时变得像素化？
【发布时间】：2018-07-25 05:04:18
【问题描述】：

所以每当我在设计窗口中使用应用程序并放大时，图像根本不会模糊

但是，当我运行应用程序时，它看起来像这样。它变得非常像素化，我不知道为什么。

这里是按钮的 XAML 代码

    <Button  Margin="10,0,0,0" Style="{DynamicResource RoundedButtonStyle}" Width="100" Height="30" HorizontalAlignment="Left">
        <Grid>
            <Image UseLayoutRounding="True" IsHitTestVisible="False" Height="20" Width="20" VerticalAlignment="Center" HorizontalAlignment="Left" Source="Resources/addButton.png" />
            <TextBlock IsHitTestVisible="False" Margin="20,0,0,1" VerticalAlignment="Center" Foreground="#9e9e9e">Add Product</TextBlock>
        </Grid>
    </Button>

还有模板

    <Setter Property="Background" Value="#2d2d30"/>
        <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border CornerRadius="5" Background="{TemplateBinding Background}" BorderThickness="1" Padding="2">
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="#686868"/>
        </Trigger>
    </Style.Triggers>
</Style>

还有我正在使用的原始图像。

【问题讨论】：

您的原始图像是128x128，您指定的图像尺寸是10x10。这可能与它有关。尝试将图像尺寸设置为实际图像尺寸，并验证它在运行时是否仍然如此。
不要在 WPF 中使用像素图像，而是使用字体中的符号。字符 来自“Segoe MDL2 Assets”的符号是相同的。与您的 pnf 图像相比，它可以完美缩放。
如果我没记错的话，“Segoe MDL2 资产”仅在 Windows 10 中可用。较旧的 Windows 版本具有“Segoe UI 符号”而不是较小的字符集。不能再测试了。

标签： c# .net wpf xaml

【解决方案1】：

您根本不应该使用位图图标。

要么使用字体中的符号

<Button Width="100" Height="30">
    <StackPanel Orientation="Horizontal">
        <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="24" Text="&#60616;"/>
        <TextBlock VerticalAlignment="Center" Text=" Add Product"/>
    </StackPanel>
</Button>

或带有矢量绘图的路径：

<Button Width="100" Height="30">
    <StackPanel Orientation="Horizontal">
        <Path Stroke="Black" StrokeThickness="1.5"
              StrokeStartLineCap="Round" StrokeEndLineCap="Round">
            <Path.Data>
                <GeometryGroup>
                    <EllipseGeometry Center="9,9" RadiusX="9" RadiusY="9"/>
                    <LineGeometry StartPoint="5,9" EndPoint="13,9"/>
                    <LineGeometry StartPoint="9,5" EndPoint="9,13"/>
                </GeometryGroup>
            </Path.Data>
        </Path>
        <TextBlock VerticalAlignment="Center" Text=" Add Product"/>
    </StackPanel>
</Button>

【讨论】：

【解决方案2】：

我认为您应该尝试不同的 RenderOptions.BitmapScalingModes（如 here 所述）

 <Button  Margin="10,0,0,0" Style="{DynamicResource RoundedButtonStyle}" Width="100" Height="30" HorizontalAlignment="Left">
        <Grid>
            <Image UseLayoutRounding="True" IsHitTestVisible="False" Height="20" Width="20" VerticalAlignment="Center" HorizontalAlignment="Left" Source="Resources/addButton.png"
RenderOptions.BitmapScalingMode="Fant"
 />
            <TextBlock IsHitTestVisible="False" Margin="20,0,0,1" VerticalAlignment="Center" Foreground="#9e9e9e">Add Product</TextBlock>
        </Grid>
    </Button>

对于颜色计数较低的图像（如您的情况），NearestNeighbour 效果最好。

【讨论】：

【解决方案3】：

在 XAML 中，图像的高度和宽度设置为 20，原始图像的大小为 128 x 128。因此 WPF 必须将图像缩小很多。这将导致图像像素化/粗糙（尤其是圆形）

解决方案：以正确的尺寸 (20x20) 重新创建图像。

【讨论】：