This article explains how to customize the space between the stroke and image or avatar in .NET MAUI AvatarView. This can be achieved by adjusting the WidthRequest, HeightRequest, and CornerRadius properties of the Border control that wraps the Avatar View. Below is an example of how to implement this in your application.

XAML

<StackLayout Spacing="5">
    <Label Text="Circle Shape Avatar:" HorizontalOptions="Center"/>
    <Border x:Name="circleBorder" WidthRequest="80" HeightRequest="80"
            Stroke="Black" StrokeThickness="2">
        <Border.StrokeShape>
            <RoundRectangle x:Name="circleRadius" CornerRadius="40"/>
        </Border.StrokeShape>
        <core:SfAvatarView ContentType="AvatarCharacter" AvatarShape="Circle"/>
    </Border>
    ...
</StackLayout>

Output

Requirements to run the demo

To run the demo, refer to System Requirements for .NET MAUI

Troubleshooting:

Path too long exception

If you are facing path too long exception when building this example project, close Visual Studio and rename the repository to short and build the project.