Binding MenuItem in ListView xamarin-CodePudding

i have 2 questions How can i bind a command from MenuItem using Mvvm?

<StackLayout>
    <Label Text="{Binding TestText}"/>
    <SearchBar TextColor="Black" SearchCommand="{Binding SearchBar}" Text="{Binding TextChanging}"/>
    <ListView ItemsSource="{Binding ListOfItems, Mode=TwoWay}" RefreshCommand="{Binding RefreshData}" IsPullToRefreshEnabled="True" IsRefreshing="{Binding IsRefreshing}" >
        <ListView.ItemTemplate>
            <DataTemplate>
                <TextCell TextColor="Black" Text="{Binding MainText}" Detail="{Binding SecondText}" >
                    <TextCell.ContextActions>
                        <MenuItem Command="{Binding Path=BindingContext.DeleteCommand}" CommandParameter="{Binding .}" Text="Delete"/>
                    </TextCell.ContextActions>
                </TextCell>

            </DataTemplate>
        </ListView.ItemTemplate>

    </ListView>
</StackLayout>

public Command DeleteCommand(object sender, EventArgs e)
    {
        return new Command(() =>
        {

        });
    }

I can't really binding this DeleteCommand using just MVVM. Question2: In runtime, my MenuItem look like this: enter image description here

and i want to look like this:enter image description here

How can i do that?

CodePudding user response：

When you use DeleteCommand to delete a selected item, you need get it and then update the itemsource for the listview.

Here's the code snippet for your reference:

Mode:

  public class MyModel
  {
     public string MainText { get; set; }
  }

ViewModel:

   public class MainPageViewModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        public ObservableCollection<MyModel> ListOfItems { get; set; }

        public ICommand DeleteCommand => new Command(Delete);
        public MainPageViewModel()
        {
            ListOfItems = new ObservableCollection<MyModel>()
            {
                new MyModel(){ MainText = "test1"},
                new MyModel(){ MainText = "test2"},
                new MyModel(){ MainText = "test3"},
                new MyModel(){ MainText = "test4"},
            };


        }
        private void Delete(object obj)
        {
            //get the item and cast it to Model
            var content = obj as MyModel;
            ListOfItems.Remove(content);
        }
    }

Xaml Code:

  <StackLayout>
        <ListView x:Name="items" ItemsSource="{Binding ListOfItems, Mode=TwoWay}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextCell TextColor="Black" Text="{Binding MainText}" >
                        <TextCell.ContextActions>
                            <MenuItem Command="{Binding Path=BindingContext.DeleteCommand , Source={x:Reference Name=items }}"  CommandParameter="{Binding .}" Text="Delete"/>
                        </TextCell.ContextActions>
                    </TextCell>

                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>

Tips: Don't forget to add Source={x:Reference Name=items } for the menu item.

Last but not least, bind the View and Model in Code behind or in Xaml:

BindingContext = new MainPageViewModel();