ViewCell execue command from ViewModel

Question

I want to bind my MenuItem from my ViewCell which has a ViewModel. This is my View cell, Do any one know the proper way do this type of binding? I have an ObservableCollection<object> that populate my ListView, this the cell I need to bind.

<?xml version="1.0" encoding="UTF-8" ?>
<ViewCell
    x:Class="DataTemp.Controls.DeviceViewCell"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Name="this">
    <ViewCell.ContextActions>
        // I've been trying these two ways
        <MenuItem Command="{Binding Source={x:Reference this}, Path=BindingContext.DeviceCommand}" Text="Call" />
        <MenuItem Command="{Binding DeviceCommand}" Text="Call" />
    </ViewCell.ContextActions>
    <ViewCell.View>

        <StackLayout Padding="10">
            <Label Text="{Binding Name}" />
            <Label Text="{Binding Number}" />

        </StackLayout>
    </ViewCell.View>
</ViewCell>

Here is my view model I'm trying to catch the event with a a breakpoint, but i never get into the method OnDeviceCommnad.

public class DeviceViewCellViewModel : BaseViewModel, IDevice
    {
        public string Number
        {  
            get
            {
                return _numberDevice;
            }
            set
            {
                _numberDevice = value;
                OnPropertyChanged("Number");
             }
        }
        public string Name
        {
            get
            {
                return _nameDevice;
            }
            set
            {
                _nameDevice = value;
                OnPropertyChanged("Number");
            }
        }

        public ICommand DeviceCommand { get; set; }
        private string _nameDevice;
        private string _numberDevice;
         

        public DeviceViewCellViewModel()
        {
            DeviceCommand = new Command(OnDeviceCommnad);
        }

        private void OnDeviceCommnad()
        {
            
        }
    }

Are there any binding errors that show in the output console? As an example: [0:] Binding: 'LoginClickeddCommand' property not found on 'xxxx.ViewModels.LoginViewModel', target property: 'xxxx.Controls.CustomButton.Command' — Andrew
no, not at all, but neither let me execute the command @Andrew — E.Rawrdríguez.Ophanim
Hi, whehter the label inside ViewCell shows? You could share the sample project link here, I will check that. — Junior Jiang
@JuniorJiang-MSFT yes sir ty I leave here the repo: github.com/Gatoreno/DateTemplatePractice/blob/main/DataTemp/… — E.Rawrdríguez.Ophanim
@E.Rawrdríguez.Ophanim Thanks for sharing, I have updated the answer. You could have a look when you have time. — Junior Jiang

Junior Jiang Junior Jiang · Accepted Answer · 2021-03-03T05:48:12

If you not need to pass a parameter, the second way should work.

<MenuItem Command="{Binding DeviceCommand}" Text="Call" />

And in Model sample code could as follows:

public Command DeviceCommand { get; private set; }

public DeviceViewCellViewModel()
{
    DeviceCommand = new Command(() =>
    {
        // Execute logic here
    });
}

=============================Update==================================

From shared sample, I found that the binded MainViewModel not using DeviceViewCellViewModel, therefore the command will not be invoked.

Modify the folloing code inside MainViewModel:

PaymentsAndDevices.Add(new Devices()
{
    Number = rdn.Next().ToString(),
    Name = "I'm a device"
});

as follows:

PaymentsAndDevices.Add(new DeviceViewCellViewModel()
{
    Number = rdn.Next().ToString(),
    Name = "I'm a device"
});

Then OnDeviceCommnad method will be invoked.

ViewCell execue command from ViewModel

1 Answers