[BUG] Multiple issues with AvatarView/GravatarImageSource

[varyamereon]

Is there an existing issue for this?

• [X] I have searched the existing issues

Did you read the "Reporting a bug" section on Contributing file?

• [X] I have read the "Reporting a bug" section on Contributing file: https://github.com/CommunityToolkit/Maui/blob/main/CONTRIBUTING.md#reporting-a-bug

Current Behavior

I am experiencing the following issues when using AvatarView/GravatarImageSource together:

1. If the AvatarView has an Image assigned to it, there is no way of it showing the text as a fallback. Even if the GravatarImageSource returns FileNotFound, the text is still not displayed.
2. On Android, if the AvatarView has a BackgroundColor, this is always displayed around the image like a border. The image does not fill the space of the AvatarView enough to hide the background colour.
3. On Android, if the page containing the AvatarView is navigated away from and then back to, the image disappears.

Here is how the page looks on iOS:

and then on Android:

and finally on Android after being navigated to again:

Expected Behavior

1. I would have expected that if and image is present, the image is displayed. If not, the text would be displayed. So in my case, the user has a valid Gravatar, then display that image, otherwise display their initials as text. Otherwise I don't really see the value of the text property. If the GravatarImageSource returns FileNotFound, I would have thought that would have been enough to achieve this behaviour.
2. As on iOS, the background should be completely hidden by the image if one is present.
3. Image should be displayed on every navigation to the page.

Steps To Reproduce

1. Open the solution in the repository
2. Use the flyout menu to navigate to the Gravatar page. On both platforms you will see issue 1. On Android you will see issue 2.
3. On Android, navigate with the flyout menu back to the main page, then navigate back to the gravatar page.
4. On Android, you will then see issue 3.

Link to public reproduction project repository

https://github.com/varyamereon/GravatarToolkitSample

Environment

- .NET MAUI CommunityToolkit: 7.0.1
- OS: iOS 17.2 / Android 34
- .NET MAUI: 8.0.7

Anything else?

No response

[GeorgeLeithead]

Firstly, thankyou so much for creating the reproduction repository, it really helps.

In regards to # 2, the AvatarView, if not specified, CornerRadius is set to the AvatarViewDefaults.DefaultCornerRadius which is set to:

public static CornerRadius DefaultCornerRadius { get; } = new(24, 24, 24, 24);

As such, if you want to stretch, I suggest you set the CornerRadius to 0, and I also suggest you over-ride the defaults for BorderWidth and Padding, such as:

CornerRadius="0" BorderWidth="0" Padding="0"

In regards to # 3 I think this is a bug with .NET MAUI, see [Android] Image can disappear when going back to the page..

In regards to # 1, I think this is because the GravatarImageSource is still technically an image, like when a web browser has an image defined and it is not found it displays a broken image, exactly like this:

This therefore is still rendered which hides the text as implemented by AvatarView.

This can be verified as not a bug with GravatarImageSource by using the true underlying control UriImageSource and setting the URI to an image that doesn't exist, such as:

I don't have an iOS device so can't confirm if the above holds true for iOS, sorry.

[varyamereon]

Thanks George, I think you're right about the Android image disappearing, seems to be a rather nasty MAUI bug.

With regards to the yellow border, it does almost disappear when you set the Padding to 0, but not completely. This is regardless of Corner Radius, and anyway I would like to keep the corner radius. I would consider this a bug really as the image should cover the whole of the container.

I understand with the first issue that it is perhaps working as intended. If the two controls came from different libraries I would say fair enough, but I guess in my head they are both supposed to play nicely together, and maybe it's more of a feature request then that there could be a null image option so that if the user doesn't have a Gravatar account, we can display their initials in the AvatarView instead.

[TRybina132]

Hello, I think I have found solution for this issue with # 2 with avatar view and background color that displayed as border in android. I fixed it in this pull request #1786

[GeorgeLeithead]

Hello, I think I have found solution for this issue with # 2 with avatar view and background color that displayed as border in android. I fixed it in this pull request #1786

@TRybina132 You are right. In the AvatarView we define as the default StrokeShape as RoundRectangle, but currently don't provide for this in the clipping of the stroke shape!

Defined here:

		StrokeShape = new RoundRectangle
		{
			CornerRadius = new CornerRadius(AvatarViewDefaults.DefaultCornerRadius.TopLeft, AvatarViewDefaults.DefaultCornerRadius.TopRight, AvatarViewDefaults.DefaultCornerRadius.BottomLeft, AvatarViewDefaults.DefaultCornerRadius.BottomRight),
		};

But not handled in the clip:

			avatarImage.Clip = StrokeShape switch
			{
				Polyline polyLine => polyLine.Clip,
				Ellipse ellipse => ellipse.Clip,
				Microsoft.Maui.Controls.Shapes.Path path => path.Clip,
				Polygon polygon => polygon.Clip,
				Rectangle rectangle => rectangle.Clip,
				_ => avatarImageClipGeometry
			};

Therefore, adding RoundRectangle will indeed clip the image correctly:

			avatarImage.Clip = StrokeShape switch
			{
				Polyline polyLine => polyLine.Clip,
				Ellipse ellipse => ellipse.Clip,
				Microsoft.Maui.Controls.Shapes.Path path => path.Clip,
				Polygon polygon => polygon.Clip,
				Rectangle rectangle => rectangle.Clip,
				RoundRectangle roundRectangle => roundRectangle.Clip,
				_ => avatarImageClipGeometry
			};

[GeorgeLeithead]

Thanks George, I think you're right about the Android image disappearing, seems to be a rather nasty MAUI bug.

With regards to the yellow border, it does almost disappear when you set the Padding to 0, but not completely. This is regardless of Corner Radius, and anyway I would like to keep the corner radius. I would consider this a bug really as the image should cover the whole of the container.

I understand with the first issue that it is perhaps working as intended. If the two controls came from different libraries I would say fair enough, but I guess in my head they are both supposed to play nicely together, and maybe it's more of a feature request then that there could be a null image option so that if the user doesn't have a Gravatar account, we can display their initials in the AvatarView instead.

@varyamereon I'm going to look to add 2 'features' to GravatarImageSource, both based on what to do if the Gravatar returned is a 404. The first will be a property FallBackImageSource, so the developer can provide their own image if there is no Gravatar. The second will be a property (not sure of the naming convention YET [open to suggestions], but something like...) VisibleIfFallBack which will default to TRUE. This will allow the developer to hide the whole GravatarImageSource control should it be a 404 (need to think about how I'm going to implement this a bit more).

How does that sound?

[varyamereon]

Spooky, I was just revisiting this! I like the idea in general, the fallback imagesource isn't something I need personally but I do like the idea and could see it being useful. With regards to hiding the image on a 404, I would be happy with that, I wonder if it could just be added to the list of default images as an option such as 'Null' or 'Empty'. And then either hide the image or return null as you mentioned.

[vhugogarcia]

Thanks @varyamereon and @GeorgeLeithead for discussing and providing feedback.

I can confirm, the issue on .NET MAUI with the image disappearing when navigating has been fixed on the latest version of .NET MAUI. The issue with the background not being able to show has also been fixed and merged into the community toolkit here: https://github.com/CommunityToolkit/Maui/pull/1786

The not found image issue, can be discussed as a new feature under discussions, so, others can also provide some feedback and recommendations.

I'm closing this issue for now. @GeorgeLeithead could you give us a hand by creating a simplified discussion with the new proposals as features for the avatar control?

Thanks in advance