WPF 中的圆形不够圆?

WPF 中的圆形不够圆?

WPF 中的圆形不够圆?

独立观察员 2024 年 4 月 22 日

上周五,在使用一个 Grid 和两个 Border 来制作一个同心圆的时候,发现怎么看着不太圆啊,问了一下 [Kimi],说是应该使用 Ellipse 来画圆:

WPF 中的圆形不够圆?

 

但是我按它说的,换成了 Ellipse,结果同心圆看着还是歪歪扭扭的。后来下班了,我也就暂时没去管了,心想实在不行,下周换成 Svg 或者图片吧。

 

谁曾想,在周末自己敲代码的时候,又出现这个问题了,不过这次是 RadioButton。众所周知,RadioButton 也是类似同心圆的,只不过内圈一般是实心的样式。

 

在使用默认样式的 RadioButton 时,发现圆圈好像不够圆,仔细观察一下,其实不是圆圈不圆,而是中心点不在中间:

WPF 中的圆形不够圆?

 

后来发现需要设置 UseLayoutRounding="True" 来解决:

WPF 中的圆形不够圆?

 

也就是布局时进行尺寸和位置的四舍五入:

WPF 中的圆形不够圆?

 

既然 RadioButton 可以通过设置 UseLayoutRounding="True" 来解决,那么上周五遇到的那个问题能不能这样解决呢?

 

今天满怀希望地试了一下,发现不行(底部为放大镜视角;这个是用户控件,套了一层 ViewBox,使用时设置的直径为 20,955 右边那个为原始尺寸;可以看到尺寸越小,形变越明显):

WPF 中的圆形不够圆?

 

而且去掉这个设置,它又换了个姿势,但还是不圆:

WPF 中的圆形不够圆?

 

不过这个可能是因为 Grid 边长 50,外圈圆形直径 49,但是 StrokeThickness 为 2,有可能超出了,所以外圈直径改为 48(现在想想应该改为最多 46),果然变圆了,只不过内外圈太挤了:

WPF 中的圆形不够圆?

 

将内圈缩小,没想到又不圆了:

WPF 中的圆形不够圆?
 

尝试在各处设置 UseLayoutRounding="True" ,都于事无补:

WPF 中的圆形不够圆?

 

最后还是只能通过调整尺寸来勉强达到圆形:

WPF 中的圆形不够圆?

 

总结:在 WPF 开发中,有的时候(特别是尺寸比较小的情况),一些圆形的地方显示出来让人感觉不够圆(不同心)。对于 RadioButton,可通过设置 UseLayoutRounding="True" 来解决;对于 Border 模拟的同心圆,或者 Ellipse 绘制的同心圆,暂时没找到好方法,只能通过微调尺寸来解决。

大家有什么好方法,欢迎交流讨论。

 

2024 年 4 月 23 日 更新:

知乎网友 @张城 提出可以通过设置 SnapsToDevicePixels="False" 来解决:

WPF 中的圆形不够圆?

 

SnapsToDevicePixels 设置的是,元素的呈现是否应使用特定于设备的像素设置:

WPF 中的圆形不够圆?

 

我这次其实也试过这个,不过一直试的是将其设置为 True,因为我想的是它默认值为 False,不设置的时候不就已经是 False 了嘛:

WPF 中的圆形不够圆?

WPF 中的圆形不够圆?

 

可能的解释就是在其它地方被设置了,所以此处只能强制再将它设置回 False 才能生效。

 

下面来演示一下,首先将内圈尺寸改为 30,也就是会出现不圆现象的尺寸:

WPF 中的圆形不够圆?

 

然后加上 SnapsToDevicePixels="False" ,可以看到还是有点效果的(这里看小图效果更明显):

WPF 中的圆形不够圆?

 

原创文章,转载请注明: 转载自 独立观察员(dlgcy.com)

本文链接地址: [WPF 中的圆形不够圆?](https://dlgcy.com/wpf-round-not-round-enough/)

关注微信公众号 独立观察员博客(DLGCY_BLOG) 第一时间获取最新文章

%title插图%num

发表评论