Ndtyjky

I have a ListView with dynamically added items. Every row in the list contains a Label, a Switch and a Button. The respective Button should only be visible when the Switch for that ViewCell is toggled. The respective Button should also have a Command that is specific to that item in the list. How can I achieve this? I am using the MVVM pattern.

<ListView HorizontalOptions="FillAndExpand" ItemsSource="{Binding SomeList}">

    <ListView.ItemTemplate>

        <DataTemplate>

            <ViewCell>

                <StackLayout HorizontalOptions="FillAndExpand" Orientation="Horizontal">

                    <Label

                            HorizontalOptions="StartAndExpand"

                            Text="{Binding SomePropertyFromSomeList}"

                            VerticalOptions="Center" />

                    <Switch />

                    <Button

                            Command="{Binding DoSomethingSpecificToThisSwitch}"

                            IsVisible="{Binding VisibleWhenThisSwitchIsToggled}"

                            Text="{Binding AlsoDependentOnWhichSwitch}" />

                </StackLayout>

            </ViewCell>

        </DataTemplate>

    </ListView.ItemTemplate>

</ListView>

Best way I find to tackle this, is to use a CommandParameter and decide what to do in your ViewModel based on the context of the ViewCell data.

If you use Binding, you can bind to the whole context of the current data by selecting a . ( dot ), that way the data from the current ViewCell is passed to your ViewModel.

Let's show how you code this...
Your View should look like this

<?xml version="1.0" encoding="utf-8"?>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             xmlns:local="clr-namespace:TestCommand"

             x:Name="TestPage"

             x:Class="TestCommand.MainPage">

    <StackLayout>

        <ListView ItemsSource="{Binding Persons}" RowHeight="50">

            <ListView.ItemTemplate>

                <DataTemplate>

                    <ViewCell>

                        <StackLayout>

                            <Label Text="{Binding Name}" />

                            <Button Text="Click" Command="{Binding DoCommand, Source={x:Reference TestPage}}" CommandParameter="{Binding .}" />

                        </StackLayout>

                    </ViewCell>

                </DataTemplate>

            </ListView.ItemTemplate>

        </ListView>

    </StackLayout>

</ContentPage>

Note that you need to provide a Name for your page! With that you can point to the same command in each ViewCell. But pass in the current ViewCell data with the Command Parameter.

In your ViewModel you than can act upon the 'selected' data... and do something specific like so:

public List<Person> Persons { get; set; } = new List<Person>() { new Person() { Name = "Glenn Versweyveld" }, new Person() { Name = "John Do" } };



private Command<Person> _doCommand;

public Command<Person> DoCommand => _doCommand ?? (_doCommand = new Command<Person>((Person obj) => HandlePerson(obj)));



private void HandlePerson(Person obj)

{



}