C# WPF 重叠Rectangle时下方边框可见、Button无此问题的原因是什么？

问题原因 #

这个差异源于WPF渲染机制对不同类型元素的默认处理逻辑：

• Rectangle属于Shape形状类，默认启用边缘抗锯齿渲染。当两个矩形的坐标落在物理像素的中间位置时，边缘会生成半透明过渡像素，上下层像素混合后就会露出下层颜色，看起来像是下层的边框漏出来了。
• Button属于Control控件类，默认继承父容器的UseLayoutRounding=true特性，布局时会自动将坐标对齐到物理像素边界，不会产生半透明边缘，因此重叠时可以完全遮挡下层元素。

解决方案 #

可以任选以下一种方式处理，即可实现Rectangle重叠时完全遮挡下层元素：

1. 给承载元素的Canvas开启布局舍入，全局生效：

<Canvas x:Name="Pad" UseLayoutRounding="True">
    <!-- 内部Rectangle不需要额外修改 -->
</Canvas>

2. 给上层Rectangle单独设置对齐设备像素属性：

<Rectangle Height="100"
           Width="100" 
           Fill="White"  
           Canvas.Left="10" 
           Canvas.Top="10"
           SnapsToDevicePixels="True">
</Rectangle>

3. 关闭上层Rectangle的边缘抗锯齿，使用硬边缘渲染：

<Rectangle Height="100"
           Width="100" 
           Fill="White"  
           Canvas.Left="10" 
           Canvas.Top="10"
           RenderOptions.EdgeMode="Aliased">
</Rectangle>

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