在 .NET MAUI 中创建围绕用户头像的圆形边框

Question

在我的 .NET MAUI 应用程序中，我使用AvatarViewin.NET MAUI Community Toolkit 创建一个漂亮的圆形用户头像，这非常容易做到。

我现在想在图像周围放置一个漂亮的边框，但没有得到所需的效果，因为当我设置BorderWidth的属性时AvatarView，它将边框放置在图像“内部”，这使得可见区域更小。我实际上想将边框放在图像“外部”，这样我就不会丢失可见区域中的任何内容。这是演示这一点的图像：

顺便说一句，我尝试设置HeightRequest和WidthRequst更大，然后设置 ，BorderWidth但它似乎仍然使可见区域变小，因为所做的只是使主图像变大，并且设置了边框，可见区域仍然不显示附加的数据/区域。

这是我当前的代码，它将边框放置在图像中——我可以放心地假设这是标准行为。

<mct:AvatarView
     ImageSource="{Binding UserInfo.AvatarUrl}"
     BorderColor="{StaticResource UILightGray}"
     BorderWidth="10"
     CornerRadius="70"
     HeightRequest="140"
     WidthRequest="140"/>

我怎样才能达到我想要的效果？基本上，我希望边框位于图像之外，从而有效地向图像大小添加大约 10 个像素。

或者，我不介意将边框放置在图像内，但我需要一种方法使实际图像小 10 像素，以便可见区域保持不变。

如何通过使用或不使用 .NET MAUI Community Toolkit 来实现此目的？

Answer 1

如果您不想使用社区工具包包，那么用 aimage包装Frame将是这种情况下的权衡。并且您还需要将图像的长宽比AspectFit设置为。

            <Frame HeightRequest="140"
                   WidthRequest="140"
                   CornerRadius="70"
                   HorizontalOptions="Center"
                   IsClippedToBounds="True"
                   Padding="0"
                   BorderColor="Gray"
                   Margin="0,0,0,0">

                <Image
                    Aspect="AspectFit"
                    Source="dotnet_bot.png"
                    SemanticProperties.Description="Cute dot net bot waving hi to you!"
                    HeightRequest="140"
                    WidthRequest="140"
                    VerticalOptions="Center"
                    HorizontalOptions="Center" />
            </Frame>

更新：

您也可以按照史蒂夫的建议包裹边框。

      <Border HeightRequest="160" 
                    WidthRequest="160"
                    StrokeShape="RoundRectangle 80,80,80,80"
                    HorizontalOptions="Center"
                    
                    StrokeThickness="8"
                    Margin="0,0,0,0">

                <Image
                    Aspect="AspectFit"
                    Source="dotnet_bot.png"
                    SemanticProperties.Description="Cute dot net bot waving hi to you!"
                  
                    HeightRequest="160"
                    WidthRequest="160"
                    VerticalOptions="Center"
                    HorizontalOptions="Center" />
            </Border>