[iOS] Fix Border Content clipping issues #10964

jsuarezruiz · 2022-10-27T17:04:03Z

Description of Change

Fix Border Content clipping issues.

Issues Fixed

Fixes #6986
Fixes #10724
Fixes #7521
Fixes #10478
Fixes #12580
Fixes #9952
Fixes #9081
Fixes #13388
Fixes #13011
Fixes #11152

PureWeen

Testing with the original posters XAML and the results seem off

 <VerticalStackLayout>
        <Border StrokeThickness="20"
                            Stroke="Silver"
                            Background="White"
                            Margin="0"
                            Padding="0">
            <Border.StrokeShape>
                <RoundRectangle CornerRadius="30" />
            </Border.StrokeShape>
            <Grid HeightRequest="30" BackgroundColor="Green">
                <StackLayout Orientation="Horizontal">
                    <Frame Padding="0" HasShadow="false"
                                       BackgroundColor="Maroon"
                                       CornerRadius="20"
                                       HeightRequest="40"
                                       WidthRequest="40" VerticalOptions="Center" >
                    </Frame>
                    <Label Text="Parameters"
                                       VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"
                                       FontSize="Medium" FontFamily="Bold"
                                       HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />
                    <Frame Padding="0" HasShadow="false" CornerRadius="0" Margin="0,0,-20,0"
                                       BackgroundColor="Blue"
                                       HeightRequest="40"
                                       WidthRequest="40" VerticalOptions="Center" >
                    </Frame>
                </StackLayout>
            </Grid>
        </Border>
    </VerticalStackLayout>

jsuarezruiz · 2022-11-22T12:27:17Z

Testing with the original posters XAML and the results seem off

 <VerticalStackLayout>
        <Border StrokeThickness="20"
                            Stroke="Silver"
                            Background="White"
                            Margin="0"
                            Padding="0">
            <Border.StrokeShape>
                <RoundRectangle CornerRadius="30" />
            </Border.StrokeShape>
            <Grid HeightRequest="30" BackgroundColor="Green">
                <StackLayout Orientation="Horizontal">
                    <Frame Padding="0" HasShadow="false"
                                       BackgroundColor="Maroon"
                                       CornerRadius="20"
                                       HeightRequest="40"
                                       WidthRequest="40" VerticalOptions="Center" >
                    </Frame>
                    <Label Text="Parameters"
                                       VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"
                                       FontSize="Medium" FontFamily="Bold"
                                       HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />
                    <Frame Padding="0" HasShadow="false" CornerRadius="0" Margin="0,0,-20,0"
                                       BackgroundColor="Blue"
                                       HeightRequest="40"
                                       WidthRequest="40" VerticalOptions="Center" >
                    </Frame>
                </StackLayout>
            </Grid>
        </Border>
    </VerticalStackLayout>

Tested with Catalyst and the result is the same as Android. Weird, will do more tests.

rmarinho · 2022-11-28T14:26:45Z

Windows seems doesn't render the frames..

rmarinho · 2022-11-28T16:00:54Z

on IOS is almost fine, theres some white background

PureWeen

My last comment run on iOS was incorrect. I'm not sure why I got that result.

What I'm curious about now is some of the math and results here. I'm not super strong in this area so I'm probably missing something

iOS

I don't quite understand why we're multiplying the line width by 2. From the docs the line width straddles the path

https://developer.apple.com/documentation/coregraphics/1455270-cgcontextsetlinewidth?language=objc

The default line width is 1 unit. When stroked, the line straddles the path, with half of the total width on either side.

So, instead of doubling the width should we be increasing the width/height so we don't have to multiply by 2?

The iOS results don't seem quite correct because the blue frame is a rectangle but it's getting a circle cut out of it. It seems like that blue should be filling all this space.

Android

The issue I'm seeing with Android should probably be a new issue. If it is indeed an issue.

If you look at android it seems like the way the path works is the same as iOS.

The path of the border overlaps the surrounding grid which is basically what @rmarinho seems to have noticed here
#10964 (comment)

You can also see that the full height of the Border is 70 dp but due to the border not filling in that space you end up with white space.

It feels like

Android needs to be fixed so the width/height of the border bounds is increased by another BorderWidth of size
iOS should do the same and the stroke thickness shouldn't be multiplied by 2

src/Core/src/Platform/iOS/MauiCALayer.cs

jsuarezruiz · 2022-12-09T17:08:55Z

src/Controls/src/Core/HandlerImpl/RoundRectangle.Impl.cs

+			return path;
+		}
+
+		internal PathF GetInnerPath(float strokeWidth)


We was clipping using the Border shape. That is correct in many cases but not always. Using a RoundRectangle, the Corner Radius value is not the same in the inner or outer. We want in this case user the inner value. For that reason, added a new method returning the same shape but with different radius.

PureWeen · 2023-01-09T17:37:51Z

Testing with the original posters XAML and the results seem off

 <VerticalStackLayout>
        <Border StrokeThickness="20"
                            Stroke="Silver"
                            Background="White"
                            Margin="0"
                            Padding="0">
            <Border.StrokeShape>
                <RoundRectangle CornerRadius="30" />
            </Border.StrokeShape>
            <Grid HeightRequest="30" BackgroundColor="Green">
                <StackLayout Orientation="Horizontal">
                    <Frame Padding="0" HasShadow="false"
                                       BackgroundColor="Maroon"
                                       CornerRadius="20"
                                       HeightRequest="40"
                                       WidthRequest="40" VerticalOptions="Center" >
                    </Frame>
                    <Label Text="Parameters"
                                       VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"
                                       FontSize="Medium" FontFamily="Bold"
                                       HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />
                    <Frame Padding="0" HasShadow="false" CornerRadius="0" Margin="0,0,-20,0"
                                       BackgroundColor="Blue"
                                       HeightRequest="40"
                                       WidthRequest="40" VerticalOptions="Center" >
                    </Frame>
                </StackLayout>
            </Grid>
        </Border>
    </VerticalStackLayout>

Alright, I think the key piece of information I was missing here is that you need to rebase to see these results.
If I rebase this PR to main then I get the incorrect layout described here.

Here it is running on catalyst with everything rebased to main

breenbob · 2023-06-29T09:18:04Z

Would be massively in favour of a backport of these fixes!

jcsnider · 2023-06-29T09:19:07Z

Couldn't agree more, for whatever it's worth.

jrahma · 2023-07-10T14:45:41Z

I am still having the problem. Hope the fix will be available soon.

darshanio · 2023-07-11T10:20:58Z

Would be massively in favour of a backport of these fixes!

Agree.
Hope we get the fix soon in .Net 7.

K0Ma19 · 2023-07-18T14:19:20Z

Sorry if this is a dumb question, but will these changes be in the next update?
When can I expect an update and where can I see what happens in a future update?

KSemenenko · 2023-07-18T15:52:16Z

I feel it will be .NET 8 preview 7 or so

jsuarezruiz added 6 commits October 27, 2022 14:49

Added sample to the Gallery

482eb9c

Fix clipping issues with some views

0cc632f

Updated samples

6db5c2d

Fix issue in the custom CALayer

e02175e

More changes in samples

43dd714

Fixed clipping size issue

49eb030

jsuarezruiz added t/bug Something isn't working area-drawing Shapes, Borders, Shadows, Graphics, BoxView, custom drawing platform/iOS 🍎 labels Oct 27, 2022

jsuarezruiz marked this pull request as ready for review October 28, 2022 10:58

jsuarezruiz marked this pull request as draft November 3, 2022 08:34

jsuarezruiz marked this pull request as ready for review November 16, 2022 15:36

PureWeen requested review from PureWeen and removed request for PureWeen November 17, 2022 17:10

PureWeen requested changes Nov 17, 2022

View reviewed changes

Merge branch 'main' into fix-10724

f5a6bfd

PureWeen requested changes Nov 30, 2022

View reviewed changes

PureWeen mentioned this pull request Dec 1, 2022

[WinUI] Fix the size returned when measuring Frame #11779

Merged

jsuarezruiz added 4 commits December 7, 2022 16:38

Merge branch 'main' into fix-10724

90604ba

Updated implementation

ce4afa8

Added comment in MauiCALayer

20aaa2a

Use correct inner path (different corner radius) using a RoundRectangle

83a87ce

jsuarezruiz commented Dec 9, 2022

View reviewed changes

src/Core/src/Platform/iOS/MauiCALayer.cs Show resolved Hide resolved

jsuarezruiz commented Dec 9, 2022

View reviewed changes

Merge branch 'main' into fix-10724

adce253

jsuarezruiz added 4 commits March 24, 2023 12:58

Merge branch 'main' into fix-10724

923ba97

Updated samples

d0cc6ac

Fix Border StrokeThickness sizing issues on Android

982d809

Merge branch 'main' into fix-10724

10b3a4c

jsuarezruiz requested a review from hartez March 27, 2023 13:47

This was referenced Mar 29, 2023

[regression/8.0.0-preview.3.8149] [android] Paths do not render correctly (width/height not being properly calculated?) #14239

Open

Move to the backlog - Transparency - community needs fixes to move to maui. #14255

Closed

Merge branch 'main' into fix-10724

202185b

hartez approved these changes Mar 29, 2023

View reviewed changes

rmarinho enabled auto-merge (squash) March 29, 2023 17:28

rmarinho requested review from PureWeen and removed request for PureWeen March 29, 2023 18:17

PureWeen approved these changes Mar 29, 2023

View reviewed changes

rmarinho merged commit 0d9ac95 into main Mar 29, 2023

rmarinho deleted the fix-10724 branch March 29, 2023 19:12

PureWeen mentioned this pull request Mar 29, 2023

RoundRectangle StrokeShape produces a different result on iOS vs Android #14276

Closed

hartez mentioned this pull request Mar 30, 2023

Border Margin #7764

Closed

jsuarezruiz mentioned this pull request Apr 5, 2023

[Windows] Fix Border corners clipping issue #14403

Merged

jsuarezruiz mentioned this pull request Jun 15, 2023

[iOS] Entry in Border - strange corner round. #11152

Closed

samhouts added the backport/suggested The PR author or issue review has suggested that the change should be backported. label Jun 28, 2023

breenbob mentioned this pull request Jun 29, 2023

Clipping an Image with a Border has a gap on Windows #9129

Closed

hartez added the backport/NO This change should not be backported. It may break customers. label Jul 5, 2023

jfversluis mentioned this pull request Jul 12, 2023

[regression/8.0.0] Blank .NET MAUI App crashes on iOS 12 device with .NET 8 preview 6 #16097

Closed

github-actions bot locked and limited conversation to collaborators Dec 16, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[iOS] Fix Border Content clipping issues #10964

[iOS] Fix Border Content clipping issues #10964

jsuarezruiz commented Oct 27, 2022 •

edited by samhouts

PureWeen left a comment

jsuarezruiz commented Nov 22, 2022 •

edited

rmarinho commented Nov 28, 2022

rmarinho commented Nov 28, 2022

PureWeen left a comment •

edited

jsuarezruiz Dec 9, 2022

PureWeen commented Jan 9, 2023 •

edited

breenbob commented Jun 29, 2023

jcsnider commented Jun 29, 2023

jrahma commented Jul 10, 2023

darshanio commented Jul 11, 2023

K0Ma19 commented Jul 18, 2023

KSemenenko commented Jul 18, 2023

[iOS] Fix Border Content clipping issues #10964

[iOS] Fix Border Content clipping issues #10964

Conversation

jsuarezruiz commented Oct 27, 2022 • edited by samhouts

Description of Change

Issues Fixed

PureWeen left a comment

Choose a reason for hiding this comment

jsuarezruiz commented Nov 22, 2022 • edited

rmarinho commented Nov 28, 2022

rmarinho commented Nov 28, 2022

PureWeen left a comment • edited

Choose a reason for hiding this comment

iOS

Android

jsuarezruiz Dec 9, 2022

Choose a reason for hiding this comment

PureWeen commented Jan 9, 2023 • edited

breenbob commented Jun 29, 2023

jcsnider commented Jun 29, 2023

jrahma commented Jul 10, 2023

darshanio commented Jul 11, 2023

K0Ma19 commented Jul 18, 2023

KSemenenko commented Jul 18, 2023

jsuarezruiz commented Oct 27, 2022 •

edited by samhouts

jsuarezruiz commented Nov 22, 2022 •

edited

PureWeen left a comment •

edited

PureWeen commented Jan 9, 2023 •

edited