How to get SelectedItem data using MVVM Toolkit library?

437 views Asked by At

I am trying to fire an event or do any action after clicking any of the items in the list:

enter image description here

I am using the library CommunityToolkit.Mvvm but I do not know how to get its data after clicking or selecting any item. For example show an alert and showing its information after clicking.

I have this so far:

<ListView ItemsSource="{Binding Almacenes}" HasUnevenRows="True" SelectedItem="{Binding SelectedItem}" >
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <Grid Padding="20">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <Image Grid.RowSpan="2"
                           Source="empresita.svg"
                           Aspect="AspectFill"
                           HeightRequest="60"
                           WidthRequest="60" />
                        <Label Grid.Column="1" Padding="15,0,0,0" 
                           Text="{Binding nombre}"
                           FontAttributes="Bold"
                            FontSize="16"/>
                        <Label Grid.Row="1" Padding="15,0,0,0"
                           Grid.Column="1"
                           Text="descripcion"
                           FontAttributes="Italic"
                           VerticalOptions="End" 
                               FontSize="16"/>
                    </Grid>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

backend:

 [ObservableProperty]
        List<Almacenes> _almacenes;

        [ObservableProperty]
        Almacenes _selectedItem;


        public SeleccionAlmacenViewModel()
        {
            Almacenes = new List<Almacenes>()
            {
                new Almacenes()
                {
                    nombre = "Tomato"
                },
                new Almacenes()
                {
                    nombre = "Pizza"
                },
                new Almacenes()
                {
                    nombre = "Romaine"
                },
            };
        }

        // aqui se debe cargar la lista
        public SeleccionAlmacenViewModel(List<Almacenes> almacenes)
        {
            Almacenes = new List<Almacenes>();
            CargarAlmacenes(almacenes);
            
        }
        
        private void CargarAlmacenes(List<Almacenes> almacenes)
        {
            Almacenes = almacenes;
        }

There is no error but I cannot make this work. How do I get selected item data using this toolkit? Like I am trying to fire this in a method because I will be coding myself inside the fired method.

EDIT: actually I do not know what I am doing but I tried this and did not work either :(

[ObservableProperty]
[NotifyCanExecuteChangedFor(nameof(GetAlmacenCommand))]
private Almacenes _selectedItem;

[RelayCommand]
public async Task GetAlmacen()
{
   await AppShell.Current.DisplayAlert("Error", "TESTING", "OK");
}
1

There are 1 answers

0
Liyun Zhang - MSFT On BEST ANSWER

You can try to use the CommunityToolkit.Maui package to convert the ListView's ItemSelected event to command.

In the xaml:

xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
<ListView ItemsSource="{Binding Almacenes}" HasUnevenRows="True" SelectedItem="{Binding SelectedItem Mode=TwoWay}" >
    .....
    <ListView.Behaviors>
          <toolkit:EventToCommandBehavior
                EventName="ItemSelected"
                Command="{Binding GetAlmacen}" />
    </ListView.Behaviors>
</ListView>

And you can get the SelectedItem data from the _selectedItem;, because you set the SelectedItem="{Binding SelectedItem Mode=TwoWay}".