XAML格式图像显示模糊失真问题的解决求助

问题分析 #

模糊的核心原因是非整数坐标导致的亚像素渲染：Inkscape导出的XAML中，几何图形的坐标包含大量小数（如77.375、12.625等），WPF渲染非像素对齐的元素时会启用抗锯齿，导致线条和色块边缘模糊，小尺寸下表现尤为明显。

解决方案 #

方案1：用WPF原生Grid控件绘制网格（推荐） #

直接用WPF的Grid构建网格，基于矢量渲染天然清晰，无需依赖外部导出的XAML。以下是适配你尺寸的示例代码：

<Grid Width="90" Height="102.625">
    <!-- 黑色背景 -->
    <Rectangle Fill="#000000"/>
    <!-- 定义行列（每行/列高度12.625，共8行8列） -->
    <Grid.RowDefinitions>
        <RowDefinition Height="12.625"/>
        <RowDefinition Height="12.625"/>
        <RowDefinition Height="12.625"/>
        <RowDefinition Height="12.625"/>
        <RowDefinition Height="12.625"/>
        <RowDefinition Height="12.625"/>
        <RowDefinition Height="12.625"/>
        <RowDefinition Height="12.625"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="12.625"/>
        <ColumnDefinition Width="12.625"/>
        <ColumnDefinition Width="12.625"/>
        <ColumnDefinition Width="12.625"/>
        <ColumnDefinition Width="12.625"/>
        <ColumnDefinition Width="12.625"/>
        <ColumnDefinition Width="12.625"/>
        <ColumnDefinition Width="12.625"/>
    </Grid.ColumnDefinitions>

    <!-- 填充浅色单元格（对应原导出的色块位置） -->
    <!-- 第8行（索引7） -->
    <Rectangle Grid.Row="7" Grid.Column="0" Fill="#dfdfdf"/>
    <Rectangle Grid.Row="7" Grid.Column="1" Fill="#dfdfdf"/>
    <Rectangle Grid.Row="7" Grid.Column="2" Fill="#dfdfdf"/>
    <Rectangle Grid.Row="7" Grid.Column="3" Fill="#dfdfdf"/>
    <Rectangle Grid.Row="7" Grid.Column="4" Fill="#dfdfdf"/>
    <Rectangle Grid.Row="7" Grid.Column="5" Fill="#dfdfdf"/>
    <Rectangle Grid.Row="7" Grid.Column="6" Fill="#dfdfdf"/>
    <!-- 第7行（索引6） -->
    <Rectangle Grid.Row="6" Grid.Column="0" Fill="#dfdfdf"/>
    <Rectangle Grid.Row="6" Grid.Column="1" Fill="#dfdfdf"/>
    <Rectangle Grid.Row="6" Grid.Column="2" Fill="#dfdfdf"/>
    <Rectangle Grid.Row="6" Grid.Column="3" Fill="#dfdfdf"/>
    <Rectangle Grid.Row="6" Grid.Column="4" Fill="#dfdfdf"/>
    <Rectangle Grid.Row="6" Grid.Column="5" Fill="#dfdfdf"/>
    <Rectangle Grid.Row="6" Grid.Column="6" Fill="#dfdfdf"/>
    <!-- 第6行（索引5） -->
    <Rectangle Grid.Row="5" Grid.Column="0" Fill="#dfdfdf"/>
    <Rectangle Grid.Row="5" Grid.Column="1" Fill="#dfdfdf"/>
    <Rectangle Grid.Row="5" Grid.Column="2" Fill="#dfdfdf"/>
    <Rectangle Grid.Row="5" Grid.Column="3" Fill="#dfdfdf"/>
    <Rectangle Grid.Row="5" Grid.Column="4" Fill="#dfdfdf"/>
    <Rectangle Grid.Row="5" Grid.Column="5" Fill="#dfdfdf"/>
    <Rectangle Grid.Row="5" Grid.Column="6" Fill="#dfdfdf"/>
    <!-- 第5行（索引4） -->
    <Rectangle Grid.Row="4" Grid.Column="0" Fill="#dfdfdf"/>
    <Rectangle Grid.Row="4" Grid.Column="1" Fill="#dfdfdf"/>
    <Rectangle Grid.Row="4" Grid.Column="2" Fill="#dfdfdf"/>
    <Rectangle Grid.Row="4" Grid.Column="3" Fill="#dfdfdf"/>
    <Rectangle Grid.Row="4" Grid.Column="4" Fill="#dfdfdf"/>
    <Rectangle Grid.Row="4" Grid.Column="5" Fill="#dfdfdf"/>
    <Rectangle Grid.Row="4" Grid.Column="7" Fill="#dfdfdf"/>
    <!-- 第4行（索引3） -->
    <Rectangle Grid.Row="3" Grid.Column="0" Fill="#dfdfdf"/>
    <Rectangle Grid.Row="3" Grid.Column="1" Fill="#dfdfdf"/>
    <Rectangle Grid.Row="3" Grid.Column="2" Fill="#dfdfdf"/>
    <Rectangle Grid.Row="3" Grid.Column="3" Fill="#dfdfdf"/>
    <Rectangle Grid.Row="3" Grid.Column="4" Fill="#dfdfdf"/>
    <Rectangle Grid.Row="3" Grid.Column="5" Fill="#dfdfdf"/>
    <Rectangle Grid.Row="3" Grid.Column="7" Fill="#dfdfdf"/>
    <!-- 第3行（索引2） -->
    <Rectangle Grid.Row="2" Grid.Column="0" Fill="#dfdfdf"/>
    <Rectangle Grid.Row="2" Grid.Column="1" Fill="#dfdfdf"/>
    <Rectangle Grid.Row="2" Grid.Column="2" Fill="#dfdfdf"/>
    <Rectangle Grid.Row="2" Grid.Column="3" Fill="#dfdfdf"/>
    <Rectangle Grid.Row="2" Grid.Column="4" Fill="#dfdfdf"/>
    <Rectangle Grid.Row="2" Grid.Column="5" Fill="#dfdfdf"/>
    <Rectangle Grid.Row="2" Grid.Column="7" Fill="#dfdfdf"/>
    <!-- 第2行（索引1） -->
    <Rectangle Grid.Row="1" Grid.Column="0" Fill="#dfdfdf"/>
    <Rectangle Grid.Row="1" Grid.Column="1" Fill="#dfdfdf"/>
    <Rectangle Grid.Row="1" Grid.Column="2" Fill="#dfdfdf"/>
    <Rectangle Grid.Row="1" Grid.Column="3" Fill="#dfdfdf"/>
    <Rectangle Grid.Row="1" Grid.Column="5" Fill="#dfdfdf"/>
    <Rectangle Grid.Row="1" Grid.Column="6" Fill="#dfdfdf"/>
    <Rectangle Grid.Row="1" Grid.Column="7" Fill="#dfdfdf"/>
    <!-- 第1行（索引0） -->
    <Rectangle Grid.Row="0" Grid.Column="0" Fill="#dfdfdf"/>
    <Rectangle Grid.Row="0" Grid.Column="1" Fill="#dfdfdf"/>
    <Rectangle Grid.Row="0" Grid.Column="2" Fill="#dfdfdf"/>
    <Rectangle Grid.Row="0" Grid.Column="3" Fill="#dfdfdf"/>
    <Rectangle Grid.Row="0" Grid.Column="5" Fill="#dfdfdf"/>
    <Rectangle Grid.Row="0" Grid.Column="6" Fill="#dfdfdf"/>
    <Rectangle Grid.Row="0" Grid.Column="7" Fill="#dfdfdf"/>
</Grid>

方案2：修改现有XAML对齐像素边界 #

若必须使用导出的XAML，可通过添加Transform修正坐标，同时禁用冗余抗锯齿：

1. 给DrawingGroup添加渲染变换，偏移半像素对齐：

<DrawingGroup x:Key="grid">
    <DrawingGroup.RenderTransform>
        <TranslateTransform X="0.5" Y="0.5"/>
    </DrawingGroup.RenderTransform>
    <!-- 原ClipGeometry及其他内容 -->
</DrawingGroup>

2. 在使用DrawingImage的Image控件中添加属性：

<Image Source="{StaticResource di_grid}" 
       Width="90" Height="102.625"
       RenderOptions.EdgeMode="Aliased"/>

方案3：手动修正PathGeometry的整数坐标 #

将PathGeometry中所有小数坐标改为最接近的整数（如77.375改为77、12.625改为13），让WPF直接对齐像素渲染，避免亚像素模糊。

验证效果 #

以上方案均能让网格在原尺寸下清晰显示，其中方案1（原生Grid）是最稳定的长期解决方案，完全规避导出工具带来的坐标问题。

内容的提问来源于stack exchange，提问作者firelex