Maui icon indicating copy to clipboard operation
Maui copied to clipboard

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

Open GeorgeLeithead opened this issue 2 years ago • 4 comments

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

GeorgeLeithead avatar Jul 22 '22 12:07 GeorgeLeithead

Question: If both are set, should CornerRadius override StrokeShape, or the other way around? I personally think that CornerRadius is the main property and should override. Opinions?

GeorgeLeithead avatar Jul 22 '22 14:07 GeorgeLeithead

I have a partial working fork and branch, to where I can get the image clip to work correctly for Ployline, Ellipse, Path, Polygon and rectangle (default is RoundRectangle implemented by the CornerRadius).

Works for Android:

image

However, it does not work well for Windows: image

It works for embedded images (row 2, control 1 and 3), but URL images (row 2, column 2) are a problem. I THINK the problem is that the clip is applied before the image completes download/stream, and then overrides the clip.

GeorgeLeithead avatar Jul 22 '22 17:07 GeorgeLeithead

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!

brminnick avatar Jul 22 '22 17:07 brminnick

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!

Draft pull created.

GeorgeLeithead avatar Jul 22 '22 17:07 GeorgeLeithead

@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

VladislavAntonyuk avatar Jan 15 '23 12:01 VladislavAntonyuk