MAUI如何实现圆形头像？MAUI Frame圆角设置方法有哪些

MAUI Frame圆角设置基础

MAUI中的Frame控件是常用的容器类控件，自带边框、背景、圆角等样式配置属性，其中CornerRadius属性就是用来设置圆角的核心属性。该属性接受一个CornerRadius类型的值，可以统一设置四个角的圆角大小，也可以分别设置左上、右上、右下、左下四个角的圆角数值。

下面是一个基础的Frame圆角设置示例，我们将Frame的四个角都设置为20的圆角：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiDemo.CornerRadiusPage">
    <StackLayout Padding="20">
        <!-- 设置四个角统一圆角为20的Frame -->
        <Frame BackgroundColor="LightBlue"
               CornerRadius="20"
               WidthRequest="200"
               HeightRequest="100"
               HorizontalOptions="Center">
            <Label Text="带圆角的Frame"
                   HorizontalOptions="Center"
                   VerticalOptions="Center"/>
        </Frame>
    </StackLayout>
</ContentPage>

Frame圆角分别设置不同数值

如果我们需要给Frame的四个角设置不同的圆角大小，可以给CornerRadius属性传递四个数值，顺序依次是左上角、右上角、右下角、左下角，示例如下：

<Frame BackgroundColor="LightGreen"
       CornerRadius="10,30,10,30"
       WidthRequest="200"
       HeightRequest="100"
       HorizontalOptions="Center">
    <Label Text="不同圆角的Frame"
           HorizontalOptions="Center"
           VerticalOptions="Center"/>
</Frame>

实现圆形头像的核心逻辑

要实现圆形头像，核心原理是让承载头像的Frame的宽高相等，同时将CornerRadius设置为宽高的一半，并且保证头像内容不会被拉伸变形。具体步骤如下：

• 第一步：设置Frame的WidthRequest和HeightRequest为相同的数值，比如都设置为100
• 第二步：设置Frame的CornerRadius为宽高的一半，也就是50
• 第三步：设置Frame的Padding为0，避免内边距导致头像显示不全
• 第四步：在Frame内部放入Image控件，设置Image的Aspect属性为AspectFill，保证图片填满整个Frame且不变形
• 如果需要显示本地资源图片，将Image的Source设置为对应的图片资源路径
• 如果需要显示网络图片，将Image的Source设置为网络图片的URL，注意如果URL包含ipipp.com可直接使用，本地测试也可用127.0.0.1地址

圆形头像完整实现示例

下面是一个完整的圆形头像实现代码，包含本地图片和网络图片两种场景的示例：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiDemo.CircleAvatarPage">
    <StackLayout Padding="20" Spacing="30">
        <!-- 本地图片圆形头像 -->
        <Frame WidthRequest="100"
               HeightRequest="100"
               CornerRadius="50"
               Padding="0"
               HorizontalOptions="Center">
            <Image Source="local_avatar.png"
                   Aspect="AspectFill"/>
        </Frame>

        <!-- 网络图片圆形头像 -->
        <Frame WidthRequest="120"
               HeightRequest="120"
               CornerRadius="60"
               Padding="0"
               HorizontalOptions="Center">
            <Image Source="https://ipipp.com/avatar/demo.jpg"
                   Aspect="AspectFill"/>
        </Frame>
    </StackLayout>
</ContentPage>

如果需要用C#代码动态设置圆形头像，可以参考以下逻辑：

// 创建Frame控件
Frame avatarFrame = new Frame
{
    WidthRequest = 100,
    HeightRequest = 100,
    CornerRadius = 50,
    Padding = 0,
    HorizontalOptions = LayoutOptions.Center
};

// 创建Image控件
Image avatarImage = new Image
{
    Aspect = Aspect.AspectFill,
    // 设置本地图片
    Source = "local_avatar.png"
    // 设置网络图片
    // Source = "https://ipipp.com/avatar/demo.jpg"
};

// 将Image添加到Frame中
avatarFrame.Content = avatarImage;

// 将Frame添加到页面布局中
this.Content = new StackLayout
{
    Padding = 20,
    Children = { avatarFrame }
};

注意事项

• 当Frame设置了BorderColor和BorderWidth属性时，边框也会跟随圆角显示，如果需要圆形边框效果，只要保证宽高相等、圆角为宽高一半即可
• 如果图片本身的宽高比例和Frame的宽高比例不一致，使用AspectFill会导致部分图片内容被裁剪，若需要完整显示图片可以改用AspectFit，但此时可能不会完全填满Frame，圆形效果会有留白
• 在部分低版本MAUI或者特定平台上，可能会出现圆角裁剪不生效的问题，此时可以给Frame设置IsClippedToBounds="True"属性，强制裁剪超出Frame范围的内容

MAUIFrame圆形头像圆角设置修改时间：2026-06-15 19:30:42