[iOS] Fix Border Content clipping issues

[jsuarezruiz]

Description of Change

Fix Border Content clipping issues.

(Draft PR, still completing testing)

Issues Fixed

Fixes #10724 Fixes #7521 Fixes #10478 Fixes #12580 Fixes #9952 Fixes #9081 FIxes #13388

[jsuarezruiz]

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]

Windows seems doesn't render the frames..

[rmarinho]

on IOS is almost fine, theres some white background

[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>

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

[jsuarezruiz]

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

Ok, thanks for the details. Let me test it.

[jsuarezruiz]

Added more samples to validate #9081

[KSemenenko]

@jsuarezruiz Is there any chance that this fix will be available in the NET 7.200 version?

[github-actions[bot]]

:warning: Your code has been reformatted. :warning:

[hartez]

Just ran the sample gallery from this PR, and it looks like it's clipping the items on the first page:

[jsuarezruiz]

Just ran the sample gallery from this PR, and it looks like it's clipping the items on the first page:

Working on changes. Detected the issue. This PR is before these changes https://github.com/dotnet/maui/pull/12356 and for the clipping is still using the old Shapes sizing approach setting the Frame etc. This is wrong and require changes.

This PR is marked as Draft while updating the code.

[jsuarezruiz]

Just ran the sample gallery from this PR, and it looks like it's clipping the items on the first page:

Working on changes. Detected the issue. This PR is before these changes #12356 and for the clipping is still using the old Shapes sizing approach setting the Frame etc. This is wrong and require changes.

This PR is marked as Draft while updating the code.

Ready to another review. Applied changes and tested with the original issue sample:

Of course, with the .NET MAUI gallery:

And with the specific sample to validate the Border clipping possibilities (with different shapes, stroke width etc).

[hartez]

If I open the "Border Stroke Options" page and update each Label to have a HeightRequest of 50, I get this, which seems wrong:

[jsuarezruiz]

Border widths still look wrong for iOS on the Border Stroke Options page.

Seems that this will be fixed by https://github.com/dotnet/maui/pull/14114 Let's review it again after merge 14114 and rebase here.

[rmarinho]

I merged main with changes of #14114 and the border with height works ok now

[breenbob]

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

[jcsnider]

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

[jrahma]

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

[darshanio]

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

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

[K0Ma19]

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]

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