Class SfAvatarView
SfAvatarView is a graphical representation of the user image. You can customize it by adding image, background color, icon, text etc.
Implements
Inherited Members
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, ICrossPlatformLayout, IVisualTreeElement, ISemanticsProvider, IParentThemeElement, IThemeElement
Examples
The following examples show how to initialize the SfAvatarView
<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
AspectProperty
Identifies the Aspect bindable property.
Declaration
public static readonly BindableProperty AspectProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for Aspect bindable property. |
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. |
ContentPaddingProperty
Identifies the ContentPadding bindable property.
Declaration
public static readonly BindableProperty ContentPaddingProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for ContentPadding 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. |
FontAutoScalingEnabledProperty
Identifies the FontAutoScalingEnabled bindable property.
Declaration
public static readonly BindableProperty FontAutoScalingEnabledProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for FontAutoScalingEnabled 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
Aspect
Gets or sets the scaling behavior of an image within the view.
Declaration
public Aspect Aspect { get; set; }
Property Value
Type |
---|
Microsoft.Maui.Aspect |
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 |
---|
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.
<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.
<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.
<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.
<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.
<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.
<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.
<avatar:SfAvatarView ContentType="Group"
GroupSource="{Binding CollectionImage}"
BackgroundColorMemberPath="Colors"
VerticalOptions="Center"
HorizontalOptions="Center"
WidthRequest="150"
HeightRequest="150"
CornerRadius="75" />
ContentPadding
Gets or sets the space between the stroke and content in SfAvatarView.
Declaration
public double ContentPadding { get; set; }
Property Value
Type |
---|
System.Double |
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.
<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.
<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.
<avatar:SfAvatarView AvatarName="Alex"
FontAttributes="Bold"
VerticalOptions="Center"
HorizontalOptions="Center"
WidthRequest="150"
HeightRequest="150"
CornerRadius="75" />
FontAutoScalingEnabled
Gets or sets a value that Determines whether or not the font of the control should scale automatically according to the operating system settings.
Declaration
public bool FontAutoScalingEnabled { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | It accepts Boolean values, and the default values is false. |
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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<avatar:SfAvatarView
AvatarName="Alex"
VerticalOptions="Center"
HorizontalOptions="Center"
WidthRequest="150"
HeightRequest="150"
CornerRadius="75" />