Clipping issues for Border control (all platforms, but different on each platform)

[activa]

Description

The content inside a Border control is not correctly clipped. It's an issue on all platforms, but Android is the worst.

The following screenshots show a 160x160 box with on each corner a 32x32 box with different border sizes. The 32x32 boxes in the corners are there to illustrate the clipping that is occurring and to verify the border width.

Android:

iOS:

Windows:

On Android, the inside content is cutting through the outline border.
On iOS, the content is clipped using an incorrect radius on the round corners. There's white space showing
On Windows, the same issue as on iOS (incorrect radius used for clipping). But also, the outside edge of square corners is not rendered correctly

I haven't tested on MacOS

Note that this was a LOT worse on MAUI 7, so it's not a regression.

The XAML for what is shown in the screenshot:

<Border Stroke="Black" StrokeThickness="{Binding .}" StrokeShape="RoundRectangle 32,0,0,32" WidthRequest="160" HeightRequest="160" x:Name="Border">
    <Grid RowDefinitions="*,*" ColumnDefinitions="*,*" BackgroundColor="LightGreen" Padding="0" RowSpacing="0" ColumnSpacing="0">
        <BoxView Background="Red" WidthRequest="32" HeightRequest="32" Grid.Row="0" Grid.Column="0" HorizontalOptions="Start" VerticalOptions="Start"/>
        <BoxView Background="Red" WidthRequest="32" HeightRequest="32" Grid.Row="0" Grid.Column="1" HorizontalOptions="End" VerticalOptions="Start"/>
        <BoxView Background="Red" WidthRequest="32" HeightRequest="32" Grid.Row="1" Grid.Column="0" HorizontalOptions="Start" VerticalOptions="End"/>
        <BoxView Background="Red" WidthRequest="32" HeightRequest="32" Grid.Row="1" Grid.Column="1" HorizontalOptions="End" VerticalOptions="End"/>
        <Label HorizontalOptions="Center" VerticalOptions="Center" Grid.ColumnSpan="2" Grid.RowSpan="2" Text="{Binding .}" FontSize="20"/>
    </Grid>
</Border>

Steps to Reproduce

No response

Link to public reproduction project repository

https://github.com/activa/MauiBorderClippingBug

Version with bug

8.0.3

Is this a regression from previous behavior?

No, this is something new

Last version that worked well

Unknown/Other

Affected platforms

iOS, Android, Windows

Affected platform versions

No response

Did you find any workaround?

No response

Relevant log output

No response

[ghost]

We've added this issue to our backlog, and we will work to address it as time and resources allow. If you have any additional information or questions about this issue, please leave a comment. For additional info about issue management, please read our Triage Process.

[Naxilos]

I managed to create a workaround using Custom Behavior and Clipping.

My focus was on Android clipping. Workaround works partly for iOS (inside the stroke).
Haven't tested it on other platforms.

1. Create a Behavior

public class ClipBorderBehavior : Behavior<Border>
{
    protected override void OnAttachedTo(Border bindable)
    {
        bindable.PropertyChanged += Bindable_PropertyChanged;
        
        base.OnAttachedTo(bindable);
    }

    private void Bindable_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
    {
        if(e.PropertyName == "Height")
        {
            var bindable = sender as Border;

            if (bindable is null) return;

            var shape = bindable.StrokeShape as RoundRectangle;

            if (shape is null) return;

            var thickness = bindable.StrokeThickness;

            var newClip = new RoundRectangleGeometry();

            newClip.CornerRadius = new CornerRadius(
                shape.CornerRadius.TopLeft - thickness * 0.5,
                shape.CornerRadius.TopRight - thickness * 0.5,
                shape.CornerRadius.BottomLeft - thickness * 0.5,
                shape.CornerRadius.BottomRight - thickness * 0.5);

            newClip.Rect = new Rect(0, 0, bindable.Width - thickness*2, bindable.Height - thickness*2);

            bindable.Content.Clip = newClip;
           
        }
    }

    protected override void OnDetachingFrom(Border bindable)
    {
        bindable.PropertyChanged -= Bindable_PropertyChanged;

        base.OnDetachingFrom(bindable);
    }
}

2. Attach it to the border in XAML

<Border
      BackgroundColor="Transparent"
      Stroke="Black"
      StrokeShape="RoundRectangle, 10"
      StrokeThickness="4">
      <Border.Behaviors>
           <workarounds:ClipBorderBehavior/>
      </Border.Behaviors>
       [...]
</Border>

Border is my nemesis in MAUI. Can't wait to use this control without a headache .