删除项目时,ListView中的图像消失

时间:2017-10-06 10:45:21

标签: c# xaml listview data-binding xamarin.forms

我目前正在开发一个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);
    }

修改 调整图像大小没有帮助,同样的问题。我通过将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;
            }
        }
    }

1 个答案:

答案 0 :(得分:0)

我有类似的问题。当我加载或更新我的列表视图时,并非所有图像都显示出来。

我修复了调整图像大小的问题。巨大的图像给了我一个outofmemory异常。将这些图像调整为较小的分辨率可以解决这些问题。