WPF中Path边框模糊及宽度不一致问题求助

问题描述 #

创建ToggleButton自定义样式时，Path的线条宽度预期为1像素，但实际显示中左侧和底部线条呈现为2像素（黑色正方形边框左、底线条明显粗于右、上线条）。

相关代码 #

XAML代码 #

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="300" Width="300">
 
    <Grid>
        <ToggleButton VerticalAlignment="Center" HorizontalAlignment="Center" Background="#F0F0F0">
            <ToggleButton.Style>
                <Style TargetType="{x:Type ToggleButton}">
                    <Setter Property="OverridesDefaultStyle" Value="True"/>
                    <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
                    <Setter Property="Background" Value="Transparent"/>
                    <Setter Property="Width" Value="50"/>
                    <Setter Property="Height" Value="50"/>
                    <Setter Property="IsChecked" Value="False"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type ToggleButton}">
                                <Grid Background="{TemplateBinding Background}">
                                    <Path x:Name="Mark" Stroke="Black" Data="M 0,0 L 10,0 L 10,10 L 0,10 Z" VerticalAlignment="Center" 
                                          HorizontalAlignment="Center" IsHitTestVisible="False" RenderOptions.EdgeMode="Aliased"
                                          UseLayoutRounding="False" SnapsToDevicePixels="False"/>
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </ToggleButton.Style>
        </ToggleButton>
    </Grid>
</Window>

已尝试的操作及结果 #

• 移除RenderOptions.EdgeMode="Aliased"：边框出现模糊效果
• 启用UseLayoutRounding="True" + SnapsToDevicePixels="True"：边框依然模糊
• 检查DPI值：通过以下代码获取系统和WPF识别的DPI，结果均为120，确认应用已正确识别缩放比例

PresentationSource presentationSource = PresentationSource.FromVisual(window);                 
double wpfDpi = 96.0 * presentationSource.CompositionTarget.TransformToDevice.M11;                 
double currentDpi = GetDpiForWindow(hWnd);

解决方案 #

问题根源在于WPF中Path线条的渲染逻辑：线条是居中对齐的，当Path的坐标为整数时，1像素宽的线条会横跨两个像素单元，在Aliased模式下就会显示为2像素粗。

可以通过两种方式修正：

1. 调整Path的坐标偏移：将Data路径的坐标改为半像素偏移，让线条对齐到像素边界：

<Path x:Name="Mark" Stroke="Black" Data="M 0.5,0.5 L 9.5,0.5 L 9.5,9.5 L 0.5,9.5 Z" .../>

2. 添加半像素Margin：给Path设置Margin="0.5"，同样能让线条对齐像素边界：

<Path x:Name="Mark" Stroke="Black" Data="M 0,0 L 10,0 L 10,10 L 0,10 Z" Margin="0.5" .../>

修正后，保持RenderOptions.EdgeMode="Aliased"即可让所有方向的线条都显示为1像素，且不会模糊。

内容的提问来源于stack exchange，提问作者D .Stark