Как заставить Xamarin Forms ListView перерисовывать/изменять размер перекрывающихся меток, когда HasUnevenRows = true

Question

У меня есть страница со списком, содержащая контент в виде viewcell. Contentview имеет изображение (на самом деле это объект cachedimage). В списке есть неровные строки для размещения различных высот изображения.

К сожалению, объекты, подобные ярлыкам и т. Д., Перекрываются с каждой из строк после загрузки изображений внутри этих строк. Я читал, что должен использовать «ForceUpdateSize», но я не уверен, где в коде разместить это (или даже если он будет работать).

(На боковой ноте нет овелапа, когда у моего contentview (viewcell) есть сетка с отмеченными высотами, но это приводит к большому количеству ненужных промежутков между строками).

P.s. Это контент, поскольку я использую повторное использование этого XAML и кода на страницах Xamarin без списка.

<?xml version="1.0" encoding="UTF-8"?> 
<ContentPage xmlns:local="clr-namespace:myapp" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="myapp.HomePage"> 
<ContentPage.Content> 
    <ListView x:Name="ListView" HasUnevenRows="true"> 
     <ListView.ItemTemplate> 
      <DataTemplate> 
       <ViewCell> 
        <local:MyContentView x:Name="MyContentView"> 
        </local:MyContentView> 
       </ViewCell> 
      </DataTemplate> 
     </ListView.ItemTemplate> 
    </ListView> 
</ContentPage.Content> 

<?xml version="1.0" encoding="UTF-8"?> 
<ContentView xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="myapp.MyContentView"> 
<ContentView.Content> 
    <StackLayout x:Name="MainLayout"> 
     <StackLayout Orientation="Horizontal" Margin="10,1"> 
      <Button Text="username" x:Name="UsernameBtn" Clicked="Username_Clicked" /> 
      <Button Text="follow" x:Name="FollowBtn" HorizontalOptions="EndAndExpand" Clicked="Follow_Clicked" /> 
      <Button Text="..." x:Name="MoreBtn" Clicked="More_Clicked" /> 
     </StackLayout> 
     <ffimageloading:CachedImage x:Name="Image" HorizontalOptions="Center" VerticalOptions="Center" DownsampleToViewSize="true" Source="http://loremflickr.com/600/600/nature?filename=simple.jpg"> 
     </ffimageloading:CachedImage> 
     <StackLayout Orientation="Horizontal" Margin="10,0"> 
      <Button Text="Like" x:Name="LikeBtn" Clicked="Like_Clicked" Image="http://www.endlessicons.com/wp-content/uploads/2014/03/bookmark-icon-2-614x460.png" /> 
      <Button Text="Comment" x:Name="CommentBtn" Clicked="Comment_Clicked" /> 
      <Button Text="Share" x:Name="ShareBtn" Clicked="Share_Clicked" /> 
      <Button Text="Bkmrk" x:Name="BookMarkPostBtn" Clicked="BookmarkPost_Clicked" HorizontalOptions="EndAndExpand" Image="http://www.endlessicons.com/wp-content/uploads/2014/03/bookmark-icon-2-614x460.png" /> 
     </StackLayout> 
     <StackLayout Orientation="Horizontal" Margin="10,0"> 
      <Label x:Name="LikeCount" Text="1,234" /> 
      <Label Text="Likes" /> 
     </StackLayout> 
     <Label x:Name="CommentLabel" Text="Comments" /> 
     <Label x:Name="TagLabel" Text="Tags" /> 
    </StackLayout> 

    <!-- 
    <Grid ColumnSpacing="5" RowSpacing="5" Margin="5"> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="*" /> 
      <RowDefinition Height="Auto" /> 
      <RowDefinition Height="*" /> 
      <RowDefinition Height="*" /> 
      <RowDefinition Height="*" /> 
      <RowDefinition Height="*" /> 
     </Grid.RowDefinitions> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="*" /> 
     </Grid.ColumnDefinitions> 

     <StackLayout Orientation="Horizontal" Margin="10,1" Grid.Row="0" Grid.Column="0" > 
      <Button Text="username" x:Name="UsernameBtn" Clicked="Username_Clicked" /> 
      <Button Text="follow" x:Name="FollowBtn" HorizontalOptions="EndAndExpand" Clicked="Follow_Clicked" /> 
      <Button Text="..." x:Name="MoreBtn" Clicked="More_Clicked" /> 

     </StackLayout> 

     <ffimageloading:CachedImage Grid.Row="1" Grid.Column="0" x:Name="Image" HorizontalOptions="Center" VerticalOptions="Center" DownsampleToViewSize="true" Source="http://loremflickr.com/600/600/nature?filename=simple.jpg"> 
      </ffimageloading:CachedImage> 


     <StackLayout Grid.Row="2" Grid.Column="0" Orientation="Horizontal" Margin="10,0"> 
      <Button Text="Like" x:Name="LikeBtn" Clicked="Like_Clicked" Image="http://www.endlessicons.com/wp-content/uploads/2014/03/bookmark-icon-2-614x460.png" /> 
      <Button Text="Comment" x:Name="CommentBtn" Clicked="Comment_Clicked" /> 
      <Button Text="Share" x:Name="ShareBtn" Clicked="Share_Clicked" /> 
      <Button Text="Bkmrk" x:Name="BookMarkPostBtn" Clicked="BookmarkPost_Clicked" HorizontalOptions="EndAndExpand" Image="http://www.endlessicons.com/wp-content/uploads/2014/03/bookmark-icon-2-614x460.png" /> 
     </StackLayout> 

     <StackLayout Grid.Row="3" Grid.Column="0" Orientation="Horizontal" Margin="10,0"> 
      <Label x:Name="LikeCount" Text="1,234" /> 
      <Label Text="Likes" /> 
     </StackLayout> 

     <Label Grid.Row="4" Grid.Column="0" x:Name="CommentLabel" Text="Comments" /> 
     <Label Grid.Row="5" Grid.Column="0" x:Name="TagLabel" Text="Tags" /> 


    </Grid> 
    --> 

</ContentView.Content> 

Answer 1

Создать класс, который наследуется от ViewCell и использовать его вместо ViewCell в вашем ItemTemplate. Внутри этого класса вы будете называть ForceUpdateSize().

Однако это может быть не ваша фактическая проблема, если сетка работает, хотя есть дополнительный интервал. Вероятно, вы должны избегать * высоты в своей сетке внутри ListView и вместо этого использовать высоту Auto или pixel.