Collectionview SelectionChangeCommand doesn´t work with CommunityToolkit.Mvvm .NET MAUI

696 Views Asked by At

I have a simple project using Community Toolkit Mvvm tool and a collectionview. The issue is that the SelectionChangeCommand of the CollectionView doesn´t fired when I select an element of the collection. I created this project because on another more complex project the error is that it can't find the binding command on the viewmodel. I know that the connection between the view and viewmodel is working because the collectionview is filling with elements on the viewmodel and also I am able to change the visibility of the border through the binded property.

Sample project: https://github.com/luis95gr/MvvmError.App

Code

LoginPage (first page with collectionview)

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="MvvmError.Views.LoginPage"
         xmlns:models="clr-namespace:MvvmError.Models"
         Title="LoginPage">

<RefreshView VerticalOptions="FillAndExpand">
    <Border BackgroundColor="Red" IsVisible="{Binding Visible}" Stroke="Red" HorizontalOptions="FillAndExpand" Padding="0,0" Margin="0,0,0,0" VerticalOptions="FillAndExpand">
        <Border.StrokeShape>
            <RoundRectangle CornerRadius="40,0,0,0" />
        </Border.StrokeShape>
        <CollectionView Background="Transparent" ItemsSource="{Binding Messages}" SelectionMode="Single" SelectedItem="{Binding MessageSelected}"  SelectionChangedCommand="{Binding MessageSelectedCommand}">
            <CollectionView.ItemTemplate>
                <DataTemplate x:DataType="models:MessagesMessages">
                    <Grid RowDefinitions="100*" ColumnDefinitions="100*">
                        <Label Grid.Row="0" Text="{Binding Asunto}" />
                    </Grid>

                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>

    </Border>
</RefreshView>

LoginPageViewModel

public partial class LoginPageViewModel : ObservableObject
{
    [ObservableProperty]
    private MessagesMessages messageSelected;

    [ObservableProperty]
    private bool visible;

    public ObservableCollection<MessagesMessages> Messages { get; } = new();

    public LoginPageViewModel()
    {
        Visible = true;
        GetMessages();
    }


    [RelayCommand]
    async void MessageSelectedCommand()
    {
        var snackbar = Snackbar.Make("Hola");

        await snackbar.Show();
    }

    private void GetMessages()
    {
        Messages.Add(new MessagesMessages
        {
            Asunto = "Hola"
        });
        Messages.Add(new MessagesMessages
        {
            Asunto = "Hola1"
        });
        Messages.Add(new MessagesMessages
        {
            Asunto = "Hola2"
        });
        Messages.Add(new MessagesMessages
        {
            Asunto = "Hola3"
        });
    }

}

LoginPage.xaml.cs

public partial class LoginPage : ContentPage
{
   public LoginPage(LoginPageViewModel loginPageViewModel)
   {
       InitializeComponent();
       BindingContext= loginPageViewModel;
   }
}

MauiProgram.cs

builder.Services.AddTransient<LoginPage>();
builder.Services.AddSingleton<ViewModels.LoginPageViewModel>();
1

There are 1 best solutions below

0
On BEST ANSWER

you are not following the naming convention

The name of the generated command will be created based on the method name. The generator will use the method name and append "Command" at the end, and it will strip the "On" prefix, if present. Additionally, for asynchronous methods, the "Async" suffix is also stripped before "Command" is appeneded.

to generate a command named MessageSelectedCommand your method should look like

[RelayCommand]
async void MessageSelected()