Avalonia 中设置控件圆角最常用、最直接的方式就是用 Border 控件包裹目标内容,并设置其 CornerRadius 属性。
Border 的 CornerRadius 是核心属性
CornerRadius 不是所有控件都原生支持的属性,但 Border 支持且效果稳定。它接受一个或四个数值(类似 CSS):
单个值:如CornerRadius="8",四个角都为 8px 圆角 两个值:如
CornerRadius="8 4"→ 水平方向统一为 8,垂直方向统一为 4(即左上/右下=8,右上/左下=4) 四个值:如
CornerRadius="10 5 0 3"→ 顺序为 左上、右上、右下、左下
必须配合 Background 才能看见圆角效果
仅设 CornerRadius 不够——如果 Border 没有背景色(Background)或边框(BorderBrush + BorderThickness),圆角视觉上不可见,因为子内容会“溢出”显示。常见写法:
加背景:Background="White"或
Background="{DynamicResource ThemeBackground}"
加边框:BorderBrush="Gray" BorderThickness="1"同时加更稳妥,尤其用于按钮、卡片等容器
嵌套内容需注意 Padding 和子控件裁剪
Border 默认不裁剪子元素,若子控件超出圆角区域(比如没设 Margin 或 Padding),边缘可能“破框”。推荐做法:
设置Padding="8"让内容内缩,避免贴边 子控件自身也设
CornerRadius(如 Button)时,需与 Border 协调,否则出现“双圆角”或错位 不需要裁剪时可忽略;需要严格裁剪可用
ClipToBounds="True"(但 Border 本身通常不需要)
其他控件的圆角支持情况
部分控件(如 Button、TextBox、TabItem)在某些主题(如 Semi.Avalonia、FluentAvalonia)中支持直接设 CornerRadius,但行为依赖模板实现。稳妥起见:
自定义按钮:建议用 Border 包裹 TextBlock/Button,并统一控制圆角和背景 TabItem 圆角:常通过 Style 修改Setter Property="CornerRadius"实现(如 TabControl.Styles 内) 避免对 Grid、StackPanel 等布局容器直接设 CornerRadius——它们不响应该属性
基本上就这些。用好 Border + CornerRadius + Background 这个组合,90% 的圆角需求都能干净解决。
