[regression/8.0.0-preview.3.8149] [android] Paths do not render correctly (width/height not being properly calculated?)

[jonathanpeppers]

Description

I'm working on: https://github.com/dotnet/maui/issues/9485

main	stable

The "Play Button" disappeared, it is something like:

<Border
    Style="{StaticResource PlayBorderStyle}">
    <Border.StrokeShape>
        <Ellipse />
    </Border.StrokeShape>
    <Border.Shadow>
        <Shadow 
            Opacity="0.5"
            Offset="4, 4"/>
    </Border.Shadow>
    <Path
        Data="M0,0L15.825011,8.0009766 31.650999,15.997986 15.825011,23.998993 0,32 0,15.997986z"
        Style="{StaticResource PlayIconStyle}"/>
</Border>

Steps to Reproduce

Run this app w/ dotnet/maui/main: https://github.com/jsuarezruiz/netmaui-surfing-app-challenge

Link to public reproduction project repository

https://github.com/jsuarezruiz/netmaui-surfing-app-challenge

Version with bug

8.0 previews

Last version that worked well

7.0 (current)

Affected platforms

Android

Affected platform versions

API 33

Did you find any workaround?

No

Relevant log output

> dotnet workload list

Installed Workload Id      Manifest Version       Installation Source
---------------------------------------------------------------------
maui-windows               7.0.59/7.0.100         VS 17.5.33516.290
maui-maccatalyst           7.0.59/7.0.100         VS 17.5.33516.290
maccatalyst                16.2.1024/7.0.100      VS 17.5.33516.290
maui-ios                   7.0.59/7.0.100         VS 17.5.33516.290
ios                        16.2.1024/7.0.100      VS 17.5.33516.290
maui-android               7.0.59/7.0.100         VS 17.5.33516.290
android                    33.0.26/7.0.100        VS 17.5.33516.290

[jonathanpeppers]

/cc @jsuarezruiz maybe something needs to change in this sample to work w/ main?

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

[jsuarezruiz]

/cc @jsuarezruiz maybe something needs to change in this sample to work w/ main?

The only recent change affecting Border is this https://github.com/dotnet/maui/pull/10964, but it hasn't been merged yet. I've been checking and:

• The Border sets its content correctly.
• A Path is created, the Mapper invokes the methods to map the Shape.
• In the ShapeDrawableclass, the Draw method is invoked and it is drawn.

But, the Path was not visible, it was being drawn but it was not visible. Why?. After reviewing the visual tree in detail I realized that the Path is drawn out of position and since Border clips the outline, it is not visible.

Removing the vertical and horizontal alignment options:

I have to review the changes related with Layout from stable to main. Maybe @hartez could help us here.

[jinxinjuan]

Verified this issue with Visual Studio Enterprise 17.7.0 Preview 3.0(net8). Can repro on Android platform with sample project. /netmaui-surfing-app-challenge

[jstedfast]

I wonder if this is the same issue as https://github.com/dotnet/maui/issues/17111

[jstedfast]

I was able to reproduce this using net8.0 (built from main) on android.

The clipping around the avatar images also seems wrong.

Oddly, the Microsoft.Maui.Samples app that does the same thing does not have these issues.

[jstedfast]

This may be a bug in Path??

Using this as my Maui.Controls.Samples.Sandbox MainPage.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">
    <Grid ColumnDefinitions="Auto, Auto" RowDefinitions="Auto" VerticalOptions="Center" HorizontalOptions="Center" Background="Pink">
        <Border Grid.Row="0" Grid.Column="0" Background="LightBlue" StrokeThickness="0" HeightRequest="44" WidthRequest="44">
            <Border.StrokeShape>
                <Ellipse />
            </Border.StrokeShape>
            <Border.Shadow>
                <Shadow Opacity="0.5" Offset="4, 4"/>
            </Border.Shadow>
            <Path Fill="Black" HorizontalOptions="Center" VerticalOptions="Center" Scale="0.5" Margin="6"
                 Data="M0,0L15.825011,8.0009766 31.650999,15.997986 15.825011,23.998993 0,32 0,15.997986z"/>
        </Border>
        <Path Grid.Row="0" Grid.Column="1" Fill="Black" HorizontalOptions="Center" VerticalOptions="Center" Scale="0.5" Margin="6"
            Data="M0,0L15.825011,8.0009766 31.650999,15.997986 15.825011,23.998993 0,32 0,15.997986z"/>
    </Grid>
</ContentPage>

It renders like this:

[jstedfast]

If I specify a WidthRequest and HeightRequest, things work:

<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">
    <Grid ColumnDefinitions="Auto, Auto" RowDefinitions="Auto" VerticalOptions="Center" HorizontalOptions="Center" Background="Pink">
        <Border Grid.Row="0" Grid.Column="0" Background="LightBlue" StrokeThickness="0" HeightRequest="44" WidthRequest="44">
            <Border.StrokeShape>
                <Ellipse />
            </Border.StrokeShape>
            <Border.Shadow>
                <Shadow Opacity="0.5" Offset="4, 4"/>
            </Border.Shadow>
            <Path Fill="Black" HorizontalOptions="Center" VerticalOptions="Center" Scale="0.5" Margin="6" WidthRequest="31.651" HeightRequest="32"
                 Data="M0,0L15.825011,8.0009766 31.650999,15.997986 15.825011,23.998993 0,32 0,15.997986z"/>
        </Border>
        <Path Grid.Row="0" Grid.Column="1" Background="LightGreen" Fill="Black" HorizontalOptions="Center" VerticalOptions="Center" WidthRequest="31.651" HeightRequest="32" Scale="0.5" Margin="6"
            Data="M0,0L15.825011,8.0009766 31.650999,15.997986 15.825011,23.998993 0,32 0,15.997986z"/>
    </Grid>
</ContentPage>

[jstedfast]

They also work if I remove the Margin="6" from the Path element.

[jstedfast]

The above PR improves things by at least calculating the correct size for the Paths.

Unfortunately, things still don't render in the surfer app (but do in the test case above) unless I unset the Margin.

This goes back to what @jsuarezruiz was saying regarding the path being drawn out of position somehow.

[jstedfast]

Okay, so I think that the Scale must be getting applied after Margins and Vertical/HorizontalOptions are applied, which is causing the Path to be effectively rendered outside the clip path for the containing ContentViewGroup.

I have no idea how to proceed.