圖像在ListView中消失時刪除一個項目

Question

我目前正在Xamarin CrossPlatform項目上工作，並實現了一個綁定到ObservableCollection的Listview。一切正常，直到我從ListView中刪除一個項目。 ListView中的後續項目中的圖像隨機消失 - 並非全部都是這樣，每次都有不同數量的圖像。我想這與MemoryStream有關，但是我需要改變什麼？ Here's我的模型的相關部分綁定到ListView：

public string ImageBase64 
    { 
     get 
     { 
      return imagebase64; 
     } 
     set 
     { 
      if (imagebase64 != value) 
      { 
       imagebase64 = value; 
       OnPropertyChanged(nameof(ImageBase64)); 
       OnPropertyChanged(nameof(ImageSource)); 
      } 
     } 
    } 

    public ImageSource ImageSource 
    { 
     get 
     { 
      if (!string.IsNullOrEmpty(imagebase64)) 
      { 
       return ImageSource.FromStream(() => new MemoryStream(Convert.FromBase64String(imagebase64))); 
      } 
      else 
      { 
       return null; 
      } 
     } 
    } 

Here's相關的XAML：

<ListView x:Name="listView" Margin="20" ItemsSource="{Binding}" ItemSelected="OnListItemSelected" HasUnevenRows="True" SeparatorColor="{StaticResource primaryGreen}" SeparatorVisibility="Default"> 
    <ListView.ItemTemplate> 
     <DataTemplate> 
      <ViewCell> 
       <Grid Margin="0,5,0,5"> 
        <Grid.RowDefinitions> 
         <RowDefinition Height="*" /> 
         <RowDefinition Height="auto" /> 
         <RowDefinition Height="auto" /> 
        </Grid.RowDefinitions> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition Width="65" /> 
         <ColumnDefinition Width="*" /> 
         <ColumnDefinition Width="45" /> 
        </Grid.ColumnDefinitions> 
        <Image Grid.Column="0" Grid.RowSpan="3" Margin="-2,-2,-2,-2" Source="{Binding ImageSource}" HorizontalOptions="Start" VerticalOptions="Center" Aspect="AspectFill"/> <!-- This is the displayed Image --> 
        <Label Margin="10,0,0,0" Grid.Column="1" Grid.Row="0" FontAttributes="Bold" FontSize="18" TextColor="{StaticResource primaryGreen}" Text="{Binding VorNachname}" VerticalTextAlignment="Start" HorizontalTextAlignment="Start"/> 
        <Label Margin="10,0,0,0" Grid.Column="1" Grid.Row="1" Text="{Binding MediumSelected.Wert, StringFormat='via {0}'}" HorizontalOptions="FillAndExpand" VerticalTextAlignment="Start" HorizontalTextAlignment="Start"/> 
        <StackLayout Margin="10,0,0,0" Grid.Column="1" Grid.Row="2" Orientation="Horizontal" HorizontalOptions="FillAndExpand"> 
         <Label Text="{Binding Alter,StringFormat='Alter: {0}'}" VerticalTextAlignment="Start" HorizontalTextAlignment="Start" HorizontalOptions="Start"/> 
        </StackLayout> 
        <StackLayout Margin="0,0,0,-5" Grid.Column="2" Grid.RowSpan="3" Orientation="Vertical" HorizontalOptions="End" VerticalOptions="End"> 
         <Button WidthRequest="40" HeightRequest="40" BackgroundColor="White" BorderWidth="0" BorderColor="White" Image="socialmedia_18.png" Clicked="OnChangeClicked" CommandParameter ="{Binding}" VerticalOptions="EndAndExpand" /> 
         <Button Margin="0,-15,0,0" WidthRequest="40" HeightRequest="40" BackgroundColor="White" BorderColor="White" Image="cancel_18.png" Clicked="OnDeleteClicked" CommandParameter ="{Binding}" VerticalOptions="End" /> 
        </StackLayout> 
       </Grid> 
      </ViewCell> 
     </DataTemplate> 
    </ListView.ItemTemplate> 
</ListView> 

...後面的代碼：

async void OnDeleteClicked(object sender, EventArgs e) 
    { 
     Helper.TrackEvent("PeopleList_OnDeleteClicked"); 
     //Get selected Person 
     Person person = (Person)((Button)sender).CommandParameter; 

     //Remove from Model 
     DBHelper.DBModel.People.Remove(person); 

     //Update database 
     App.Database.UpdateWithChildren(DBHelper.DBModel); 
    } 

編輯： 調整圖像沒有幫助，同樣的問題。我試了一下由testvariable ImageSourceThumb結合ListViewItemImage：

public ImageSource ImageSourceThumb 
    { 
     get 
     { 
      if (!string.IsNullOrEmpty(imagebase64)) 
      { 
       return ImageSource.FromStream(() => new MemoryStream(ImageResizer.ResizeImage(Convert.FromBase64String(imagebase64), 64, 64))); 
      } 
      else 
      { 
       return null; 
      } 
     } 
    } 

Answer 1

我也有類似的問題。當我加載或更新我的列表視圖不是所有的圖像出現。

我解決了調整圖像大小的問題。巨大的圖像給我一個外存異常。將這些圖像調整爲較小的分辨率可解決這些問題。