目录显示

WPF 中的圆形不够圆？

独立观察员 2024 年 4 月 22 日

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

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

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

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

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

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

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

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

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

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

将内圈缩小，没想到又不圆了：

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

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

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

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