Skip to content

DOCINFRA-2341_merged_using_automation #3304

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
May 22, 2025
Merged

DOCINFRA-2341_merged_using_automation #3304

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
0edb822
Reviewed UG content for Avatar View, Badge View and Busy Indicator co…
snehakPV May 19, 2025
c6249b7
Reviewed the UG content
snehakPV May 20, 2025
dae4d36
Updated the UG content
snehakPV May 20, 2025
0ec3449
Addressed the feedback
snehakPV May 21, 2025
a26f77c
Updated the content
snehakPV May 22, 2025
8ce546b
updated reviewed content
snehakPV May 22, 2025
f78b17c
Merge pull request #3292 from syncfusion-content/958396-Update-UG-con…
naveenkumar-sanjeevirayan May 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 37 additions & 39 deletions MAUI/Avatar-view/Content-type.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,32 @@
---
layout: post
title: Various customization in Syncfusion® AvatarView control.
description: Learn what are the types in AvatarType and how to set value for the Avatartype in .NET MAUI AvatarView.
platform: maui
title: Various Customizations in Syncfusion® Avatar View control.
description: Learn about avatar types and how to set values for avatar types in .NET MAUI Avatar View.
platform: MAUI
control: SfAvatarView
documentation: ug
documentation: UG
---

# Content Types in SfAvatarView

## Avatar Types
## Avatar types

The [SfAvatarView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html?tabs=tabid-1) control allows you to display the view in five different ways:

* [Default](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ContentType.html#Syncfusion_Maui_Core_ContentType_Default) - Displays the default image when initializing without any other source such as image and group.

* [Initials](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ContentType.html#Syncfusion_Maui_Core_ContentType_Initials) - Displays the initial in the view.
* [Initials](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ContentType.html#Syncfusion_Maui_Core_ContentType_Initials) - Displays the initials in the view.

* [AvatarCharacter](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ContentType.html#Syncfusion_Maui_Core_ContentType_AvatarCharacter) - Displays the default image in the view.
* [AvatarCharacter](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ContentType.html#Syncfusion_Maui_Core_ContentType_AvatarCharacter) - Displays a preset vector image in the view.

* [Custom](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ContentType.html#Syncfusion_Maui_Core_ContentType_Custom) - Displays a custom image in the view.

* [Group](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ContentType.html#Syncfusion_Maui_Core_ContentType_Group) - Displays a maximum of three images or initials in a single view.
* [Group](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ContentType.html#Syncfusion_Maui_Core_ContentType_Group) - Displays up to three images or initials in a single view.


## Default

Default type avatar view is used for displaying the default vector image when initializing without the initials, custom, or group view types.
The default type Avatar View is used to display the default vector image when initializing without specifying initials, custom, or group view types.

{% tabs %}

Expand Down Expand Up @@ -69,24 +69,24 @@ this.Content = mainGrid;

## Initials

When using the [ContentType](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_ContentType) as initials, you need to set the initial character using the following properties:
When using [ContentType](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_ContentType) as initials, set the initial character using the following properties:

* [InitialsType](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_InitialsType) - Defines the type of characters to be displayed.
* [AvatarName](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_AvatarName)- Gets or sets the value for the initials type, which displays the text in the avatar view.
* [InitialsColor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_InitialsColor)- Gets or sets the color of the initial color value that defines color for the initial string.
* [InitialsColor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_InitialsColor)- Gets or sets the color of the initials.

### InitialsType

The [InitialsType](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_InitialsType) contains the following two types:
The [InitialsType](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_InitialsType) includes the following types:

* SingleCharacter
* DoubleCharacter

You must set the [AvatarName](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_AvatarName) string property for displaying the initial value in the AvatarView.
Set the [AvatarName](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_AvatarName) property to display initials in the Avatar View. This property accepts a `string` value.

#### SingleCharacter

The `SingleCharacter` is used for displaying the first character in the string you have set in the [InitialsType](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_InitialsType) property.
The `SingleCharacter` type displays the first character of the [AvatarName](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_AvatarName) specified in the [InitialsType](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_InitialsType) property.

{% tabs %}
{% highlight xaml %}
Expand Down Expand Up @@ -133,7 +133,7 @@ this.Content = mainGrid;

### DoubleCharacter

The `DoubleCharacter` is used for displaying a two-characters text you have set in the [InitialsType](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_InitialsType) property. If the initials contain one word, it shows the first and last letters of the single string. If it contains two or more words, it displays the first letter of the first string and first letter of the last string.
The `DoubleCharacter` type is used to display two-character text based on the value set in the [InitialsType](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_InitialsType) property. If the initials contain one word, it shows the first and last letters. If it contains multiple words, it displays the first letter of the first and last string.

{% tabs %}
{% highlight xaml %}
Expand Down Expand Up @@ -174,15 +174,15 @@ this.Content = mainGrid;
{% endhighlight %}
{% endtabs %}

![Double Character](ContentType_Images/Initial_Double_AvatarView.png)
![DoubleCharacter](ContentType_Images/Initial_Double_AvatarView.png)

## Custom image

You can add a custom user image by setting the [ImageSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_ImageSource) property. Refer to the Getting Started Documentation in [SfAvatarView.](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html)
You can add a custom user image by setting the [ImageSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_ImageSource) property. Refer to the Getting Started Documentation in [SfAvatarView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html).

## Avatar characters

You can set the default vector images that already present in avatar view by setting the [AvatarCharacter](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_AvatarCharacter) property.
The preset vector images in Avatar View can be utilized by setting the [AvatarCharacter](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_AvatarCharacter) property.

{% tabs %}
{% highlight xaml %}
Expand Down Expand Up @@ -222,11 +222,11 @@ this.Content = mainGrid;

![AvatarCharacter](ContentType_Images/AvatarCharacter.jpg)

## GroupView
## Group view

You can add maximum three images or initials in the same view using a GroupView type.
Add up to three images or initials in the same view using the group view type.

Set the [InitialsMemberPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_InitialsMemberPath) for displaying the initials in the group view. For image, set the [ImageSourceMemberPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_ImageSourceMemberPath). The following code sample demonstrates how to add images using the [GroupSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_GroupSource) property.
Use [InitialsMemberPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_InitialsMemberPath) for initials and [ImageSourceMemberPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_ImageSourceMemberPath) for images. The following code sample demonstrates how to add images using the [GroupSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_GroupSource) property.

{% tabs %}
{% highlight c# %}
Expand Down Expand Up @@ -346,11 +346,11 @@ Set the [InitialsMemberPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui
{% endhighlight %}
{% endtabs %}

![GroupViewImage](ContentType_Images/GroupView_SfAvatarView.png)
![Group view](ContentType_Images/GroupView_SfAvatarView.png)

## Add initials only in GroupView
## Add initials only in group view

You can set the initials only in the group view by setting the [InitialsMemberPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_InitialsMemberPath) alone. It is demonstrated in the following code sample.
Set the initials only in the group view by using the [InitialsMemberPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_InitialsMemberPath) alone. The following example shows how this is done.

{% tabs %}

Expand Down Expand Up @@ -406,34 +406,32 @@ public partial class MainPage : ContentPage, INotifyPropertyChanged
{% endhighlight %}
{% endtabs %}

![GroupView in Initials Only](ContentType_Images/GroupView_InitialsAlone.png)
![Group view in initials only](ContentType_Images/GroupView_InitialsAlone.png)

## Add both image and initials in a GroupView
## Add both image and initials in a group view

You have to set both the image and initials based on what should be added in the collection. If the image needs to be added, set [ImageSourceMemberPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_ImageSourceMemberPath), or if initials need to be added, set [InitialsMemberPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_InitialsMemberPath). This is demonstrated in the following code snippet.
Set both the image and initials as necessary for the collection. If the image needs to be displayed, set [ImageSourceMemberPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_ImageSourceMemberPath); if initials need to be displayed, set [InitialsMemberPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_InitialsMemberPath). This is illustrated in the following code:

{% tabs %}
{% highlight c# %}

public class EmployeeViewModel : INotifyPropertyChanged
public class EmployeeViewModel : INotifyPropertyChanged
{
public EmployeeViewModel()
{
public EmployeeViewModel()
{
CollectionImage = new ObservableCollection<Employee>();
CollectionImage.Add(new Employee { ImageSource="mike.png" });
CollectionImage.Add(new Employee { Name= "alex", Colors=Colors.White });
CollectionImage.Add(new Employee { ImageSource= "ellanaa.png" });
}

}
CollectionImage = new ObservableCollection<Employee>();
CollectionImage.Add(new Employee { ImageSource="mike.png" });
CollectionImage.Add(new Employee { Name= "alex", Colors=Colors.White });
CollectionImage.Add(new Employee { ImageSource= "ellanaa.png" });
}
}

{% endhighlight %}
{% endtabs %}


![GroupView for both image and initials](ContentType_Images/GroupView_InitialAndImage.png)
![Group view for both image and initials](ContentType_Images/GroupView_InitialAndImage.png)

## See also

[How to load the online images in .NET MAUI AvatarView?](https://support.syncfusion.com/kb/article/17110/how-to-load-the-online-images-in-net-maui-avatarview)
[How to load the online images in .NET MAUI Avatar View?](https://support.syncfusion.com/kb/article/17110/how-to-load-the-online-images-in-net-maui-avatarview)
Loading