Xamarin Forms Command Binding inside ListView is not working

Question

i'm trying to bind a command to a button inside a listView, but without success. I follow all other answers posted here, like this one: Xamarin Forms Button Command binding inside a ListView The actual result is that nothing happens. A thing that i notice is that visual studio, when i type after x:Reference suggests me just GridWebcam, like if it doesn't see other reference elements. What can i do?

Here my code:

    <ContentPage 
             ...
             x:Name="WebcamList">
    <ContentPage.Resources>
        ...
    <ContentPage.Content>
        <ListView ItemsSource="{Binding ListOfWebcam}"
                  SeparatorVisibility="None"
                  CachingStrategy="RecycleElement"
                  RowHeight="250"
                  VerticalOptions="FillAndExpand"
                  x:Name="ListWebcam">

            <ListView.Header>
                <StackLayout x:Name="HeaderStackLayout"
                                   Padding="5,25,0,30"
                                   Orientation="Horizontal"
                                   HorizontalOptions="FillAndExpand">

                        <Label  x:Name="LabelHeader"
                                  Text="Webcam:"
                                  FontSize="Large"
                                  FontAttributes="Bold"
                                  TextColor="{x:Static statics:Palette.PrimaryColor}"
                                  VerticalOptions="Center"
                                  HorizontalOptions="Start" Margin="10,0,0,0"/>
                </StackLayout>
            </ListView.Header>

            <ListView.ItemTemplate>
                <DataTemplate>

                    <controls:ExtendedViewCell IsEnabled="False">
                        <controls:ExtendedViewCell.View>
                            <Grid x:Name="GridWebcam">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>

                                <Frame Grid.Column="1"
                                       Grid.RowSpan="2"
                                       CornerRadius="20"
                                       BackgroundColor="{x:Static statics:Palette.PrimaryColor}"
                                       VerticalOptions="FillAndExpand"
                                       HorizontalOptions="FillAndExpand"
                                       HasShadow="True"
                                       Margin="5,10">

                                    <StackLayout>

                                        <Label Text="{Binding t_str_vid,Converter={StaticResource WebcamNameConverter}}"
                                               FontSize="Medium"
                                               TextColor="White"
                                               FontAttributes="Bold"
                                               HorizontalOptions="FillAndExpand"
                                               VerticalOptions="FillAndExpand">

                                        </Label>

                                        <Label TextColor="White"
                                               FontSize="Medium"
                                               Text="{Binding direzione,Converter={StaticResource DirectionToStringConverter}}"/>

                                        <StackLayout Orientation="Horizontal">
                                            <ffimageloading:CachedImage LoadingPlaceholder="Rolling.gif"
                                                                        DownsampleToViewSize="False"
                                                                        VerticalOptions="FillAndExpand"
                                                                        HorizontalOptions="StartAndExpand"
                                                                        Source="{Binding image1}"/>

                                            <iconize:IconButton Text="fas-play-circle"
                                                                FontSize="50"
                                                                HorizontalOptions="EndAndExpand"
                                                                VerticalOptions="EndAndExpand"
                                                                TextColor="White"
                                                                Command="{Binding BindingContext.OpenVideoWebcamCommand, Source={x:Reference WebcamList}}"
                                                                CommandParameter="{Binding .}"
                                                                BackgroundColor="Transparent"/>
                                        </StackLayout>
                                    </StackLayout>
                                </Frame>
                            </Grid>
                        </controls:ExtendedViewCell.View>
                    </controls:ExtendedViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </ContentPage.Content>
</ContentPage>
      ```

public class WebcamListViewModel : BaseViewModel
{
    public ICommand OpenVideoWebcamCommand { set; get; }

    private List<Webcam> _ListOfWebcam { get; set; }
    public List<Webcam> ListOfWebcam
    {
        get { return _ListOfWebcam; }
        set
        {
            _ListOfWebcam = value;
            OnPropertyChanged();
        }
    }

    private Task DownloadFramesTask;

    CancellationTokenSource tokenSourceDownloadFrames = new CancellationTokenSource();

    CancellationToken cancellationTokenDownloadFrames;

    public WebcamListViewModel(INavigationService navigationService, IApiAutostradeManagerFactory apiAutostradeManagerFactory) : base(navigationService,apiAutostradeManagerFactory)
    {

        OpenVideoWebcamCommand = new Command<Webcam>(async (webcam) => {
            await navigationService.NavigateAsync(Locator.WebcamVideoPopUpPage);
            Messenger.Default.Send(new InfoWebcamVideoMessage(webcam.c_mpr, webcam.c_uuid, webcam.t_str_vid));
        });     
}

I am also facing the same issue : https://stackoverflow.com/questions/67970649/viewmodel-method-call-from-listview-itemtemplate-in-xamarin-forms — Rakesh Ravi G, Jun 15 '21 at 17:23

score 2 · Accepted Answer · answered Aug 05 '19 at 17:17

2

Well it could be related to this mysterious controls:ExtendedViewCell of yours :)

Also did you disable the ListView selection: <ListView ... SelectionMode="None" /> ?

answered Aug 05 '19 at 17:17

Roubachof

3,351
3
23
34

Thanks Roubachof, I was looking for the problem where the problem was not. The problem was simply the selection of Listview's item disabled. I trusted too much in Visual Studio that didn't suggest the ListView bindingContext. So, i removed this line: `IsEnabled="False"` from ExtendedViewCell tag and now it's working. Thanks again. – Giuseppe Pennisi Aug 06 '19 at 06:39
I am also facing the same issue: https://stackoverflow.com/questions/67970649/viewmodel-method-call-from-listview-itemtemplate-in-xamarin-forms . Here I need to select listview item, if we don't select the image. – Rakesh Ravi G Jun 16 '21 at 05:58

score 0 · Answer 2 · answered Aug 06 '19 at 02:43

As Roubachof said that I don't know if it is related to controls:ExtendedViewCell,please check if you have binding BindingContext, then you can take a look the following code:

 <StackLayout>
        <ListView x:Name="listview1" ItemsSource="{Binding persons}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout Orientation="Horizontal">
                            <Label Text="{Binding Id}" />
                            <Label Text="{Binding name}" />
                            <Button
                                Command="{Binding BindingContext.command, Source={x:Reference listview1}}"
                                CommandParameter="{Binding Id}"
                                Text="Delete item" />
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>

    public partial class Page1 : ContentPage
{
    public ObservableCollection<person> persons { get; set; }
    public RelayCommand1 command { get; set; }

    public Page1 ()
    {
        InitializeComponent ();
        persons = new ObservableCollection<person>();

        for(int i =0;i<20;i++)
        {
            person p = new person()
            {
                Id = i,
                name = "cherry" + i

            };
            persons.Add(p);

            command = new RelayCommand1(obj => method1((int)obj));
        }
        this.BindingContext = this;
    }
    public void method1(int Id)
    {
        persons.RemoveAt(Id);
        //IEnumerable<person> list = persons.Where(x => x.Id == Id);

        //foreach (person m in list)
        //{

        //}
    }
}

public class person
{
    public int Id { get; set; }
    public string name { get; set; }
}

Xamarin Forms Command Binding inside ListView is not working

2 Answers2