Stack Layout on top of List view SCROLL

Question

How would I append a stack layout ontop of a listview so that it scrolls with the listview?

I have tried putting the stack layout and listview inside a scroll view, but im getting a wierd overlap depending on where I scroll. (See below)

I want the stack layout to be stuck to the listview and have them scroll together!

before scrolling:

after scrolling:

CODE:

<!-- Scrollview-->
        <ScrollView Grid.Row="2" Grid.Column="0" BackgroundColor="#4D148C">
            <Grid RowSpacing="0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="150"/> <!--detail -->
                    <RowDefinition Height="*"/> <!--related videos listview -->
                </Grid.RowDefinitions>

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>

                <!--detail -->
                <StackLayout x:Name="VideoDetail" BackgroundColor="White" Grid.Row="0" Grid.Column="0" Padding="10, 10, 10, 10" Margin=" 0,0,0,3">

                    <Label Text ="{Binding Title}" FontAttributes="Bold"/>
                    <Label Text ="{Binding View_Count}" TextColor="Gray"/>
                    <Label Text ="{Binding Author_By}" TextColor="Gray" />
                    <Label Text ="{Binding Uploaded}" TextColor="Gray"/>


                </StackLayout>


                <!--related videos listview -->
                <ListView x:Name="VideoListView" HasUnevenRows="True" ItemTapped="ViewCellItem_Clicked" BackgroundColor="#4D148C" Grid.Row="1" Grid.Column="0">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <ViewCell>
                                <ViewCell.View>
                                    <Grid RowSpacing="0" ColumnSpacing="10" BackgroundColor="White" Padding="10,10,10,10" Margin="0,0,0,3">
                                        <!-- "left, top, right, bottom" -->
                                        <!-- "left, top, right, bottom" -->
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="auto"/>
                                            <RowDefinition Height="auto"/>
                                            <RowDefinition Height="auto"/>
                                        </Grid.RowDefinitions>

                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="auto"/>
                                            <ColumnDefinition Width="auto"/>
                                        </Grid.ColumnDefinitions>

                                        <!-- Image Container -->

                                        <!-- NOTE: youtube thumnail dimensions are 128x72-->
                                        <Grid Grid.Row="0" Grid.Column="0" Grid.RowSpan="3"  BackgroundColor="Black">
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="72"/>
                                            </Grid.RowDefinitions>

                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="128"/>
                                            </Grid.ColumnDefinitions>

                                            <Image 
                                        Source="{Binding Thumbnail}" 
                                        Grid.Row="0" Grid.Column="0"
                                        HorizontalOptions="Center"
                                        VerticalOptions="Center"/>
                                        </Grid>

                                        <Label 
                                            Text="{Binding Title}" 
                                            FontAttributes="Bold" 
                                            Grid.Row="0" Grid.Column="1" 
                                            VerticalTextAlignment="Center"/>
                                        <Label 
                                            Text="{Binding Author_Views}" 
                                            TextColor="Gray" 
                                            Grid.Row="1" Grid.Column="1" 
                                            VerticalTextAlignment="Center"/>
                                        <Label 
                                            Text="{Binding Uploaded}" 
                                            TextColor="Gray" 
                                            Grid.Row="2" Grid.Column="1" 
                                            VerticalTextAlignment="Center"/>
                                    </Grid>
                                </ViewCell.View>
                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>




            </Grid>   <!-- inner grid -->           
        </ScrollView>

Answer 1

If you want to add a Layout as part of the top of the ListView you can always use the ListView Header.

In your case just do the following:

<ListView x:Name="VideoListView" HasUnevenRows="True" ItemTapped="ViewCellItem_Clicked" BackgroundColor="#4D148C" Grid.Row="1" Grid.Column="0">
    <ListView.Header>
        <StackLayout x:Name="VideoDetail" BackgroundColor="White" Grid.Row="0" Grid.Column="0" Padding="10, 10, 10, 10" Margin=" 0,0,0,3">
            <Label Text ="{Binding Title}" FontAttributes="Bold"/>
            <Label Text ="{Binding View_Count}" TextColor="Gray"/>
            <Label Text ="{Binding Author_By}" TextColor="Gray" />
            <Label Text ="{Binding Uploaded}" TextColor="Gray"/>
        </StackLayout>
    </ListView.Header>    
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <ViewCell.View>
                    <Grid RowSpacing="0" ColumnSpacing="10" BackgroundColor="White" Padding="10,10,10,10" Margin="0,0,0,3">
                        <!-- "left, top, right, bottom" -->
                        <!-- "left, top, right, bottom" -->

                        <!-- I omitted the ListView Item implementation -->

                    </Grid>
                </ViewCell.View>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

This way the StackLayout will be part of the ListView and as this will always scroll with it.

Note: Avoid using a ListView inside a ScrollView or you will run into a lot of issues.