[Bug] Strange Border with StrokeThickness and Clipped Content

Description

Hello,

Borders StrokeThickness does not have the same width between iOS and Android.

Android seems to not have a perfect interior line rounded iOS seems ok, but it put an extract padding on the left image

PS: Right Image has a negative padding to see the clip issue, but it’s a known issue #7576 #6986 --------------------------Android------------------------------------------------------------ iOS-------------------------

Steps to Reproduce

1. Create a new Border
2. Put as a Content a Grid with some stuff in it (Images ,etc…)
3. Use a RoundRectangle as Border.StrokeShape with different CornerRadius to see the result.

--------------------------iOS------------------------------------------- Android-------------------------

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

Expected Behavior

Version with bug

6.0 (current)

Last version that worked well

Unknown/Other

Affected platforms

iOS, Android

Affected platform versions

MAUI 6.0.312

Did you find any workaround?

No response

Relevant log output

No response

[Phenek]

@jsuarezruiz Glad to see that coming!

I see you choose an inside border that overlap the content. I think it’s the best compromise, it let us the choise to make a padding on the content of the size of the border or as we wish.

But we still have a little issue, I just removed the green background and found this on Android, I don’t know if it’s the clip or the border that has the wrong StrokeThickness, but they should follow each other ---------------------------------Android----------------------------------- We are not so far from the perfect behavior!

I am unable to test iOS, because Maui App crash at startup, I will try next time.

                <Border StrokeThickness="10"
                        Stroke="Silver"
                        Background="White"
                        Margin="0"
                        Padding="0"
                        HeightRequest="60">
                    <Border.StrokeShape>
                        <RoundRectangle CornerRadius="30" />
                    </Border.StrokeShape>
                    <Grid HeightRequest="30">
                        <StackLayout Orientation="Horizontal" HeightRequest="30">
                            <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"
                                   BackgroundColor="Blue"
                                   HeightRequest="40"
                                   WidthRequest="40" VerticalOptions="Center" >
                            </Frame>
                        </StackLayout>
                    </Grid>
                </Border>

[msftbot[bot]]

We’ve moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.