ScrollView blocks when nested inside a RelativeLayout or an AbsoluteLayout

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

Posts

  • JohnHardmanJohnHardman GBUniversity mod
    edited 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_kingyellow_king Member ✭✭

    @JohnHardman Grid did the trick I guess, thanks, at least from what I've checked so far :wink: 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_kingyellow_king Member ✭✭

    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"
                            ></StackLayout>
    
        </Grid>
    
Sign In or Register to comment.