Skip to content

Fix IOS/MacOS AvataView background color with image bug #1539

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
TheCodeTraveler merged 4 commits into from
Nov 26, 2023
Merged

Fix IOS/MacOS AvataView background color with image bug #1539

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b659551
use ellipse instead round rectangle geomerty
Nov 17, 2023
afd7089
Merge branch 'main' into fix_avatar_view_ios
TRybina132 Nov 24, 2023
c05a547
do not use geometry if ios
Nov 26, 2023
5e4bc64
Refactor code
TheCodeTraveler Nov 26, 2023
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
9 changes: 8 additions & 1 deletion src/CommunityToolkit.Maui.UnitTests/Views/AvatarView/AvatarViewImageTests.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,14 @@ public void ImageSourceParentSize()
{
avatarImage.WidthRequest.Should().Be(73);
avatarImage.HeightRequest.Should().Be(37);
avatarImage.Clip.Should().BeOfType<RoundRectangleGeometry>();
if (OperatingSystem.IsIOS() || OperatingSystem.IsMacCatalyst() || OperatingSystem.IsMacOS())
{
avatarImage.Clip.Should().BeNull();
}
else
{
avatarImage.Clip.Should().BeOfType<RoundRectangleGeometry>();
}
}
}
}
23 changes: 14 additions & 9 deletions src/CommunityToolkit.Maui/Views/AvatarView.shared.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -302,7 +302,10 @@ static void OnCornerRadiusPropertyChanged(BindableObject bindable, object oldVal
AvatarView avatarView = (AvatarView)bindable;
CornerRadius corderRadius = (CornerRadius)newValue;

avatarView.StrokeShape = new RoundRectangle { CornerRadius = corderRadius };
avatarView.StrokeShape = new RoundRectangle
{
CornerRadius = corderRadius
};
}

static void OnImageSourcePropertyChanged(BindableObject bindable, object oldValue, object newValue)
Expand All @@ -328,12 +331,6 @@ void HandleImageChanged(ImageSource? newValue)
avatarImage.Source = newValue;
if (newValue is not null)
{
// Work-around for iOS / MacOS bug that paints `Border.BackgroundColor` over top of `Border.Content` when an Image is used for `Border.Content`
if (OperatingSystem.IsIOS() || OperatingSystem.IsMacCatalyst() || OperatingSystem.IsMacOS())
{
BackgroundColor = Colors.Transparent;
}

Content = avatarImage;
}
else
Expand All @@ -357,6 +354,7 @@ void HandlePropertyChanged(object? sender, PropertyChangedEventArgs e)
&& avatarImage.Source is not null)

{
Geometry? avatarImageClipGeometry = null;
#if WINDOWS
double offsetX = 0;
double offsetY = 0;
Expand All @@ -367,7 +365,14 @@ void HandlePropertyChanged(object? sender, PropertyChangedEventArgs e)
double imageWidth = Width - (StrokeThickness * 2) - Padding.Left - Padding.Right;
double imageHeight = Height - (StrokeThickness * 2) - Padding.Top - Padding.Bottom;

Rect rect = new(offsetX, offsetY, imageWidth, imageHeight);
if (!OperatingSystem.IsIOS() && !OperatingSystem.IsMacCatalyst() && !OperatingSystem.IsMacOS())
{
avatarImageClipGeometry = new RoundRectangleGeometry
{
CornerRadius = CornerRadius,
Rect = new(offsetX, offsetY, imageWidth, imageHeight)
};
}

avatarImage.Clip = StrokeShape switch
{
Expand All @@ -376,7 +381,7 @@ void HandlePropertyChanged(object? sender, PropertyChangedEventArgs e)
Microsoft.Maui.Controls.Shapes.Path path => path.Clip,
Polygon polygon => polygon.Clip,
Rectangle rectangle => rectangle.Clip,
_ => new RoundRectangleGeometry { CornerRadius = CornerRadius, Rect = rect },
_ => avatarImageClipGeometry
};
}
}
Expand Down