[Windows] Issues with BoxView Placement Inside Border

[kasanhoon]

Description

In a .NET 8 Windows environment, there is an issue where placing a BoxView inside a Border results in incorrect sizing. When BoxView and Border are placed separately, there are no significant issues. However, when a BoxView is nested within a Border, both the Border and BoxView are rendered at incorrect sizes.

This problem has not been observed in Android and iOS environments. It appears to be an issue exclusive to the Windows .NET 8 platform.

MainPage.xaml

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

    <ScrollView>
        <VerticalStackLayout
            Padding="30,0"
            Spacing="25">
            <Image
                Source="dotnet_bot.png"
                HeightRequest="185"
                Aspect="AspectFit"/>
            <HorizontalStackLayout Spacing="25" HorizontalOptions="Center">
                <!--right size-->
                <Border WidthRequest="55" HeightRequest="35" StrokeThickness="3" >
                    <Border.StrokeShape>
                        <RoundRectangle CornerRadius="6"/>
                    </Border.StrokeShape>
                </Border>
                <Label Text="+" VerticalOptions="Center" />
                <BoxView WidthRequest="55" HeightRequest="35" Color="LightBlue" CornerRadius="6" BackgroundColor="Transparent"/>
                <Label Text="=" VerticalOptions="Center" />
                <!--wrong size-->
                <Border WidthRequest="55" HeightRequest="35" StrokeThickness="3" >
                    <Border.StrokeShape>
                        <RoundRectangle CornerRadius="6"/>
                    </Border.StrokeShape>
                    <BoxView WidthRequest="55" HeightRequest="35" Color="LightBlue" CornerRadius="6" BackgroundColor="Transparent"/>
                </Border>
            </HorizontalStackLayout>
        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

MainPage.xaml.cs

namespace BorderTest
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }
    }
}

Result

Steps to Reproduce

1. Create a default MAUI project.
2. Replace the MainPage.xaml and MainPage.xaml.cs with the code provided above.
3. Build & Execute the project on Windows.
4. Observe the sizes of the Border and BoxView.

Link to public reproduction project repository

No response

Version with bug

8.0.3

Is this a regression from previous behavior?

Yes, this used to work in .NET MAUI

Last version that worked well

7.0.101

Affected platforms

Windows

Affected platform versions

windows10.0.19041.0

Did you find any workaround?

No response

Relevant log output

No response

[XamlTest]

Verified this on Visual Studio Enterprise 17.9.0 Preview 4(8.0.3). Repro on Windows 11, not repro on Android 14.0-API34, iOS 17.2 and MacCatalyst with below Project:
19668.zip

[davidortinau]

This still happens in .NET 9 Preview 7. What I'm observing is that the content of the Border will push the border size outside the bounds of its frame at the right/bottom.

<Border StrokeShape="RoundRectangle 10"
    StrokeThickness="2"
    Stroke="White"
    WidthRequest="20"
    HeightRequest="20">
    <BoxView WidthRequest="18"
            HeightRequest="18"
            Color="Purple"
            HorizontalOptions="Center"
            VerticalOptions="Center"/>
</Border>

The workaround for me is to wrap the content of the Border in a ContentView and enable clipping. This prevents the content from changing the size of the control.

<Border 
    StrokeShape="RoundRectangle 10"
    StrokeThickness="2"
    Stroke="White"
    WidthRequest="20"
    HeightRequest="20">
    <ContentView IsClippedToBounds="True">
        <ImageButton 
            WidthRequest="18"
            HeightRequest="18"
            Background="Red"
            HorizontalOptions="Center"
            VerticalOptions="Center"/>
    </ContentView>
</Border>

Android and iOS and Mac Catalyst don't exhibit this problem.

Seems like it could be the same issue causing #20407