CODEWITHSUNDEEP
c#xamlxamarin.formsmaui
Jeremy A.
Jeremy A.

Reputation: 83

Why is the content of my ScrollView not displayed when I target Android?

I have the following very simple controltemplate:

<ControlTemplate x:Key="BarChartControlTemplate">
<Grid 
    x:Name="Part_Grid"
    BackgroundColor="LightYellow"
    ColumnDefinitions="*,auto">

    <ScrollView
        x:Name="Part_Scroller"
        BackgroundColor="ForestGreen"
        Orientation="Horizontal">

        <Grid
            x:Name="Part_Content"
            BackgroundColor="Orange"/>
    </ScrollView>
</Grid>

If I run my application targeting Windows, everything is fine; I have my Part_Grid displayed in light yellow, and my Part_Content in orange (Part_Scroller in green is obviously hidden by Part_Content) :

enter image description here

However, if I run my code targeting Android (on a physical device), my orange Part_Content doesn't appear anymore :

enter image description here

I tried to set an arbitrary size, without success.

Not surprisingly, if I take my Part_Content out of the ScrollView, it appears correctly.

<ControlTemplate x:Key="BarChartControlTemplate">
<Grid 
    x:Name="Part_Grid"
    BackgroundColor="LightYellow"
    ColumnDefinitions="*,auto">

    <ScrollView
        x:Name="Part_Scroller"
        BackgroundColor="ForestGreen"
        Orientation="Horizontal">

    </ScrollView>

    <Grid
        x:Name="Part_Content"
        BackgroundColor="Orange"/>
</Grid>

enter image description here

What would explain such a difference between Windows and Android in the way the ScrollView works?

Update 1:

The problem seems to come from the orientation of the ScrollView, because if I switch it to vertical, everything works fine on android (and on windows, of course). Obviously, this is not what I want: I want to be able to scroll my graphic horizontally.

Upvotes: 1

Views: 297

Answers (1)

Jeremy A.
Jeremy A.

Reputation: 83

I more or less solved my problem by adding this line to my Part_Content:

<Grid
     x:Name="Part_Content"
     HeightRequest="{Binding Source={RelativeSource Mode=Self}, Path=Height}"/>

Basically with this binding, I want the height of my control to match the current height of my control...

It makes absolutely no sense, I don't understand why it works, but for now it does the job.

EDIT :

An alternative (since the ScrollView seems to be bugged on android) is to use a CollectionView (which in my case will have only one Grid item -formerly Part_Content- created on the code side).

<ControlTemplate x:Key="BarChartControlTemplate">
<Grid 
    x:Name="Part_Grid"
    ColumnDefinitions="*,auto">

    <CollectionView
        x:Name="Part_Scroller"
        ItemsLayout="HorizontalList">

        <CollectionView.ItemTemplate>
            <DataTemplate>
                <ContentView Content="{Binding}"/>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</Grid>
</ControlTemplate>

It works well on both platforms. And I can't decide which of the two solutions I found is the ugliest.

Upvotes: 1

Related Questions