CODEWITHSUNDEEP
c#xamlxamarin.forms
Phuluso Ramulifho
Phuluso Ramulifho

Reputation: 498

How can I manage the visibility of a button in a listview row using mvvm?

I have a listview that has a ViewCell, and inside the view cell I have two buttons,when one button is clicked it hides its visibility and triggers the visibility of the other button, the problem I'm facing is that when I click a button of a row it updates the visibility of buttons in other rows too. How can I update the visibility of only the clicked button? Here is what I have done:

<ListView.ItemTemplate>
    <DataTemplate>
        <ViewCell>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                     <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>

                <Label Text="{Binding Notes}" Grid.Column="0" Grid.Row="0"/>
                <Button Visual="Material" Text="Start" TextColor="White" 
                        BackgroundColor="#28a745"
                        IsVisible="{Binding Source={x:Reference TimesheetDetailsPage},
                                   Path=BindingContext.IsStartVisible}"
                        Grid.Column="2" Grid.Row="0"
                        Command="{Binding Source={x:Reference TimesheetDetailsPage},
                                 Path=BindingContext.StartCommand}"
                        CommandParameter="{Binding}"/>
                <Button Visual="Material" Text="Stop" TextColor="White" 
                        BackgroundColor="#dc3545"
                        IsVisible="{Binding Source={x:Reference TimesheetDetailsPage},
                                   Path=BindingContext.IsStopVisible}"
                        Grid.Column="2" Grid.Row="0"
                        Command="{Binding Source={x:Reference TimesheetDetailsPage},
                                 Path=BindingContext.StopCommand}"
                        CommandParameter="{Binding}"/> 
            </Grid>
        </ViewCell>
    </DataTemplate>
</ListView.ItemTemplate>

Here is the code in my viewModel:

public ICommand StartCommand => new Command( async (object item) => {
    TimeSheetTrack myItem = item as TimeSheetTrack;

    IsStartVisible = false;
    IsStopVisible = true;

    UserDialogs.Instance.ShowLoading("Updating timer...");
    await Start(myItem);
    UserDialogs.Instance.HideLoading();

});


public ICommand StopCommand => new Command( async (object item) => {

    TimeSheetTrack myItem = item as TimeSheetTrack;

    IsStartVisible = true;
    IsStopVisible = false;

    UserDialogs.Instance.ShowLoading("Stopping timer...");
    await Stop(myItem);
    UserDialogs.Instance.HideLoading();

});

Upvotes: 0

Views: 271

Answers (1)

Nikhil
Nikhil

Reputation: 3387

You have referenced the visibility of all the buttons to the Page using 

IsVisible="{Binding Source={x:Reference TimesheetDetailsPage},
                                   Path=BindingContext.IsStartVisible}"

You need to have the visibility set in the Model of the Items, so each of the Items has its own Start and Stop Button Visiblity. So if you do it that way then the code will change to this:-

IsVisible="{Binding IsStartVisible}"

Let me know if you face difficulties.

Upvotes: 1

Related Questions