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

Question

在我的 .NET MAUI 应用程序中，我使用 .NET MAUI 社区工具包中的 AvatarView 创建一个漂亮的圆形用户头像，这很容易做到。

我现在想在图像周围放置一个漂亮的边框，但我没有得到想要的效果，因为当我设置 AvatarView 的 BorderWidth 属性时，它会放置图像“内部”的边框使可见区域变小。我实际上想把边框放在图像“外面”，这样我就不会丢失可见区域的任何东西。这是一张演示这一点的图片:

顺便说一句，我尝试将 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

如果您不想使用社区工具包，那么用 Frame 包装 image 将是这种情况下的权衡。您还需要将图像的 Aspect 设置为 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>