Fix: [BUG] AvatarView changes size when setting its ImageSource #3153

samples/CommunityToolkit.Maui.Sample/Pages/Views/AvatarView/AvatarViewImagesPage.xaml

@@ -91,6 +91,20 @@
         </VerticalStackLayout.Resources>
         <Label Style="{StaticResource Description}" Text="AvatarView can use local or URL image sources." />
         <Line Style="{StaticResource HR}" />
+        <HorizontalStackLayout HorizontalOptions="Center" Spacing="12">
+            <Button
+                Margin="10"
+                Pressed="Button_OnClicked"
+                Text="Press me" />
+
+            <mct:AvatarView
+                BorderColor="Red"
+                HeightRequest="32"
+                Text="AV"
+                WidthRequest="32"
+                x:Name="buggyImage" />
+        </HorizontalStackLayout>
+
         <Grid
             ColumnDefinitions="Auto"
             HorizontalOptions="Center"

samples/CommunityToolkit.Maui.Sample/Pages/Views/AvatarView/AvatarViewImagesPage.xaml.cs

@@ -5,4 +5,9 @@ namespace CommunityToolkit.Maui.Sample.Pages.Views;
 public partial class AvatarViewImagesPage : BasePage<AvatarViewImagesViewModel>
 {
 	public AvatarViewImagesPage(AvatarViewImagesViewModel avatarViewImagesViewModel) : base(avatarViewImagesViewModel) => InitializeComponent();
+
+	void Button_OnClicked(object? sender, EventArgs e)
+	{
+		buggyImage.ImageSource = ImageSource.FromFile("avatar_icon.png");
+	}
 }

src/CommunityToolkit.Maui/Views/AvatarView.shared.cs

@@ -318,6 +318,7 @@ void HandleImageChanged(ImageSource? newValue)
 		if (newValue is not null)
 		{
 			Content = avatarImage;
+			RefreshAvatarImage();
 		}
 		else
 		{
@@ -329,49 +330,53 @@ void HandlePropertyChanged(object? sender, PropertyChangedEventArgs e)
 	{
 		// Ensure avatarImage is clipped to the bounds of the AvatarView whenever its Height, Width, CornerRadius and Padding properties change
 		if ((e.PropertyName == HeightProperty.PropertyName
-			 || e.PropertyName == WidthProperty.PropertyName
-			 || e.PropertyName == PaddingProperty.PropertyName
-			 || e.PropertyName == ImageSourceProperty.PropertyName
-			 || e.PropertyName == BorderWidthProperty.PropertyName
-			 || e.PropertyName == CornerRadiusProperty.PropertyName
-			 || e.PropertyName == StrokeThicknessProperty.PropertyName)
-			&& Height >= 0 // The default value of Height (before the view is drawn onto the page) is -1
-			&& Width >= 0 // The default value of Y (before the view is drawn onto the page) is -1
-			&& avatarImage.Source is not null)
-
+		     || e.PropertyName == WidthProperty.PropertyName
+		     || e.PropertyName == PaddingProperty.PropertyName
+		     || e.PropertyName == ImageSourceProperty.PropertyName
+		     || e.PropertyName == BorderWidthProperty.PropertyName
+		     || e.PropertyName == CornerRadiusProperty.PropertyName
+		     || e.PropertyName == StrokeThicknessProperty.PropertyName)
+		    && Height >= 0 // The default value of Height (before the view is drawn onto the page) is -1
+		    && Width >= 0 // The default value of Y (before the view is drawn onto the page) is -1
+		    && avatarImage.Source is not null)
 		{
-			Geometry? avatarImageClipGeometry = null;
+			RefreshAvatarImage();
+		}
+	}
+
+	void RefreshAvatarImage()
+	{
+		Geometry? avatarImageClipGeometry = null;
 #if WINDOWS
 			double offsetX = 0;
 			double offsetY = 0;
 #else
-			double offsetX = StrokeThickness + Padding.Left;
-			double offsetY = StrokeThickness + Padding.Top;
+		double offsetX = StrokeThickness + Padding.Left;
+		double offsetY = StrokeThickness + Padding.Top;
 #endif
-			double imageWidth = Width - (StrokeThickness * 2) - Padding.Left - Padding.Right;
-			double imageHeight = Height - (StrokeThickness * 2) - Padding.Top - Padding.Bottom;
-			avatarImage.WidthRequest = imageWidth;
-			avatarImage.HeightRequest = imageHeight;
+		double imageWidth = Width - (StrokeThickness * 2) - Padding.Left - Padding.Right;
+		double imageHeight = Height - (StrokeThickness * 2) - Padding.Top - Padding.Bottom;
+		avatarImage.WidthRequest = imageWidth;
+		avatarImage.HeightRequest = imageHeight;
 
-			if (!OperatingSystem.IsIOS() && !OperatingSystem.IsMacCatalyst() && !OperatingSystem.IsMacOS())
-			{
-				avatarImageClipGeometry = new RoundRectangleGeometry
-				{
-					CornerRadius = CornerRadius,
-					Rect = new(offsetX, offsetY, imageWidth, imageHeight)
-				};
-			}
-
-			avatarImage.Clip = StrokeShape switch
+		if (!OperatingSystem.IsIOS() && !OperatingSystem.IsMacCatalyst() && !OperatingSystem.IsMacOS())
+		{
+			avatarImageClipGeometry = new RoundRectangleGeometry
 			{
-				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
+				CornerRadius = CornerRadius,
+				Rect = new(offsetX, offsetY, imageWidth, imageHeight)
 			};
 		}
+
+		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
+		};
 	}
 }