Command button does not work within Listview Xamarin Forms MVVM

Asked

Viewed 802 times

3

I’m trying to create a button with the event Command within a Listview on MVVM, but is not falling in the event ViewModel.

How do I get this button Command access your method on ViewModel ?

And also, how do I take the value of Label "lblCEP" at this event Command to be able to switch to another view ?

My code:

/// XAML

<ListView x:Name="lvEnderecos" RowHeight="205">
    <ListView.ItemTemplate>
      <DataTemplate>
        <ViewCell>
            <Label x:Name="lblCEP" Font="14" TextColor="Black" Text="{Binding CliEndCep, StringFormat='CEP: {0}'}"></Label>
              <Grid x:Name="GridControl3" RowSpacing="0" ColumnSpacing="0">
                <Grid.RowDefinitions>
                  <RowDefinition Height="25"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                  <ColumnDefinition Width="Auto" />
                  <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <StackLayout x:Name="stkManipularEndereco" Grid.Row="0" Grid.Column="0" Padding="5, 0, 0, 0" HeightRequest="25" WidthRequest="25">
                  <Button x:Name="btnEditarEndereco" BackgroundColor="Transparent" Image="editar2.png" HeightRequest="25" WidthRequest="25" Command="{Binding EditarEnderecoCommand}" />
                </StackLayout>
              </Grid>
            </StackLayout>
        </ViewCell>
      </DataTemplate>
    </ListView.ItemTemplate>
  </ListView>

/// Viewmodel

public ICommand EditarEnderecoCommand { get; protected set; }

        this.EditarEnderecoCommand = new Command(async () =>
        {
           try
           {
                await page.DisplayAlert("Alerta", "Você clicou aqui :)", "OK");
           }
           catch (Exception ex)
           {
                throw ex;
           }
       });

2 answers

3


In fact, if the configuration MVVM is correct, is working yes.

But in behavior is fired not in vm and yes in the class being listed.

Ex: If your listviewis being filled by List<Endereco> the button will 'trigger' the action within the class Endereco

I know two ways to solve this, the first ICommand within your class.

The second is to use this component https://www.nuget.org/packages/Corcav.Behaviors/
Blog with example: http://codeworks.it/blog/? p=216

<Button Text="{Binding NickName}">
 <b:Interaction.Behaviors>
   <b:BehaviorCollection>
      <b:EventToCommand CommandNameContext="{b:RelativeContext MainPage}"
       EventName="Clicked"
         CommandName="NickSelectedCommand"
         CommandParameter="{Binding NickName}" />
    </b:BehaviorCollection>
  </b:Interaction.Behaviors>
</Button>

The estate {b:RelativeContext MainPage} informs that the vm defined for this view (MainPage) will be Bindingcontext. This way, the button command will be triggered in the vm MainPageViewModel.

It is important to define the name of view x:Name="MainPage"> so that everything works properly.

To take the value of the zip code and pass as parameter use the property CommandParameter

I use a different approach than yours, but for what you research (https://developer.xamarin.com/guides/xamarin-forms/xaml/xaml-basics/data_bindings_to_mvvm/) I believe the code to take the parameter would look like this:

this.EditarEnderecoCommand = new Command<string>((parametro) =>
                {
                });

  • i made the button call on Behind code and it worked. I’ll do it there anyway, but I put the zip code Binding in the button Commandparameter, but how do I get this value there in code Behind ?

  • @Andreeh I added in reply

0

I found another way to do that in my case worked, but only if it was to make the event work Command without using the CommandParameter.

I added BindingContext="{Binding Source={x:Reference lvEnderecos}, Path=BindingContext}"referencing my Listview name.

So it was like this:

 <Button x:Name="btnEditarEndereco" BackgroundColor="Transparent" Image="editar2.png" HeightRequest="25" WidthRequest="25" BindingContext="{Binding Source={x:Reference lvEnderecos}, Path=BindingContext}" Command="{Binding EditarEnderecoCommand}"/>

If it is to work both, both the Command like the CommandParameter, I found the solution and answered in this my other question: Pass and grab the Commandparameter from a Xamarin Forms button

Browser other questions tagged

You are not signed in. Login or sign up in order to post.