如何获取Xamarin表单列表视图以在android上删除后重置自定义视图单元格?

时间:2017-03-02 14:50:48

标签: android xamarin.forms custom-controls custom-renderer xamarin.forms.listview

我正在使用自定义视图单元格和渲染器实现滑动以删除要素。我有一个像这样的列表视图:

https://i.stack.imgur.com/AzBQk.png

当滑动时,会显示一个按钮,如下所示

https://i.stack.imgur.com/S87uj.png

但是,单击删除按钮(成功从列表中删除项目)后,移动到删除单元格位置的视图单元格仍然显示删除按钮:

https://i.stack.imgur.com/aMwux.png

任何人都知道如何阻止这种情况发生?我的自定义渲染器只是公开OnFling()和OnScroll()事件。

我也尝试使用Xamarin形式Pan Gesture Recogniser进行类似的事情并遇到同样的问题。

编辑1:添加了代码段

自定义视图单元格xaml

<ViewCell xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="SwipeViewCell" xmlns:local="CustomControls">
<Grid x:Name="SwipeViewCellGrid">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="70*"/>
        <ColumnDefinition Width="30*"/>
    </Grid.ColumnDefinitions>
    <StackLayout x:Name="HiddenContainer" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Grid.Column="1"/>
    <local:GestureStackLayout x:Name="SwipeContainer" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Grid.ColumnSpan="2" Grid.Column="0"/>
</Grid>

自定义查看单元格.cs:

public partial class SwipeViewCell : ViewCell
{       

    private View _swipeContent;
    private View _hiddenContent; 


    public SwipeViewCell()
    {
        InitializeComponent();

        SwipeContainer.SwipeLeft += SwipeContainer_SwipeLeft;
        SwipeContainer.SwipeRight += SwipeContainer_SwipeRight; 
    }

    public View SwipeContent
    {
        get
        {
            return _swipeContent;
        }
        set
        {
            _swipeContent = value;
            SwipeContainer.Children.Add(SwipeContent);
            OnPropertyChanged();
        }
    }

    public View HiddenContent
    {
        get
        {
            return _hiddenContent;
        }
        set
        {
            _hiddenContent = value;
            HiddenContainer.Children.Add(HiddenContent);
            OnPropertyChanged();
        }
    }

    private void SwipeContainer_SwipeRight(object sender, EventArgs e)
    {
        SwipeContainer.TranslateTo(SwipeContainer.X, 0, 250, Easing.Linear);
    }

    private void SwipeContainer_SwipeLeft(object sender, EventArgs e)
    {
        SwipeContainer.TranslateTo(SwipeContainer.X - HiddenContainer.Width, 0, 250, Easing.Linear);
    }

}

查看型号:

public class ViewModel
{

    private ObservableCollection<string> _data;     

    public ViewModel()
    {
         Data = new ObservableCollection<string>();
         Data.Add("a");
         Data.Add("c");
         Data.Add("b");
    }

    public ObservableCollection<string> Data
    {
        get { return _data; }
        set
        {
            _data= value;
            OnPropertyChanged();
        }
    }

     public ICommand Delete
    {
        get
        {
            return new Command((e) =>
            {
                _data.Remove(e as string);                    
                Data = _data
            });
        }
    }

}

XAML:

 <ListView ItemsSource="{Binding Data}" x:Name="Model" HorizontalOptions="FillAndExpand" IsVisible="True" VerticalOptions="FillAndExpand" SeparatorVisibility="Default" SeparatorColor="Black">
                <CustomControls:MultiListView.ItemTemplate>
                    <DataTemplate>                       
                            <CustomControls:SwipeViewCell  x:Name="Item">
                                <CustomControls:SwipeViewCell.SwipeContent>
                                    <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="White">
                                        <Label Text="{Binding }"/>
                                    </StackLayout>
                                </CustomControls:SwipeViewCell.SwipeContent>
                                <CustomControls:SwipeViewCell.HiddenContent>
                                    <Button Text="Delete" Command="{Binding Delete}"  BindingContext="{Binding Source={x:Reference Model}, Path=BindingContext}" CommandParameter="{Binding Source={x:Reference Item}, Path=BindingContext}"  BackgroundColor="Red"></Button>
                                </CustomControls:SwipeViewCell.HiddenContent>
                            </CustomControls:SwipeViewCell>                          
                    </DataTemplate>
                <ListView.ItemTemplate>
            <ListView>

1 个答案:

答案 0 :(得分:-1)

在下面的完整示例中,如何做到这一点,它对我来说很好:

1-添加一个包含已在列表视图中显示的数字的类

 public class NumberClass
    {
        public string Number{ get; set; }
    }

2 - 尝试将ObservableCollection用于NumberClass,如下所示:

public class NumberClassList : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        public System.Collections.ObjectModel.ObservableCollection<NumberClass> _items;
        public ObservableCollection<NumberClass> Items
        {
            get { return _items; }
            set { _items = value; OnPropertyChanged("Items"); }
        }
        protected virtual void OnPropertyChanged(string propertyName)
        {
            if (PropertyChanged == null)
                return;
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }

        public SerialClassList(List<NumberClass> itemList)
        {
            Items = new ObservableCollection<NumberClass>();
            foreach (NumberClassitm in itemList)
            {
                Items.Add(itm);
            }
        }
    }

3 - 将您的号码列表放在List<NumberClass>

    public List<NumberClass> allItems;

4 - 使用NumberClassList如下:

 NumberClassList items;
    items = new NumberClassList(allItems);

为您的ListView设置项目来源,如下所示:

ItemsSource = items.Items;

6 - 为您的DataTemplate创建ListView,如下所示:  注意:删除按钮和数字具有相同的绑定

DataTemplate dt = new DataTemplate(() =>
            {
                var Number = new Label
                {
                    TextColor=Color.Black,
                    FontAttributes=FontAttributes.Bold,
                    HorizontalOptions = LayoutOptions.StartAndExpand
                };
               Number.SetBinding(Label.TextProperty, new Binding("Number"));
                var Deletebutton = new Button { Text = "Delete", HorizontalOptions = LayoutOptions.StartAndExpand  };
                Deletebutton.SetBinding(Button.CommandParameterProperty, new Binding("Number"));
                Deletebutton.Clicked += DeleteSerial;
                return new ViewCell
                {
                    View = new StackLayout
                    {
                        Orientation = StackOrientation.Horizontal,
                        VerticalOptions = LayoutOptions.FillAndExpand,                          
                        Children =
                        {
                            Number,
                            Deletebutton
                        }
                    }
                };
            });
 YourListView.ItemTemplate = dt;

7 - 这是删除按钮的实现:

 public void DeleteSerial(object sender,EventArgs e)
            {
                var item = (Xamarin.Forms.Button)sender;
                SerialClass listitem = (from itm in items.Items
                                        where itm.Number == item.CommandParameter.ToString()
                             select itm)
                            .FirstOrDefault<SerialClass>();
            items.Items.Remove(listitem);             
        }