2017-06-12 6 views
2

リストビューのスクロールを行うために、リストビューのスタックレイアウトを追加するにはどうすればよいですか?リストビューの上のスタックレイアウトSCROLL

私はスクロールビューの中でスタックレイアウトとリストビューを入れようとしましたが、スクロールビューのどこにスクロールするかによってwierdオーバーラップを取得しました。 (下記参照)

スタックレイアウトをリストビューに固定し、一緒にスクロールさせたいです!

スクロール前:

enter image description here

スクロール後:

enter image description here

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> 

答えて

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> 

StackLayoutListViewの一部となり、このよう常にそれをスクロールします。この道を。

注:ScrollViewの中にListViewを使用しないでください。そうしないと、多くの問題が発生します。

+0

grid.rowとgrid.columnを編集する必要がありましたが、listview.headerは必要なものでした。すべてが今正しく動作しています! –

関連する問題