Rock Mobile Docs

Avatar

Display a person's avatar using the configured settings. Rock's avatar feature provides the ability to create unique avatar images for each person record within the system.

Inherits from Microsoft.Maui.Controls.ContentView

Visit the link below to learn more about this Rock feature:

Avatar Styling

About

This control constructs an avatar image source based on the provided parameters or displays the current person's avatar.

Properties

PropertyTypeDescription
SourcestringThe direct source to the Avatar URL.
PersonGuidGuidThe person to display the avatar for.
RoundedboolWhether or not the avatar should be rounded.
ShowStrokeboolWhether or not a default stroke shape should be applied to the avatar.
AvatarBackgroundColorColorThe background color of the avatar. This is passed along to the GetAvatar request.  
AvatarForegroundColorColorThe foreground color of the avatar. This is passed along to the GetAvatar request.  
AvatarAgeClassificationAgeClassificationThe age classification of the avatar.
AvatarGenderGenderThe gender of the avatar.
AvatarBoldboolWhether or not the avatar should be bolded.
AvatarStylestringThe style of the avatar. Typically initials or icon.  
AvatarTextstringThe text to use for the avatar.

Examples

In most cases, you'll want to provide the Avatar source directly to the component. This should be the method utilized whenever you have a person object available.

<Rock:Avatar Source="{{ CurrentPerson.PhotoUrl | Escape }}" />

Otherwise, you can pass in the parameters to build the Avatar source manually.

<Rock:Avatar PersonGuid="{{ CurrentPerson.Guid }}" />
<Rock:Avatar AvatarBackgroundColor="{Rock:PaletteColor App-Primary-Soft}" 
   AvatarForegroundColor="{Rock:PaletteColor App-Primary-Strong}"
   AvatarText="Custom Avatar"
   Rounded="False" />

If no properties are set, the component will display the current person's avatar:

<Rock:Avatar />