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. 總結

控件	可能出現的問題	解決方案
所有控件	位置錯位、模糊	UseLayoutRounding="True"
TextBlock / Label	字體模糊	TextOptions.TextFormattingMode="Display" + TextRenderingMode="ClearType"
Border / Line	線條模糊	SnapToDevicePixels="True"
Image	圖片縮放模糊	RenderOptions.BitmapScalingMode="HighQuality"
Button / ListBox	邊緣模糊	UseLayoutRounding="True"

---

6. 結論

1. UseLayoutRounding="True" 是最關鍵的優化點，適用于所有控件。

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

3. 文本渲染問題可以通過 TextOptions.TextFormattingMode 進行優化。

4. Grid 的寬度和列寬應盡量避免非整數分配。

5. 高 DPI 設備下必須進行 UI 適配，否則容易出現模糊問題。

按照這些方法，可以確保 WPF 界面在不同的 DPI 設置和分辨率下都能保持清晰。（學習筆記）