question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Bug] AvatarView using `StrokeShape` and `ImageSource` image is incorectly clipped

See original GitHub issue

Description

AvatarView has a parent of Border and supports the Stroke* properties, as well as the AvatarView specific CornerRadius. When using StrokeShape to implement ‘exotic’ shapes, paired with ImageSource, the image is clipped to the CornerRadius and not the StrokeShape.

Steps to Reproduce

            <mct:AvatarView
                Grid.Row="1"
                Grid.Column="0"
                HeightRequest="48"
                SemanticProperties.Description="Sample AvatarView idea using a polyline stroke shape to override the corder radius to draw a star."
                StrokeShape="PolyLine 70,16 76,32 94,32 80,44 84,60 70,50 55,60 60,42 46,32 64,32"
                Style="{StaticResource Rating}"
                Text="1"
                ImageSource="avatar_icon.png"
                WidthRequest="48" />

Link to Reproduction Sample

https://github.com/GeorgeLeithead/CommunityToolkitMaui/tree/510-Bug

Expected Behavior

ImageSource should be clipped to both the StrokeShape and CornerRadius depending on which is used.

Actual Behavior

ImageSource is currently only clipped to the control CornerRadius.

Workaround

Reproduction imagery

image

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
brminnickcommented, Jul 22, 2022

Thanks George! Could you open a draft PR for the bug fix?

I’ll take a look at the code and see how I can help!

0reactions
VladislavAntonyukcommented, Jan 15, 2023

@GeorgeLeithead I see it is fixed for all platforms except windows. Does this issue describe the leftover for this bug? https://github.com/CommunityToolkit/Maui/issues/632

Read more comments on GitHub >

github_iconTop Results From Across the Web

Issue in Clipping Images in Border #6986 - dotnet/maui
Description 1)Images are not perfectly fit as expected....In Android, Images are perfectly clipped without CornerRadius Only, but In Windows ...
Read more >
AvatarView - .NET MAUI Community Toolkit
The ImageSource property is an ImageSource that determines the image of the control. It can be set to an image retrieved from a...
Read more >
[Solved]Change UI source image?
I am trying to have my code work like this, Button pressed -> load new source image in image -> repeats till last...
Read more >
Content Types in SfAvatarView
The SfAvatarView control allows you to display the view in five different ways: Default - Displays the default image when initializing without any...
Read more >
Xamarin Community Toolkit AvatarView
The AvatarView control allows the user to display an avatar or the user's initials if no avatar is available. By binding the Source...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found