列表视图 SCROLL 顶部的堆栈布局

Question

如何将堆栈布局附加到列表视图的顶部，以便它与列表视图一起滚动？

我曾尝试将堆栈布局和列表视图放在滚动视图中，但根据我滚动的位置，我得到了一个奇怪的重叠。 （见下文）

我希望堆栈布局固定在列表视图上，并让它们一起滚动！

滚动前：

滚动后：

代码：

<!-- 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

如果你想添加一个布局作为 ListView 顶部的一部分，你总是可以使用 ListView Header。

在您的情况下，只需执行以下操作：

<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>

这样StackLayout 将成为ListView 的一部分，并且始终会随之滚动。

注意：避免在ScrollView 中使用ListView，否则会遇到很多问题。