列表視圖頂部的堆棧佈局SCROLL

Question

我該如何在listview的頂部附加一個堆棧佈局，以便它與列表視圖一起滾動？

我已經嘗試把堆棧佈局和列表視圖內滾動視圖，但即時通訊重疊取決於我滾動的位置。 （見下）

我想堆棧佈局堅持到列表視圖，讓他們一起滾動！

之前滾動：

滾動後：

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

如果你想添加一個佈局的頂部的一部分您始終可以使用ListView ListView標題。

在你的情況下，只需做到以下幾點：

<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，否則會遇到很多問題。