Question

我有一个带有图像的按钮，无论我做什么，在渲染/编译后，图像看起来都很模糊。

仅供参考-当不在WPF控件中时，图像看起来不错

left上的图像在编译之前，right上的图像在编译之后模糊。

我尝试应用UseLayoutRounding，应用SnapsToDevicePixels， RenderOptions.BitmapScalingMode并直接在按钮中直接消除抗锯齿，并直接消除对图像的抗锯齿。

有什么想法可以提高WPF中图像的质量吗？

XAML：

直接应用于按钮的样式：

  <Grid>
        <Button x:Name="recentButton" UseLayoutRounding="True" RenderOptions.BitmapScalingMode="HighQuality" SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased"
            Margin="10,137,302,10"
            Width="auto"
            Height="23" 
            HorizontalAlignment="Stretch"
            BorderBrush="{x:Null}" 
            Foreground="White" 
            BorderThickness="0" 
            Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}">
            <Image Source="/Tool;component/Design/Images/more-icon-active.png" Stretch="None"/>
        </Button>
    </Grid>

直接应用于图像的样式：

  <Grid>
        <Button x:Name="recentButton"
            Margin="10,137,302,10"
            Width="auto"
            Height="23" 
            HorizontalAlignment="Stretch"
            BorderBrush="{x:Null}" 
            Foreground="White" 
            BorderThickness="0" 
            Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}">
            <Image Source="/Tool;component/Design/Images/more-icon-active.png" UseLayoutRounding="True" RenderOptions.BitmapScalingMode="HighQuality" SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased" Stretch="None"/>
        </Button>
    </Grid>

Answer 1

问题是您直接在控件上使用UseLayoutRounding。

但是，请注意链接文档中的此说明，

您应该在根元素上将UseLayoutRounding设置为true。布局系统将子坐标添加到父坐标；因此，如果父坐标不在像素边界上，则子坐标也不在像素边界上。如果无法在根处设置UseLayoutRounding，请在子级上设置SnapsToDevicePixels，以获得所需的效果。

因此，改为在父容器上使用。对于您而言，该元素应位于<grid>元素上。

其他要求

@Clemens在评论部分推荐

RenderOptions.BitmapScalingMode="NearestNeighbor"取决于图像的种类，可能会增加一些清晰度。

请注意，您必须将其直接应用于图像。

@BradleyUffner在评论部分推荐

在顶级元素上设置TextOptions.TextFormattingMode="Display"，以大大改善台式计算机上的文本呈现。

在WPF中无论什么都模糊图像

1 个答案: