Edit

Xamarin Community Toolkit AvatarView

  • Article

The AvatarView control allows the user to display an avatar or the user's initials if no avatar is available. By binding the Source property the user can assign an image to the AvatarView. Simultaneously binding the Text property will allow the user to also set the initials to be shown if no valid image is provided.

Syntax

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             x:Class="MyLittleApp.MainPage">

     <StackLayout>

        <xct:AvatarView Text="{Binding Initials}" Source="{Binding AvatarSource}" />

    </StackLayout>

</ContentPage>

Properties

Property Type Description
BorderColor Color Gets or sets the border color for the AvatarView.
Color Color Gets or sets the color that will fill the background of the AvatarView.
CornerRadius double Gets or sets the corner radius of the AvatarView.
FontAttributes FontAttributes Gets a value that indicates whether the font for the text is bold, italic, or neither.
FontFamily string Gets the font family to which the font for the text belongs.
FontSize double Gets the size of the font for the text.
Size double Gets or sets the desired height and width of the AvatarView.
Source ImageSource Gets or sets the source of the image. This is a bindable property.
Text string Gets or sets the text for the label. This is a bindable property.
TextColor Color Gets or sets the Color for the text of the label. This is a bindable property.

Sample

AvatarView sample page Source

You can see this in action in the Xamarin Community Toolkit Sample App.

API