删除项目时图像在 ListView 中消失

Question

我目前正在开发一个 Xamarin CrossPlatform 项目，并且已经实现了一个绑定到 ObservableCollection 的 Listview。一切正常，直到我从 ListView 中删除一个项目。 ListView 中后续项目中的图像随机消失 - 并非全部消失，而且每次的数量都不同。我想这与 MemoryStream 有关，但我需要改变什么？这是绑定到 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;
            }
        }
    }

这是相关的 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);
    }

编辑： 调整图像大小没有帮助，同样的问题。我通过将测试变量 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

我遇到了类似的问题。当我加载或更新我的列表视图时，并没有显示所有图像。

我解决了调整图像大小的问题。巨大的图像给了我一个内存不足的异常。将这些图像调整为更小的分辨率可以解决这些问题。