WPF 布局舍入（WPF 边框模糊 或 像素错位 的问题）

1. 什么是 WPF 布局舍入？

在 WPF 开发过程中，可能会遇到界面模糊、边框错位、文本渲染不清晰等问题。这些现象通常是由于 WPF 采用 设备无关像素（DIP, Device Independent Pixels），在不同 DPI 设置下，UI 元素的位置和大小可能会出现小数像素，导致渲染模糊。

WPF 提供了 布局舍入（Layout Rounding） 机制，以确保 UI 元素的位置和大小对齐到整数像素，从而避免模糊问题。

2. 为什么会出现模糊问题？

常见原因：

1. 布局计算时的浮点数精度问题：

   • 例如 Grid 的 Width=300，分成 3 列时，每列 100px 正常，但如果 Width=301，每列 100.333px，可能会导致像素错位。

2. DPI 缩放：

   • 当 Windows 设置的缩放比例为 125% 或 150% 时，UI 元素的尺寸可能不是整数像素，导致边缘模糊。

3. 边框或线条渲染不清晰：

   • Border、Line 在非整数像素上绘制时，可能会出现半透明或模糊。

3. 解决方案示例

（1）启用 UseLayoutRounding

UseLayoutRounding 会让 所有子元素的宽高、位置对齐整数像素，防止模糊。

<Window UseLayoutRounding="True">
    <Grid>
        <TextBlock Text="清晰文本" FontSize="14"/>
    </Grid>
</Window>

适用场景：

• 解决 Grid、StackPanel、Button 等控件的 像素对齐问题。

• 在 高 DPI 设备上特别有效。

（2）使用 SnapToDevicePixels

SnapToDevicePixels 主要用于 边框、线条等图形元素，确保它们贴合像素网格。

<Border BorderThickness="1" BorderBrush="Black" SnapToDevicePixels="True">
    <TextBlock Text="边框不会模糊"/>
</Border>

适用场景：

• 解决 Border、Rectangle、Line 等控件的 边缘模糊问题。

（3）优化 Grid 及列宽/行高

如果 Grid 宽度或高度不能整除其子元素的数量，可能会出现像素误差。

<Grid Width="300" UseLayoutRounding="True">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
</Grid>

优化方法：

• 避免 Width="301" 这种不能整除的情况。

• 使用 MinWidth 和 MinHeight，确保 Grid 不会因 DPI 变化导致非整数像素。

（4）优化 TextBlock / Label 文字清晰度

问题：

• TextBlock 在某些情况下字体可能会模糊，特别是在缩放时。

解决方案：

• 使用 TextOptions.TextFormattingMode="Display" 适用于小字体。

• 使用 TextOptions.TextRenderingMode="ClearType" 适用于大多数情况。

<TextBlock Text="清晰文本"
           FontSize="14"
           TextOptions.TextFormattingMode="Display"
           TextOptions.TextRenderingMode="ClearType"/>

（5）优化 Image 渲染

问题：

• Image 可能因 DPI 缩放而变模糊。

解决方案：

• 避免 Stretch="Fill"，避免非整数缩放。

• 使用 RenderOptions.BitmapScalingMode="HighQuality" 提高缩放质量。

<Image Source="image.png"
       Width="100" Height="100"
       RenderOptions.BitmapScalingMode="HighQuality"/>

4. 结合多种方法的最佳实践

为了确保整个 WPF 界面清晰，建议 在 Window 或根 Grid 级别统一设置：

<Window UseLayoutRounding="True">
    <Grid>
        <Border BorderBrush="Black"
                BorderThickness="1"
                SnapToDevicePixels="True">
            <TextBlock Text="清晰显示"
                       FontSize="14"
                       TextOptions.TextFormattingMode="Display"
                       TextOptions.TextRenderingMode="ClearType"/>
        </Border>
    </Grid>
</Window>

5. 总结

6. 结论

1. UseLayoutRounding="True" 是最关键的优化点，适用于所有控件。

2. 如果有 Border 或 Line，建议使用 SnapToDevicePixels="True"。

3. 文本渲染问题可以通过 TextOptions.TextFormattingMode 进行优化。

4. Grid 的宽度和列宽应尽量避免非整数分配。

5. 高 DPI 设备下必须进行 UI 适配，否则容易出现模糊问题。

按照这些方法，可以确保 WPF 界面在不同的 DPI 设置和分辨率下都能保持清晰。（学习笔记）