[regression/8.0.0-preview.7.8842] Border clips on the bottom and right

Description

The following XAML

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="ButtonTest.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    BackgroundColor="White">

    <ScrollView>
        <VerticalStackLayout WidthRequest="500">
            <Border StrokeThickness="5">
                <Button Text="Hi hi" />
            </Border>
        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

produces the below.

This did not occur in .NET Preview 7

Steps to Reproduce

1. Create a border
2. Notice clipping
3. Nice.

Link to public reproduction project repository

https://github.com/daltzctr/button-clipping

Version with bug

8.0.0-preview.7.8842

Is this a regression from previous behavior?

Yes, this used to work in .NET MAUI

Last version that worked well

8.0.0-preview.6.8686

Affected platforms

Windows

Affected platform versions

No response

Did you find any workaround?

No

Relevant log output

No response

[jstedfast]

I think I changed it from 10 to 20, I should have redone Windows screenshot but didn’t

I also changed Width/HeightRequests from 500 to 300 to better fit in Android’s screen.

[jstedfast]

Okay, so if I use the following XAML:

<ContentPage
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="Maui.Controls.Sample.MainPage"
    xmlns:local="clr-namespace:Maui.Controls.Sample"
    BackgroundColor="White">

    <Grid ColumnDefinitions="*,*" RowDefinitions="*,*" WidthRequest="300" HeightRequest="300" Padding="10" BackgroundColor="LightGray">
        <Border Grid.Row="0" Grid.Column="0" BackgroundColor="Red" Stroke="Black" StrokeThickness="10" StrokeShape="{RoundRectangle CornerRadius=20}" />
        <Border Grid.Row="0" Grid.Column="1" BackgroundColor="Green" Stroke="Black" StrokeThickness="10" StrokeShape="{RoundRectangle CornerRadius=20}" />
        <Border Grid.Row="1" Grid.Column="0" BackgroundColor="Blue" Stroke="Black" StrokeThickness="10" StrokeShape="{RoundRectangle CornerRadius=20}" />
        <Border Grid.Row="1" Grid.Column="1" BackgroundColor="Yellow" Stroke="Black" StrokeThickness="10" StrokeShape="{RoundRectangle CornerRadius=20}" />
    </Grid>

</ContentPage>

…and I modify the UpdatePath() method found in maui\src\Core\src\Platform\Windows\BorderExtensions.cs to:

		internal static void UpdatePath(this Path borderPath, IShape? borderShape, double width, double height)
		{
			if (borderShape == null)
				return;

			var strokeThickness = borderPath?.StrokeThickness ?? 0;

			if (width <= 0 || height <= 0)
				return;

			var pathSize = new Graphics.Rect(strokeThickness / 2, strokeThickness / 2, width - strokeThickness, height - strokeThickness);
			var shapePath = borderShape.PathForBounds(pathSize);
			var geometry = shapePath.AsPathGeometry();

			if (borderPath != null)
			{
				borderPath.Data = geometry;
				//borderPath.RenderTransform = new TranslateTransform() { X = -(strokeThickness / 2), Y = -(strokeThickness / 2) };
			}
		}

Then I get the followinging rendering:

Which I think is correct, other than maybe the 1px spacing between the items?

The main change I made was changing:

var pathSize = new Graphics.Rect(0, 0, width + strokeThickness, height + strokeThickness);

to:

var pathSize = new Graphics.Rect(strokeThickness / 2, strokeThickness / 2, width - strokeThickness, height - strokeThickness);

(and then remove the TranslateTransform).