ScrollView blocks when nested inside a RelativeLayout or an AbsoluteLayout

yellow_king · February 2018

I've got a layout which requires an area where you can scroll horizontally and above that 'layer', a new layer of fixed controls is required as well (a sidebar which is not to move from its place). The only way of achieving this kind of overlapping is by nesting elements inside a RelativeLayout or an AbsoluteLayout (StackLayout does not allow overlapping); and since any set of elements must be nested within only one kind of Layout, I guess I really have pick between an AbsoluteLayout or a RelativeLayout. The things is any Scrollview freezes inside any one of those Layouts... Any help here would be precious, guys

JohnHardman · February 2018

@yellow_king - Would a Grid be suitable for what you are trying to do? It supports overlapping. It might be worth checking whether you hit the same ScrollView problem if using Grid.

If Grid is not suitable for any reason, post your code that shows the ScrollView problem.

yellow_king · February 2018

@JohnHardman Grid did the trick I guess, thanks, at least from what I've checked so far So basically I've defined just one row and one column and then I've inserted all my views for the correct z order inside that created 'cell' that I could get the desired overlapping.

yellow_king · February 2018

Here's the generated XAML:

        <Grid.RowDefinitions>

            <RowDefinition Height="*" />

        </Grid.RowDefinitions>

        <!-- Remaining Container -->
        <StackLayout BackgroundColor="White">

            <!-- Meeting Hub Header -->
            <StackLayout HeightRequest="107"
                    HorizontalOptions="StartAndExpand"
                    Margin="47, 20, 0, 0"
                    x:Name="MonthIndicationWrapper">

                <Label Text=""
                    TextColor="{StaticResource galpOrange}"
                    FontFamily="{StaticResource segoeLight}"
                    FontSize="{StaticResource h2Size}"
                    x:Name="YearAndMonthIndication"/>

                <Label Text="Smart Governance / Crédito Agrícola / Galp / BPI"
                    FontFamily="{StaticResource segoeLight}"
                    TextColor="Gray"
                    FontSize="12"/>

            </StackLayout>

            <!-- Month Chronology-->
            <StackLayout Margin="0"
                    Padding="0"
                    Spacing="0">

                <ScrollView VerticalOptions="FillAndExpand" Orientation="Horizontal">

                    <StackLayout x:Name="MonthlyMeetingsHubWrapper"
                            BackgroundColor="White"
                            Spacing="0"
                            Margin="45, 0, 0, 0"
                            Padding="0">


                        <!--Body of Meetings along the month #f3f3f3-->

                        <RelativeLayout x:Name="MonthlyMeetingHubChronologyWrapper"
                                BackgroundColor="Transparent"
                                Margin="0">


                        <!--Day Container-->

                            <StackLayout x:Name="DaysContainer"
                                    Orientation="Horizontal"
                                    BackgroundColor="{StaticResource galpBackground}"
                                    Spacing="1"
                                    Margin="0"
                                    Padding="0"
                                    >

                            </StackLayout>

                        </RelativeLayout>

                    </StackLayout>

                </ScrollView>


            </StackLayout>


        </StackLayout>


        <!-- Sidebar Container -->
        <StackLayout x:Name="SideBarContainer"
                     Grid.Row="0" 
                        Margin="0"
                        Spacing="0"
                        Padding="0"
                     WidthRequest="45"
                        BackgroundColor="Transparent"
                     HorizontalOptions="Start"

    </Grid>

Xamarin

Quick Links

ScrollView blocks when nested inside a RelativeLayout or an AbsoluteLayout

Posts