.NET MAUI中如何为用户头像添加外部圆形边框？

方案1：调整AvatarView参数，保留内部边框且不损失可见区域 #

如果想继续使用AvatarView的自带边框，但保证头像可见区域不变，需要调整尺寸参数，让边框占用额外扩展的空间，而非覆盖原头像区域：

原代码中HeightRequest=140和WidthRequest=140是包含边框的总尺寸，导致边框挤压了头像的显示空间。我们需要把总尺寸设为目标可见头像尺寸 + 2×边框宽度，同时对应调整CornerRadius：

<mct:AvatarView
     ImageSource="{Binding UserInfo.AvatarUrl}"
     BorderColor="{StaticResource UILightGray}"
     BorderWidth="10"
     CornerRadius="80" <!-- (140 + 2*10)/2 = 80 -->
     HeightRequest="160" <!-- 140 + 2*10 -->
     WidthRequest="160"/>

设置后，头像的可见区域仍为140×140，边框在内部的额外空间中，不会遮挡头像内容。

方案2：用外层容器实现外部边框（推荐） #

如果希望边框完全在头像外部，让整体尺寸增加，最直接的方式是把AvatarView嵌套在带边框的容器（如Frame）中，由容器负责绘制外部边框：

使用Frame的实现： #

<Frame
     BorderColor="{StaticResource UILightGray}"
     BorderWidth="10"
     CornerRadius="70"
     HeightRequest="160" <!-- 140 + 2*10 -->
     WidthRequest="160"
     Padding="0">
    <mct:AvatarView
         ImageSource="{Binding UserInfo.AvatarUrl}"
         CornerRadius="70"
         HeightRequest="140"
         WidthRequest="140"/>
</Frame>

不依赖Community Toolkit的替代方案 #

如果不想使用Community Toolkit，直接用Image配合Frame也能实现相同效果：

<Frame
     BorderColor="{StaticResource UILightGray}"
     BorderWidth="10"
     CornerRadius="70"
     HeightRequest="160"
     WidthRequest="160"
     Padding="0">
    <Image
         Source="{Binding UserInfo.AvatarUrl}"
         Aspect="AspectFill"
         HeightRequest="140"
         WidthRequest="140">
        <Image.Clip>
            <EllipseGeometry
                 Center="70,70"
                 RadiusX="70"
                 RadiusY="70"/>
        </Image.Clip>
    </Image>
</Frame>

这种方式下，边框完全在头像外部，整体尺寸从140变为160（两侧各增加10像素边框），头像的可见区域完全不受影响。

内容的提问来源于stack exchange，提问作者Sam