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"
+                Clicked="SetImageSourceButtonClicked"
+                Text="Press me" />
+
+            <mct:AvatarView
+                BorderColor="Red"
+                HeightRequest="32"
+                Text="AV"
+                WidthRequest="32"
+                x:Name="DelayedImageSourceImage" />
+        </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 SetImageSourceButtonClicked(object? sender, EventArgs e)
+	{
+		DelayedImageSourceImage.ImageSource = ImageSource.FromFile("avatar_icon.png");
+	}
 }

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

@@ -317,6 +317,7 @@ void HandleImageChanged(ImageSource? newValue)
 		avatarImage.Source = newValue;
 		if (newValue is not null)
 		{
+			RefreshAvatarImage();
 			Content = avatarImage;
 		}
 		else
@@ -327,18 +328,24 @@ void HandleImageChanged(ImageSource? newValue)
 
 	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)
+		// Ensure avatarImage is clipped to the bounds of the AvatarView whenever its Height, Width, CornerRadius, Border, StrokeThickness and Padding properties change
+		if (e.PropertyName == HeightProperty.PropertyName
+		    || e.PropertyName == WidthProperty.PropertyName
+		    || e.PropertyName == PaddingProperty.PropertyName
+		    || e.PropertyName == BorderWidthProperty.PropertyName
+		    || e.PropertyName == CornerRadiusProperty.PropertyName
+		    || e.PropertyName == StrokeThicknessProperty.PropertyName
+		   )
+		{
+			RefreshAvatarImage();
+		}
+	}
 
+	void RefreshAvatarImage()
+	{
+		if (Height >= 0 // The default value of Height (before the view is drawn onto the page) is -1
+		    && Width >= 0 // The default value of Width (before the view is drawn onto the page) is -1
+		    && avatarImage.Source is not null)
 		{
 			Geometry? avatarImageClipGeometry = null;
 #if WINDOWS