Command button does not work inside ListView Xamarin Forms MVVM

Question

Command button does not work inside ListView Xamarin Forms MVVM

Navigation

#1 by (3 votes)
#2 by (0 votes)

3

I'm trying to create a button with the Command event inside a ListView in MVVM , but it's not falling on the event in ViewModel .

How can I make this button Command access your method in ViewModel ?

And also, how do I get the value of Label "lblCEP" in this event Command to be able to move 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;
           }
       });

c# mvvm listview xamarin xamarin-forms

asked by anonymous 26.12.2016 / 14:32

2 answers

0

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

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

So it looks 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 both the Command and the CommandParameter are to work, I found the solution and answered this in my other question: Passing and Catching the CommandParameter of a Xamarin Forms Button

27.12.2016 / 18:36

I have problems with this form to pass the data through PHP, but I can not get the error What is the maximum depth level?

score 3 · Accepted Answer

Actually, if the MVVM setting is correct, it works fine.

However, the behavior is triggered not in vm but in the class being listed.

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

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

The second is to use this link component.
Blog with example: link

<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 {b:RelativeContext MainPage} property tells you that the vm set for this view (MainPage) will be the 'BindingContext'. In this way, the button's command will be triggered on vm MainPageViewModel .

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

To get the zip value and pass as a parameter use the CommandParameter

I use a different approach than yours, but what you're looking for ( link ) I believe the code to get the parameter would look like this:

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