[Android] When adding child in ScrollView, the vertical layout options of the child (of child) is not working

[Deepak1799]

Description

When adding child in ScrollView, the vertical layout options of the child (of child) is not working.

Steps to Reproduce

1. Create File -> New MaUI app.
2. Add a scroll view to the Main Page.
3. Add a Grid as the child of the scroll view.
4. Add an Image as the child of Grid.

Code snippet: [Complete 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="ZoomableView.MainPage">
        <ScrollView BackgroundColor="Green">
            <Grid BackgroundColor="Red">
                <Image
                    Source="dotnet_bot.png"
                    SemanticProperties.Description="Cute dot net bot waving hi to you!"
                    WidthRequest="250"
                    HeightRequest="310"
                    HorizontalOptions="Center" 
                VerticalOptions="Center"
            BackgroundColor="Yellow"/>
            </Grid>
        </ScrollView>
    </ContentPage>

Where you can see the Vertical options of the Image is "Center". However if you run the sample, the image will be aligned vertically at the "top" of the Grid.

Screenshot

Note: For showing difference, I have used background colors for the controls.

Version with bug

Release Candidate 2 (current)

Last version that worked well

Unknown/Other

Affected platforms

Android

Affected platform versions

Android 9.0

Did you find any workaround?

NOTE: The below information is not a workaround. But may be useful for the analysis.

This issue occurs due to the Foremost parent is a Scroll View. If we removed the Scroll View and just placing a grid, the vertical option was proper. Please try the below code snippet.

Code: [Complete 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="ZoomableView.MainPage">
    <Grid BackgroundColor="Red">
        <Image
                Source="dotnet_bot.png"
                SemanticProperties.Description="Cute dot net bot waving hi to you!"
                WidthRequest="250"
                HeightRequest="310"
                HorizontalOptions="Center" 

        BackgroundColor="Yellow"/>
    </Grid>
</ContentPage>

Screenshot

Relevant log output

NA

[XamlTest]

Verified this issue with Visual Studio Enterprise 17.3.0 Preview 1.0 [32427.455.main]. Repro on Android. Sample Project: MauiApp5.zip

[kristinx0211]

still an issue on android with 17.3.0 Preview 2.0 [32507.29.main].

[ghost]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[homeyf]

Verified this issue with Visual Studio Enterprise 17.6.0 Preview 2.0. Not repro on android emulator with above project. MauiApp5.zip

[ghost]

Hi @Deepak1799. We have added the "s/try-latest-version" label to this issue, which indicates that we'd like you to try and reproduce this issue on the latest available public version. This can happen because we think that this issue was fixed in a version that has just been released, or the information provided by you indicates that you might be working with an older version.

You can install the latest version by installing the latest Visual Studio (Preview) with the .NET MAUI workload installed. If the issue still persists, please let us know with any additional details and ideally a reproduction project provided through a GitHub repository.

This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.