Avalonia如何设置控件的圆角 Avalonia Border CornerRadius用法

在Avalonia的UI开发中，给控件添加圆角效果是提升界面美观度的常用操作，Border控件作为布局装饰类控件，其自带的CornerRadius属性可以直接实现圆角效果，同时还能包裹其他控件让任意控件都支持圆角样式。

CornerRadius属性基础说明

CornerRadius是Avalonia中用于定义矩形四个角圆角半径的属性，它属于<Border>控件的核心样式属性，取值规则遵循顺时针顺序，分别对应左上角、右上角、右下角、左下角的圆角半径，单位是与布局单位一致的像素值。

CornerRadius的赋值方式有多种，不同赋值数量对应不同的圆角效果：

• 赋值1个数值：四个角的圆角半径都相同
• 赋值2个数值：第一个值对应左上角和右下角，第二个值对应右上角和左下角
• 赋值4个数值：依次对应左上角、右上角、右下角、左下角的圆角半径

基础用法示例

最基础的用法是直接给Border设置CornerRadius，同时搭配Background、BorderThickness等属性实现带边框的圆角效果，示例代码如下：

<Border
    Width="200"
    Height="100"
    Background="#4CAF50"
    BorderBrush="#333333"
    BorderThickness="2"
    CornerRadius="10">
    <TextBlock
        Text="四个角都是10px圆角"
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Foreground="White" />
</Border>

如果需要设置不同角的不同圆角效果，可以调整CornerRadius的数值，比如只让左上角和右下角有圆角：

<Border
    Width="200"
    Height="100"
    Background="#2196F3"
    BorderBrush="#333333"
    BorderThickness="2"
    CornerRadius="15,0,15,0">
    <TextBlock
        Text="左上右下15px圆角"
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Foreground="White" />
</Border>

给普通控件添加圆角

很多基础控件本身没有CornerRadius属性，比如Button、TextBox等，这时候可以用Border包裹这些控件，再给Border设置CornerRadius，就能实现控件的圆角效果，示例是圆角按钮的实现：

<Border
    CornerRadius="8"
    Background="#FF5722">
    <Button
        Content="圆角按钮"
        Background="Transparent"
        BorderThickness="0"
        Foreground="White"
        Padding="20,10"
        HorizontalAlignment="Center"
        VerticalAlignment="Center" />
</Border>

需要注意如果包裹的控件本身有背景色，需要把控件的背景设为透明，否则会遮挡Border的圆角背景，导致圆角效果不生效。

代码中动态修改CornerRadius

除了在XAML中静态设置，也可以在后台代码中动态修改CornerRadius属性，比如点击按钮切换不同的圆角效果：

using Avalonia;
using Avalonia.Controls;
using Avalonia.Media;

namespace AvaloniaCornerRadiusDemo
{
    public partial class MainWindow : Window
    {
        private Border _targetBorder;
        private bool _isRound = true;

        public MainWindow()
        {
            InitializeComponent();
            // 获取XAML中定义的Border控件
            _targetBorder = this.FindControl<Border>("DemoBorder");
        }

        private void SwitchCornerRadius(object sender, RoutedEventArgs e)
        {
            if (_isRound)
            {
                // 设置为无圆角
                _targetBorder.CornerRadius = new CornerRadius(0);
            }
            else
            {
                // 设置为四个角15px圆角
                _targetBorder.CornerRadius = new CornerRadius(15);
            }
            _isRound = !_isRound;
        }
    }
}

对应的XAML中需要给Border定义x:Name为DemoBorder，同时给按钮绑定SwitchCornerRadius事件：

<StackPanel
    HorizontalAlignment="Center"
    VerticalAlignment="Center"
    Spacing="20">
    <Border
        x:Name="DemoBorder"
        Width="200"
        Height="100"
        Background="#9C27B0"
        CornerRadius="15">
        <TextBlock
            Text="动态切换圆角"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Foreground="White" />
    </Border>
    <Button
        Content="切换圆角状态"
        Click="SwitchCornerRadius"
        HorizontalAlignment="Center" />
</StackPanel>

常见注意事项

• CornerRadius的数值不能超过控件对应边长的一半，否则圆角效果会异常，比如宽度200的控件，单个角的圆角半径最大为100
• 如果Border设置了BorderThickness，圆角效果会包含边框部分，边框也会呈现圆角形状
• 当CornerRadius设置为0时，控件会恢复直角效果，和未设置该属性时的默认表现一致

AvaloniaBorderCornerRadius控件圆角修改时间：2026-07-23 18:33:27