Class SfAvatarView

SfAvatarView is a graphical representation of the user image. You can customize it by adding image, background color, icon, text etc.

Inheritance

System.Object

SfView

SfAvatarView

Implements

IDrawableLayout

Microsoft.Maui.Graphics.IDrawable

Microsoft.Maui.IAbsoluteLayout

Microsoft.Maui.ILayout

Microsoft.Maui.IView

Microsoft.Maui.IElement

Microsoft.Maui.ITransform

Microsoft.Maui.IContainer

System.Collections.Generic.IList<Microsoft.Maui.IView>

System.Collections.Generic.ICollection<Microsoft.Maui.IView>

System.Collections.Generic.IEnumerable<Microsoft.Maui.IView>

System.Collections.IEnumerable

Microsoft.Maui.ISafeAreaView

Microsoft.Maui.IPadding

Microsoft.Maui.IVisualTreeElement

Inherited Members

SfView.OnDraw(ICanvas, RectF)

SfView.MeasureContent(Double, Double)

SfView.ArrangeContent(Rect)

SfView.OnBindingContextChanged()

SfView.MeasureOverride(Double, Double)

SfView.ArrangeOverride(Rect)

SfView.OnMeasure(Double, Double)

SfView.OnHandlerChanged()

SfView.IDrawableLayout.InvalidateDrawable()

SfView.Children

SfView.ClipToBounds

SfView.Padding

SfView.IDrawableLayout.DrawingOrder

Namespace: Syncfusion.Maui.Core

Assembly: Syncfusion.Maui.Core.dll

Syntax

public class SfAvatarView : SfView, IDrawableLayout, IDrawable, IAbsoluteLayout, ILayout, IView, IElement, ITransform, IContainer, IList<IView>, ICollection<IView>, IEnumerable<IView>, IEnumerable, ISafeAreaView, IPadding, IVisualTreeElement

Examples

The following examples show how to initialize the SfAvatarView

• XAML
• C#

 <sfavatar:SfAvatarView AvatarName="Alex"
                        VerticalOptions="Center"
                        HorizontalOptions="Center"   
                        HeightRequest="50"
                        CornerRadius="25"
                        WidthRequest="50" />

Constructors

SfAvatarView()

Initializes a new instance of the SfAvatarView class.

Declaration

public SfAvatarView()

Fields

AvatarCharacterProperty

Identifies the AvatarCharacter bindable property.

Declaration

public static readonly BindableProperty AvatarCharacterProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for AvatarCharacter bindable property.

AvatarColorModeProperty

Identifies the AvatarColorMode bindable property.

Declaration

public static readonly BindableProperty AvatarColorModeProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for AvatarColorMode bindable property.

AvatarNameProperty

Identifies the AvatarName bindable property.

Declaration

public static readonly BindableProperty AvatarNameProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for AvatarName bindable property.

AvatarShapeProperty

Identifies the AvatarShape bindable property.

Declaration

public static readonly BindableProperty AvatarShapeProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for AvatarShape bindable property.

AvatarSizeProperty

Identifies the AvatarSize bindable property.

Declaration

public static readonly BindableProperty AvatarSizeProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for AvatarSize bindable property.

BackgroundColorMemberPathProperty

Identifies the BackgroundColorMemberPath bindable property.

Declaration

public static readonly BindableProperty BackgroundColorMemberPathProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for BackgroundColorMemberPath bindable property.

BackgroundColorProperty

Identifies the BackgroundColor bindable property.

Declaration

public static readonly BindableProperty BackgroundColorProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for BackgroundColor bindable property.

BackgroundProperty

Identifies the Background bindable property.

Declaration

public static readonly BindableProperty BackgroundProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for Background bindable property.

ContentTypeProperty

Identifies the ContentType bindable property.

Declaration

public static readonly BindableProperty ContentTypeProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for ContentType bindable property.

CornerRadiusProperty

Identifies the CornerRadius bindable property.

Declaration

public static readonly BindableProperty CornerRadiusProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for CornerRadius bindable property.

FontAttributesProperty

Identifies the FontAttributes bindable property.

Declaration

public static readonly BindableProperty FontAttributesProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for FontAttributes bindable property.

FontFamilyProperty

Identifies the FontFamily bindable property.

Declaration

public static readonly BindableProperty FontFamilyProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for FontFamily bindable property.

FontSizeProperty

Identifies the FontSize bindable property.

Declaration

public static readonly BindableProperty FontSizeProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for FontSize bindable property.

GroupSourceProperty

Identifies the GroupSource bindable property.

Declaration

public static readonly BindableProperty GroupSourceProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for GroupSource bindable property.

HeightRequestProperty

Identifies the HeightRequest bindable property.

Declaration

public static readonly BindableProperty HeightRequestProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for HeightRequest bindable property.

ImageSourceMemberPathProperty

Identifies the ImageSourceMemberPath bindable property.

Declaration

public static readonly BindableProperty ImageSourceMemberPathProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for ImageSourceMemberPath bindable property.

ImageSourceProperty

Identifies the ImageSource bindable property.

Declaration

public static readonly BindableProperty ImageSourceProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for ImageSource bindable property.

InitialsColorMemberPathProperty

Identifies the InitialsColorMemberPath bindable property.

Declaration

public static readonly BindableProperty InitialsColorMemberPathProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for InitialsColorMemberPath bindable property.

InitialsColorProperty

Identifies the InitialsColor bindable property.

Declaration

public static readonly BindableProperty InitialsColorProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for InitialsColor bindable property.

InitialsMemberPathProperty

Identifies the InitialsMemberPath bindable property.

Declaration

public static readonly BindableProperty InitialsMemberPathProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for InitialsMemberPath bindable property.

InitialsTypeProperty

Identifies the InitialsType bindable property.

Declaration

public static readonly BindableProperty InitialsTypeProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for InitialsType bindable property.

StrokeProperty

Identifies the Stroke bindable property.

Declaration

public static readonly BindableProperty StrokeProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for Stroke bindable property.

StrokeThicknessProperty

Identifies the StrokeThickness bindable property.

Declaration

public static readonly BindableProperty StrokeThicknessProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for StrokeThickness bindable property.

WidthRequestProperty

Identifies the WidthRequest bindable property.

Declaration

public static readonly BindableProperty WidthRequestProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for WidthRequest bindable property.

Properties

AvatarCharacter

Gets or sets the value of the AvatarCharacter, which is shown only when the avatar type is AvatarCharacter. They have vector images in the avatarcharacter types.

Declaration

public AvatarCharacter AvatarCharacter { get; set; }

Property Value

Type	Description
AvatarCharacter

AvatarColorMode

Gets or sets the value for the ColorMode, which consists of three types such as default, dark color, and light color.

Declaration

public AvatarColorMode AvatarColorMode { get; set; }

Property Value

Type	Description
AvatarColorMode	Specifies the avatar color mode for SfAvatarView.The default value is Default.

Examples

The following example shows how to apply the avatar color mode in SfAvatarView.

• XAML
• C#

<avatar:SfAvatarView  AvatarName = "Alex"
                      AvatarColorMode="DarkBackground"
                      VerticalOptions="Center"
                      HorizontalOptions="Center"          
                      WidthRequest="150"
                      HeightRequest="150"
                      CornerRadius="75" />

AvatarName

Gets or sets the value for the avatar name, which displays the text in the SfAvatarView.

Declaration

public string AvatarName { get; set; }

Property Value

Type	Description
System.String	Specifies the avatar name.The default value is string.Empty.

Examples

The following example shows how to apply the avatar name.

• XAML
• C#

<avatar:SfAvatarView 
                      AvatarName="Alex"
                      VerticalOptions="Center"
                      HorizontalOptions="Center"          
                      WidthRequest="150"
                      HeightRequest="150"
                      CornerRadius="75" />

AvatarShape

Gets or sets the value for the AvatarShape which is used for changing the shapes of the avatar views.

Declaration

public AvatarShape AvatarShape { get; set; }

Property Value

Type	Description
AvatarShape	Specifies the avatar shape. The default value is Custom.

Examples

The following example shows how to apply the avatar shape.

• XAML
• C#

<avatar:SfAvatarView  AvatarName="Alex"
                      AvatarShape="Square" 
                      VerticalOptions="Center"
                      HorizontalOptions="Center"          
                      WidthRequest="150"
                      HeightRequest="150"
                      CornerRadius="75" />

AvatarSize

Gets or sets the value for the AvatarSize which is used for changing the size of the avatar views.

Declaration

public AvatarSize AvatarSize { get; set; }

Property Value

Type	Description
AvatarSize	Specifies the avatar size.The default value is null.

Examples

The following example shows how to apply the avatar size.

• XAML
• C#

<avatar:SfAvatarView  AvatarName="Alex"
                      AvatarSize="Medium" 
                      AvatarShape="Square" 
                      VerticalOptions="Center"
                      HorizontalOptions="Center"          
                      WidthRequest="150"
                      HeightRequest="150"
                      CornerRadius="75" />

Background

Gets or sets the value for the background.

Declaration

public Brush Background { get; set; }

Property Value

Type	Description
Microsoft.Maui.Controls.Brush	Specifies the background for SfAvatarView. The default value is null.

Examples

The following example shows how to apply the background.

• XAML
• C#

<avatar:SfAvatarView  Background="Aqua" 
                      AvatarName="Alex"
                      VerticalOptions="Center"
                      HorizontalOptions="Center"          
                      WidthRequest="150"
                      HeightRequest="150"
                      CornerRadius="75" />

BackgroundColor

Gets or sets the value for the background color.

Declaration

public Color BackgroundColor { get; set; }

Property Value

Type	Description
Microsoft.Maui.Graphics.Color	Specifies the background color for SfAvatarView. The default value is null.

Examples

The following example shows how to apply the background color.

• XAML
• C#

<avatar:SfAvatarView  BackgroundColor="Aqua" 
                      AvatarName="Alex"
                      VerticalOptions="Center"
                      HorizontalOptions="Center"          
                      WidthRequest="150"
                      HeightRequest="150"
                      CornerRadius="75" />

BackgroundColorMemberPath

Gets or sets the value for the BackgroundColorMemberPath that shows the background color value when avatar type is set to Group.

Declaration

public string BackgroundColorMemberPath { get; set; }

Property Value

Type	Description
System.String	Specifies the BackgroundColorMemberPath. The default value is string.Empty.

Examples

The following example shows how to apply the backgroundcolor member path.

• XAML
• C#

<avatar:SfAvatarView  ContentType="Group" 
                      GroupSource="{Binding CollectionImage}" 
                      BackgroundColorMemberPath="Colors"
                      VerticalOptions="Center"
                      HorizontalOptions="Center"          
                      WidthRequest="150"
                      HeightRequest="150"
                      CornerRadius="75" />

ContentType

Gets or sets the value for the Avatar type. The types are initials, group, custom, and avatarcharacter.

Declaration

public ContentType ContentType { get; set; }

Property Value

Type	Description
ContentType	Specifies the content type.

Examples

The following example shows how to apply the content type for a SfAvatarView.

• XAML
• C#

<avatar:SfAvatarView  ContentType="Custom"
                      ImageSource="dotnet_bot.png"
                      VerticalOptions="Center"
                      HorizontalOptions="Center"          
                      WidthRequest="150"
                      HeightRequest="150"
                      CornerRadius="75" />

CornerRadius

Gets or sets the value for corner radius.

Declaration

public CornerRadius CornerRadius { get; set; }

Property Value

Type	Description
Microsoft.Maui.CornerRadius	Specifies the corner radius.The default value is cornerradius(0).

Examples

The following example shows how to apply the corner radius.

• XAML
• C#

<avatar:SfAvatarView  AvatarName = "Alex"
                      VerticalOptions="Center"
                      HorizontalOptions="Center"          
                      WidthRequest="150"
                      HeightRequest="150"
                      CornerRadius="75" />

FontAttributes

Gets or sets the FontAttributes for the initials when the ContentType is Initials.

Declaration

public FontAttributes FontAttributes { get; set; }

Property Value

Type	Description
Microsoft.Maui.Controls.FontAttributes	Specifies the font attributes.The default value is null.

Examples

The following example shows how to apply the FontAttributes.

• XAML
• C#

<avatar:SfAvatarView  AvatarName="Alex"
                      FontAttributes="Bold"
                      VerticalOptions="Center"
                      HorizontalOptions="Center"          
                      WidthRequest="150"
                      HeightRequest="150"
                      CornerRadius="75" />

FontFamily

Gets or sets the FontFamily for the initials when the ContentType is Initials.

Declaration

public string FontFamily { get; set; }

Property Value

Type	Description
System.String	Specifies the font family.The default value is null.

Examples

The following example shows how to apply the fontfamily.

• XAML
• C#

<avatar:SfAvatarView  AvatarName="Alex"
                      FontFamily="OpenSansRegular"
                      VerticalOptions="Center"
                      HorizontalOptions="Center"          
                      WidthRequest="150"
                      HeightRequest="150"
                      CornerRadius="75" />

FontSize

Gets or sets the size of the font for the initials string.

Declaration

public double FontSize { get; set; }

Property Value

Type	Description
System.Double	Specifies the font size.The default value is 18d.

Examples

The following example shows how to apply the font size.

• XAML
• C#

<avatar:SfAvatarView  AvatarName="Alex"
                      FontSize="18" 
                      VerticalOptions="Center"
                      HorizontalOptions="Center"          
                      WidthRequest="150"
                      HeightRequest="150"
                      CornerRadius="75" />

GroupSource

Gets or sets the value for the GroupSource used for setting more than one image/text, and this is shown only when avatar type is set to Group.

Declaration

public IEnumerable GroupSource { get; set; }

Property Value

Type	Description
System.Collections.IEnumerable	Specifies the GroupSource for SfAvatarView. The default value is null.

Examples

The following example shows how to apply the group source.

• XAML
• C#

<avatar:SfAvatarView  
                      ContentType="Group" 
                      GroupSource="{Binding CollectionImage}"  
                      VerticalOptions="Center"
                      HorizontalOptions="Center"          
                      WidthRequest="150"
                      HeightRequest="150"
                      CornerRadius="75" />

HeightRequest

Gets or sets the HeightRequest of the control.

Declaration

public double HeightRequest { get; set; }

Property Value

Type	Description
System.Double	Specifies the height request for SfAvatarView.The default value is 0d.

Examples

The following example shows how to apply the height request.

• XAML
• C#

<avatar:SfAvatarView 
                      AvatarName="Alex"
                      VerticalOptions="Center"
                      HorizontalOptions="Center"          
                      WidthRequest="150"
                      HeightRequest="150"
                      CornerRadius="75" />

ImageSource

Gets or sets the ImageSource for displaying a custom image when ContentType is set to Custom.

Declaration

public ImageSource ImageSource { get; set; }

Property Value

Type	Description
Microsoft.Maui.Controls.ImageSource	Specifies the custom ImageSource.The default value is null.

Examples

The following example shows how to apply the image.

• XAML
• C#

<avatar:SfAvatarView  ContentType="Custom"
                      ImageSource="dotnet_bot.png"
                      VerticalOptions="Center"
                      HorizontalOptions="Center"          
                      WidthRequest="150"
                      HeightRequest="150"
                      CornerRadius="75" />

ImageSourceMemberPath

Gets or sets the value for the ImageSourceMemberPath that shows the image value when avatar type is set to Group.

Declaration

public string ImageSourceMemberPath { get; set; }

Property Value

Type	Description
System.String	Specifies the ImageSourceMemberPath for SfAvatarView.The default value is string.Empty.

Examples

The following example shows how to apply the imagesource member path.

• XAML
• C#

<avatar:SfAvatarView  ContentType="Group" 
                      GroupSource="{Binding CollectionImage}" 
                      ImageSourceMemberPath="ImageSource"  
                      VerticalOptions="Center"
                      HorizontalOptions="Center"          
                      WidthRequest="150"
                      HeightRequest="150"
                      CornerRadius="75" />

InitialsColor

Gets or sets the color which defines the color for the initials string.

Declaration

public Color InitialsColor { get; set; }

Property Value

Type	Description
Microsoft.Maui.Graphics.Color	Specifies the Initial Color.The default value is Microsoft.Maui.Graphics.Colors.Black

Examples

The following example shows how to apply the initial color for SfAvatarView.

• XAML
• C#

<avatar:SfAvatarView  AvatarName="Alex"
                      InitialsColor="Red"
                      VerticalOptions="Center"
                      HorizontalOptions="Center"          
                      WidthRequest="150"
                      HeightRequest="150"
                      CornerRadius="75" />

InitialsColorMemberPath

Gets or sets the value for the InitialsColorMemberPath that shows the initials color value when avatar type is set to Group.

Declaration

public string InitialsColorMemberPath { get; set; }

Property Value

Type	Description
System.String	Specifies the avatar color mode.The default value is string.Empty

Examples

The following example shows how to apply the avatar color mode.

• XAML
• C#

<avatar:SfAvatarView  AvatarName = "Alex"
                      InitialsColorMemberPath="Colors" 
                      AvatarColorMode="DarkBackground"
                      VerticalOptions="Center"
                      HorizontalOptions="Center"          
                      WidthRequest="150"
                      HeightRequest="150"
                      CornerRadius="75" />

InitialsMemberPath

Gets or sets the value for the InitialsMemberPath that shows the initials value when avatar type is set to Group.

Declaration

public string InitialsMemberPath { get; set; }

Property Value

Type	Description
System.String	Specifies the initialmemberpath.The default value is string.Empty.

Examples

The following example shows how to apply the initial member path.

• XAML
• C#

<avatar:SfAvatarView  ContentType="Group"
                      InitialsMemberPath="Name"
                      GroupSource="{Binding PeopleCollection}"
                      VerticalOptions="Center"
                      HorizontalOptions="Center"          
                      WidthRequest="150"
                      HeightRequest="150"
                      CornerRadius="75" />

InitialsType

Gets or sets the value for the initial type.

Declaration

public InitialsType InitialsType { get; set; }

Property Value

Type	Description
InitialsType	Specifies the initial type for SfAvatarView.The default value is SingleCharacter.

Examples

The following example shows how to apply the initial type.

• XAML
• C#

<avatar:SfAvatarView  InitialsType="SingleCharacter"
                      AvatarName="Alex"
                      VerticalOptions="Center"
                      HorizontalOptions="Center"          
                      WidthRequest="150"
                      HeightRequest="150"
                      CornerRadius="75" />

Stroke

Gets or sets the value of Stroke of the control.This property can be used to change the color of stroke.

Declaration

public Brush Stroke { get; set; }

Property Value

Type	Description
Microsoft.Maui.Controls.Brush	Specifies the stroke.The default value is Microsoft.Maui.Graphics.Colors.Black.

Examples

The following example shows how to apply the stroke for a SfAvatarView.

• XAML
• C#

<avatar:SfAvatarView  AvatarName="Alex"
                      Stroke="Red"
                      VerticalOptions="Center"
                      HorizontalOptions="Center"          
                      WidthRequest="150"
                      HeightRequest="150"
                      CornerRadius="75" />

StrokeThickness

Gets or sets the value of StrokeThickness of the control.This property can be used to customize the thickness of stroke.

Declaration

public double StrokeThickness { get; set; }

Property Value

Type	Description
System.Double	Specifies the stroke thickness.The default value is 2d.

Examples

The following example shows how to apply the stroke thickness for a SfAvatarView.

• XAML
• C#

<avatar:SfAvatarView  AvatarName="Alex"
                      StrokeThickness="10"
                      VerticalOptions="Center"
                      HorizontalOptions="Center"          
                      WidthRequest="150"
                      HeightRequest="150"
                      CornerRadius="75" />

WidthRequest

Gets or sets the WidthRequest of the control.

Declaration

public double WidthRequest { get; set; }

Property Value

Type	Description
System.Double	Specifies the width request. The default value is 0d.

Examples

The following example shows how to apply the width request.

• XAML
• C#

<avatar:SfAvatarView 
                      AvatarName="Alex"
                      VerticalOptions="Center"
                      HorizontalOptions="Center"          
                      WidthRequest="150"
                      HeightRequest="150"
                      CornerRadius="75" />

Implements

IDrawableLayout

Microsoft.Maui.Graphics.IDrawable

Microsoft.Maui.IAbsoluteLayout

Microsoft.Maui.ILayout

Microsoft.Maui.IView

Microsoft.Maui.IElement

Microsoft.Maui.ITransform

Microsoft.Maui.IContainer

System.Collections.Generic.IList<>

System.Collections.Generic.ICollection<>

System.Collections.Generic.IEnumerable<>

System.Collections.IEnumerable

Microsoft.Maui.ISafeAreaView

Microsoft.Maui.IPadding

Microsoft.Maui.IVisualTreeElement