Clipping an Image with a Border has a gap on Windows

[tchtang]

Description

XAML is

    <Grid BackgroundColor="Blue">
        <Grid.RowDefinitions>
            <!-- label, search -->
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <HorizontalStackLayout Grid.Row="0" Margin="20">
            <!-- meal all -->
            <Border Stroke="LightGray" StrokeThickness="3">
                <Border.StrokeShape>
                    <RoundRectangle CornerRadius="20" />
                </Border.StrokeShape>
                <VerticalStackLayout BackgroundColor="#f0f0f0">
                    <Image Aspect="AspectFill" HeightRequest="100" Source="meal_all.jpg" WidthRequest="100" />
                    <Label HorizontalTextAlignment="Center" Margin="0,5" Text="All" />
                </VerticalStackLayout>
            </Border>
            <!-- meal noodle -->
            <Border Stroke="LightGray" StrokeThickness="3">
                <Border.StrokeShape>
                    <RoundRectangle CornerRadius="20" />
                </Border.StrokeShape>
                <Grid BackgroundColor="#f0f0f0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <Image Grid.Row="0" Aspect="AspectFill" HeightRequest="100" Source="meal_noodle.jpg" WidthRequest="100" />
                    <Label Grid.Row="1" HorizontalTextAlignment="Center" Margin="0,5" Text="Noodle" />
                </Grid>
            </Border>
            <!-- meal rice -->
            <Border Stroke="LightGray" StrokeThickness="3">
                <Border.StrokeShape>
                    <RoundRectangle CornerRadius="20" />
                </Border.StrokeShape>
                <VerticalStackLayout BackgroundColor="#f0f0f0">
                    <Image Aspect="AspectFill" HeightRequest="100" Source="meal_rice.jpg" WidthRequest="100" />
                    <Label HorizontalTextAlignment="Center" Margin="0,5" Text="Rice" />
                </VerticalStackLayout>
            </Border>
        </HorizontalStackLayout>
    </Grid>

Android API 30 is okay

Window 10 has gap

Public API Changes

.

Intended Use-Case

please reduce gap within Border

[breenbob]

This is affecting me as well. I've used Border with RadioButton and VisualStateManager to create a custom segmented control, but I'm seeing different behaviour with Border on every platform:

Windows (dark mode but clearly same issue as above):

Android (Spot on):

iOS (slightly different issue, acts as if padding set but all controls have Padding/Margin/Spacing=0, and only TL and TR corners are clipped):

[breenbob]

Based on my screenshots I think possibly title should be modified to include iOS and platform/iOS label added.

[jsuarezruiz]

Reproduced here https://github.com/jsuarezruiz/netmaui-finance-app-challenge

[XamlTest]

Verified this on Visual Studio Enterprise 17.7.0 Preview 1.0. Repro on Windows 11 and iOS 16.4 with below Project:

Windows 11: Repro

Android 13.0: Not repro.

iOS: Repro

[breenbob]

@jsuarezruiz Is this issue also fixed with your PR #10964?

[jsuarezruiz]

@jsuarezruiz Is this issue also fixed with your PR #10964?

No, that one applied changes mostly for iOS. Will be fixed by #14403