Class SfAvatarView

SfAvatarView is a graphical representation of the user image that allows you to customize the view by adding an image, background color, icon, text, etc.

Inheritance

System.Object

SfAvatarView

Namespace: Syncfusion.UI.Xaml.Core

Assembly: Syncfusion.Core.WinUI.dll

Syntax

public class SfAvatarView : Control

Examples

This example illustrates how to set the SfAvatarView.

<Syncfusion:SfAvatarView AvatarSize="Large" ContentType="AvatarCharacter" AvatarCharacter="Avatar10"/>

SfAvatarView avatarView = new SfAvatarView();
avatarView.ContentType = AvatarContentType.AvatarCharacter;
avatarView.AvatarCharacter = AvatarCharacter.Avatar10;
avatarView.AvatarSize = AvatarSize.Large;

Constructors

SfAvatarView()

Initializes a new instance of the SfAvatarView class.

Declaration

public SfAvatarView()

Fields

AvatarCharacterProperty

Identifies the AvatarCharacter dependency property.

Declaration

public static readonly DependencyProperty AvatarCharacterProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

AvatarNameProperty

Identifies the AvatarName dependency property.

Declaration

public static readonly DependencyProperty AvatarNameProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

AvatarShapeProperty

Identifies the AvatarShape dependency property.

Declaration

public static readonly DependencyProperty AvatarShapeProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

AvatarSizeProperty

Identifies the AvatarSize dependency property.

Declaration

public static readonly DependencyProperty AvatarSizeProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

BackgroundColorMemberPathProperty

Identifies the BackgroundColorMemberPath dependency property.

Declaration

public static readonly DependencyProperty BackgroundColorMemberPathProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

ContentMemberPathProperty

Identifies the ContentMemberPath dependency property.

Declaration

public static readonly DependencyProperty ContentMemberPathProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

ContentProperty

Identifies the Content dependency property.

Declaration

public static readonly DependencyProperty ContentProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

ContentTemplateProperty

Identifies the ContentTemplate dependency property.

Declaration

public static readonly DependencyProperty ContentTemplateProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

ContentTypeProperty

Identifies the ContentType dependency property.

Declaration

public static readonly DependencyProperty ContentTypeProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

CornerRadiusProperty

Identifies the CornerRadius dependency property.

Declaration

public static readonly DependencyProperty CornerRadiusProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

FontSizeProperty

Identifies the FontSize dependency property.

Declaration

public static readonly DependencyProperty FontSizeProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

GroupSourceProperty

Identifies the GroupSource dependency property.

Declaration

public static readonly DependencyProperty GroupSourceProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

HeightProperty

Identifies the Height dependency property.

Declaration

public static readonly DependencyProperty HeightProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

ImageSourceMemberPathProperty

Identifies the ImageSourceMemberPath dependency property.

Declaration

public static readonly DependencyProperty ImageSourceMemberPathProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

ImageSourceProperty

Identifies the ImageSource dependency property.

Declaration

public static readonly DependencyProperty ImageSourceProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

InitialsColorMemberPathProperty

Identifies the InitialsColorMemberPath dependency property.

Declaration

public static readonly DependencyProperty InitialsColorMemberPathProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

InitialsMemberPathProperty

Identifies the InitialsMemberPath dependency property.

Declaration

public static readonly DependencyProperty InitialsMemberPathProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

InitialsTypeProperty

Identifies the InitialsType dependency property.

Declaration

public static readonly DependencyProperty InitialsTypeProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

WidthProperty

Identifies the Width dependency property.

Declaration

public static readonly DependencyProperty WidthProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

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 avatar character types.

Declaration

public AvatarCharacter AvatarCharacter { get; set; }

Property Value

Type	Description
AvatarCharacter	System.Enum Enum specifies the default avatar character images that can be displayed in the SfAvatarView control. The default value is Avatar1.

Remarks

If the ContentType property is not set to AvatarCharacter, the AvatarCharacter property will have no impact on the appearance of the control.

Examples

The following example shows how to provide an AvatarCharacter in SfAvatarView.

<Syncfusion:SfAvatarView ContentType="AvatarCharacter" 
                         AvatarCharacter="Avatar10">
</Syncfusion:SfAvatarView>

SfAvatarView avatarView = new SfAvatarView();
avatarView.ContentType = AvatarContentType.AvatarCharacter;
avatarView.AvatarCharacter = AvatarCharacter.Avatar10;
avatarView.AvatarSize = AvatarSize.Large;

AvatarName

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

Declaration

public string AvatarName { get; set; }

Property Value

Type	Description
System.String	System.String Text for displaying initials in the SfAvatarView. The default value is `String.Empty`.

Remarks

If ContentType is set to Default or Initials and AvatarName is provided, the control will display the avatar with initials.

AvatarShape

Gets or sets the shape for avatar.

Declaration

public AvatarShape AvatarShape { get; set; }

Property Value

Type	Description
AvatarShape	System.Enum Enum to specifies the shape of the SfAvatarView. The default value is Circle.

Remarks

If the value of the AvatarShape property is set to Custom, the AvatarSize property has no impact on the appearance of the SfAvatarView control. Instead, the control's appearance can be customized using properties such as Height, Width, FontSize, and CornerRadius.

AvatarSize

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

Declaration

public AvatarSize AvatarSize { get; set; }

Property Value

Type	Description
AvatarSize	System.Enum Enum to specifies the size of the SfAvatarView. The default value is Small.

Remarks

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	System.String Property name to access background color for group members. The default value is `String.Empty`.

Remarks

When the GroupSource property is not set, the appearance of the control is not affected by the BackgroundColorMemberPath property.

Content

Gets or sets the IconElement for the avatar view.

Declaration

public object Content { get; set; }

Property Value

Type
System.Object

ContentMemberPath

Gets or sets the value for the ContentMemberPath that shows a custom content when avatar type is set to Group.

Declaration

public string ContentMemberPath { get; set; }

Property Value

Type	Description
System.String	System.String Property name to access custom content for group members. The default value is `String.Empty`.

Remarks

If the GroupSource property is not set, the ContentMemberPath property will not have any effect on the appearance of the SfAvatarView. However, if both the ContentMemberPath and ImageSourceMemberPath properties are set, the control will prioritize ContentMemberPath and display the specified image.

ContentTemplate

Gets or sets the data template that is used to display the content of the ContentControl.

Declaration

public DataTemplate ContentTemplate { get; set; }

Property Value

Type
Microsoft.UI.Xaml.DataTemplate

ContentType

Gets or sets the value for the avatar content type. The types are initials, group, custom, and avatar character.

Declaration

public AvatarContentType ContentType { get; set; }

Property Value

Type	Description
AvatarContentType	System.Enum Enum specifies the type of content that should be displayed in the SfAvatarView. The default value is Default.

Remarks

If the ContentType is set to Default, the precedence to display the properties provided will be given to the following order: GroupSource, ImageSource, and AvatarName.

Examples

The following example shows how to provide an ContentType in SfAvatarView.

<Syncfusion:SfAvatarView ContentType="Initials" 
                         AvatarName="Name">
</Syncfusion:SfAvatarView>

SfAvatarView avatarView = new SfAvatarView();
avatarView.ContentType = AvatarContentType.Initials;
avatarView.AvatarName = "Name";

CornerRadius

Gets or sets the corner radius of the avatar.

Declaration

public CornerRadius CornerRadius { get; set; }

Property Value

Type	Description
Microsoft.UI.Xaml.CornerRadius	CornerRadius CornerRadius to describe the degree to which corners are rounded. The default value is `0`.

Remarks

The CornerRadius property is only effective when the value of the AvatarShape property is set to Custom.

Type	Description
System.Double	System.Double Size for the text in the SfAvatarView. The default value is `18`.

GroupSource

Gets or sets the ItemsSource for the avatar group view when the ContentType is set to Group.

Declaration

public IEnumerable GroupSource { get; set; }

Property Value

Type	Description
System.Collections.IEnumerable	System.Collections.IEnumerable ItemSource for displaying members in the group. The default value is `null`.

Examples

The following example shows how to provide an GroupSource in SfAvatarView.

<Syncfusion:SfAvatarView ContentType="Group" 
                         AvatarShape="Custom" 
                         Height="100" 
                         Width="100" 
                         InitialsMemberPath="Name" 
                         BackgroundColorMemberPath="Colors" 
                         ImageSourceMemberPath="ImageSource" 
                         InitialsColorMemberPath="InitialsColor" 
                         GroupSource="{Binding CollectionImage}">
</Syncfusion:SfAvatarView>

public class Employee
{
    private string name;
    public string Name
    {
        get { return name; }
        set { name = value; }
    }
    private string imagesource;
    public string ImageSource
    {
        get { return imagesource; }
        set { imagesource = value; }
    }
    private Color colors;
    public Color Colors
    {
        get { return colors; }
        set { colors = value; }
    }
    private Color initialColors;
    public Color InitialColors
    {
        get { return initialColors; }
        set { initialColors = value; }
    }
}
public class EmployeeViewModel
{
   private ObservableCollection<Employee> collectionimage;
   public ObservableCollection<Employee> CollectionImage
   {
       get { return collectionimage; }
       set { collectionimage = value; }
   }

   public EmployeeViewModel()
   {
       CollectionImage = new ObservableCollection<Employee>();
       CollectionImage.Add(new Employee { Name = "Alex", ImageSource = "alex.png", Colors = Color.Bisque, InitialColors = Color.CadetBlue });
       CollectionImage.Add(new Employee { Name = "Ellanaa", ImageSource = "ellanaa.png", Colors = Color.LightCoral, InitialColors = Color.CadetBlue });
       CollectionImage.Add(new Employee { Name = "Martin", ImageSource = "martin.png", Colors = Color.LightSalmon, InitialColors = Color.Black });
   }
}

For displaying the group source avatar, the System.Collections.IEnumerable collection's objects must have matching properties as specified in the InitialsMemberPath, ImageSourceMemberPath, BackgroundColorMemberPath, and InitialsColorMemberPath properties. If ContentType is set to Default and properties like ImageSource, AvatarName, and GroupSource are set, then GroupSource property will take precedence.

Height

Gets or sets the height of the avatar.

Declaration

public double Height { get; set; }

Property Value

Type	Description
System.Double	System.Double Height for the SfAvatarView in pixels. The default value is `0`.

Remarks

The Height property is only effective when the value of the AvatarShape property is set to Custom.

ImageSource

Gets or sets the custom image for avatar.

Declaration

public ImageSource ImageSource { get; set; }

Property Value

Type	Description
Microsoft.UI.Xaml.Media.ImageSource	ImageSource Specifies the source of image to be displayed in the SfAvatarView. The default value is `null`.

Remarks

When the ContentType property is set to Default and both the ImageSource and the AvatarName properties are set, the ImageSource property takes precedence over the AvatarName property.

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	System.String Property name to access image sources for group members. The default value is `String.Empty`.

Remarks

If the GroupSource property is not set, the ImageSourceMemberPath property will not have any effect on the appearance of the SfAvatarView. However, if both the ImageSourceMemberPath and InitialsMemberPath properties are set, the control will prioritize ImageSourceMemberPath and display the specified image.

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	System.String Property name to access initials color for group members. The default value is `String.Empty`.

Remarks

When the GroupSource and InitialsMemberPath properties are not set, the appearance of the control is not affected by the InitialsColorMemberPath property.

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	System.String Property name to access initials for group members. The default value is `String.Empty`.

Remarks

If the GroupSource property is not set, the InitialsMemberPath property has no effect on the appearance of the control. When both ImageSourceMemberPath and InitialsMemberPath properties are set, the control will prioritize ImageSourceMemberPath and display the image specified by it. However, if ImageSourceMemberPath is not set, the control will display the initials specified by InitialsMemberPath instead.

InitialsType

Gets or sets the value for the initial type of avatar.

Declaration

public AvatarInitialsType InitialsType { get; set; }

Property Value

Type	Description
AvatarInitialsType	System.Enum Enum to specifies the number of characters in initials to be displayed in the SfAvatarView. The default value is SingleCharacter.

Remarks

When the value of the InitialsType property is set to DoubleCharacter but the value of the AvatarName property is a single character, only one character will be displayed in the SfAvatarView control for initials.

Examples

The following example shows how to provide an InitialsType in SfAvatarView.

<Syncfusion:SfAvatarView ContentType="Initials" 
                         AvatarName="Name" 
                         InitialsType="DoubleCharacter">
</Syncfusion:SfAvatarView>

SfAvatarView avatarView = new SfAvatarView();
avatarView.ContentType = AvatarContentType.Initials;
avatarView.InitialsType = AvatarInitialsType.DoubleCharacter;
avatarView.AvatarName = "Name";

Width

Gets or sets the width of the avatar.

Declaration

public double Width { get; set; }

Property Value

Type	Description
System.Double	System.Double Width for the SfAvatarView in pixels. The default value is `0`.

Remarks

The Width property is only effective when the value of the AvatarShape property is set to Custom.

Methods

OnApplyTemplate()

Builds the visual tree for the SfAvatarView.

Declaration

protected override void OnApplyTemplate()