xamarin表单:滑动删除

时间:2016-03-01 14:21:01

标签: c# json xamarin-forms

如何在我的笔记列表应用中添加滑动以删除。我正在使用xamarin表单。我搜索了xamarin表格样本但找不到它。我还尝试使用menuItem等列表视图性能选项,但我不知道如何在我的代码中调整它。有人可以帮我这个吗? 我的代码如下:

public partial class MyPage
{
    List<Note> notes;
    string NotesFile {
        get {
            var documents = Environment.GetFolderPath (Environment.SpecialFolder.Personal);
            return System.IO.Path.Combine (documents, "notes.json");
        }
    }
    public MyPage()
    {
        BuildContent();
        LoadNotes ();
        ReloadListContents ();

        AddNoteButton.Clicked += (sender, args) => {
            var note = new Note("typ...");
            notes.Add(note);
            EditNote(note);
        };

        NoteListView.ItemTapped += (sender, row) =>
        {
            NoteListView.SelectedItem = null;
            Note note = (Note)row.Item;
            EditNote(note);
        };

        buttonDelete.Clicked += (sender, args) =>{
            notes.RemoveAt(0);
            DisplayAlert("Delete", "Row deleted", "OK");
        };
    }

} MyPage.cs

{
    public ListView NoteListView = new ListView ();
    public Button AddNoteButton;
    public Button buttonDelete;
    private void BuildContent() 
    {
        AddNoteButton = new Button
        {
            Text = "Add New Note",
            TextColor = Color.White,
            HorizontalOptions = LayoutOptions.Center,
            VerticalOptions = LayoutOptions.Center
        };
        buttonDelete = new Button
        {
            Text = "Delete Note ",
            TextColor = Color.White,
            HorizontalOptions = LayoutOptions.Center,
            VerticalOptions = LayoutOptions.Center
        };

        Content = new StackLayout
        {
            BackgroundColor = Color.Black,
            Children = {
                new Label {
                    Text = "Note Taker",
                    TextColor = Color.White
                },
                NoteListView,
                AddNoteButton,
                buttonDelete
            }
        };
    }

1 个答案:

答案 0 :(得分:0)

如果有人希望获得Xaml响应,我将使用CS代码而不是XAML(我的首选)来回答这个问题,请在下面添加评论,我将在CS旁边编写XAML。

因此,为了完成您在Xamarin.Forms中对ListView元素提出的要求,必须首先创建要在ListView的每个单元中显示数据的ViewCell,并为其提供上下文操作。这是一个示例:

   public class CustomViewCell : ViewCell
        {
            public CustomViewCell()
            {
                //instantiate each element we want to use.
                var image = new CircleCachedImage
                {
                    Margin = new Thickness(20, 10, 0, 10),
                    WidthRequest = App.ScreenWidth * 0.15,
                    HeightRequest = App.ScreenWidth * 0.15,
                    Aspect = Aspect.AspectFill,
                    BorderColor = Color.FromHex(App.PrimaryColor),
                    BorderThickness = 2,
                    HorizontalOptions = LayoutOptions.Center
                };
                var nameLabel = new Label
                {
                    Margin = new Thickness(20, 15, 0, 0),
                    FontFamily = "Lato",
                    FontAttributes = FontAttributes.Bold,
                    FontSize = 17
                };
                var locationLabel = new Label
                {
                    Margin = new Thickness(20, 0, 0, 5),
                    FontFamily = "Lato",
                    FontSize = 13
                };
                //Create layout
                var verticaLayout = new StackLayout();
                var horizontalLayout = new StackLayout() { BackgroundColor = Color.White };

                //set bindings
                nameLabel.SetBinding(Label.TextProperty, new Binding("Name"));
                locationLabel.SetBinding(Label.TextProperty, new Binding("Location"));
                image.SetBinding(CircleCachedImage.SourceProperty, new Binding("Image"));

                //Set properties for desired design
                horizontalLayout.Orientation = StackOrientation.Horizontal;
                horizontalLayout.HorizontalOptions = LayoutOptions.Fill;
                image.HorizontalOptions = LayoutOptions.End;


                //add views to the view hierarchy
                horizontalLayout.Children.Add(image);
                verticaLayout.Children.Add(nameLabel);
                verticaLayout.Children.Add(locationLabel);
                horizontalLayout.Children.Add(verticaLayout);

                //HERE IS THE MOST IMPORTANT PART
                var deleteAction = new MenuItem { Text = "Delete", IsDestructive = true }; // red background


                deleteAction.Clicked += async (sender, e) => {
                    //Here do your deleting / calling to WebAPIs
                    //Now remove the item from the list. You can do this by sending an event using messaging center looks like: 
                    //MessagingCenter.Send<TSender,string>(TSender sender, string message, string indexOfItemInListview)
                };
                // add to the ViewCell's ContextActions property
                ContextActions.Add(deleteAction);

                // add to parent view
                View = horizontalLayout;
            }
        }

现在,您必须对ListView执行以下操作:

listView = new ListView();
lstView.ItemTemplate = new DataTemplate(typeof(CustomViewCell));

在具有ListView的同一内容页面中,还必须订阅MessagingCenter,以侦听与上述自定义视图单元格中设置的参数相同的参数。如果您以前没有使用过MessagingCenter,请阅读提供的链接。然后,您必须在此方法内部从列表视图中删除该项目,并将索引发送到该方法。

如果有人需要进一步的解释,请在下面添加评论,并对此文章进行修改。