CODEWITHSUNDEEP
mauimaui-community-toolkit
Enrico
Enrico

Reputation: 6214

Binding ContextActions MenuItem with CommunityToolkit.Mvvm in MAUI

I have a problem in binding a ReplyCommand to a MenuItem in the ContextAction.

<ListView x:Name="listDictionaries" ItemsSource="{Binding Dictionaries}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <VerticalStackLayout>
                    <Label Text="{Binding Name}"
                            FontSize="18"
                            FontAttributes="Bold" />
                </VerticalStackLayout>
                <ViewCell.ContextActions>
                    <MenuItem Text="Set as default"
                       Command="{Binding Source={x:Reference listDictionaries}, Path=BindingContext.SetDefaultCommand}"
                       CommandParameter="{Binding .}" />
                </ViewCell.ContextActions>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

I associated to this view a ViewModel and in the code of the page I wrote:

DictionaryListViewModel vm;

public DictionaryList(DictionaryListViewModel model)
{
    vm = model;
    BindingContext = vm;
    
    InitializeComponent();
}

protected override async void OnAppearing()
{
    base.OnAppearing();

    await vm.Init();
}

The Init() reads from the database a list of Dictionary items (Dictionary is my class not the NET class). In the associated ViewModel I created this command:

[RelayCommand]
public async Task SetDefault(Dictionary dictionary)
{
    Message = "Set as default: " + SelectedDictionary.Name;
}

When I run the application, I can see a black screen but the items are there. As you can see, I can click on one item an display the value of the cell in an DisplayAlert but the binding is not working.

enter image description here

If I remove the ViewCell.ContextActions, the list displays the item as expected.

What is correct way to bind the ReplyCommand to the MenuItem?

Update

I followed the example in the Microsoft documentation but I still have issues.

The only way I found to have this MenuItem working is to use Clicked and then in the code behind invoke a function.

<MenuItem Text="Set as default"
            Clicked="OnSetAsDefault"
        CommandParameter="{Binding .}" />

and then in the code

public async void OnSetAsDefault(object sender, EventArgs e)
{
    var mi = ((MenuItem)sender);
    Dictionary dictionary = (Dictionary)mi.CommandParameter;
}

It is working but at this point I don't understand the meaning of the Command or RelayCommand.

Upvotes: 1

Views: 338

Answers (1)

Liyun Zhang - MSFT
Liyun Zhang - MSFT

Reputation: 14244

I can reproduce your problem in my project on the windows platform. But it worked well in the android platfrom.

It seems a new issue when you use the [RelayCommand] attribute on a method which needs a parameter. If you delete the parameter, it will work. Such as:

[RelayCommand]
public async Task SetDefault()
{
    Message = "Set as default: " ;
}

And you can also use the ICommand instead of the RelayCommand just as the official sample which used the INotifyPropertyChanged interface instead of the ObservableObject class did. You can check the official sample about Binding ContextActions MenuItem with MVVM.

I have tested using ICommand of the INotifyPropertyChanged interface instead of the RealyCommand of the ObservableObject. It worked.

In addition, you can also try to post a new issue for CommunityToolkit.Mvvm in MAUI on the github.

Upvotes: 1

Related Questions