How to show / hide a button inside a listview

Question

My listview is populated with data that comes from an API, but inside my listview I have a "statusDescr" label where it shows two states (paid / canceled) when the state on the label is paid the button appears and when it is not displayed.

I've already put the IsVisible property on the button, but I still have many problems

<ListView x:Name="lstView" SeparatorColor="#1C97D5" SeparatorVisibility="Default" HasUnevenRows="True" VerticalOptions="FillAndExpand">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell StyleId="disclosure">
                            <StackLayout>
                                <StackLayout Orientation="Horizontal" >
                                    <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand">
                                        <StackLayout>
                                            <Label Text="{Binding entityName}" TextColor="White" Font="14"/>
                                            <Label Text="{Binding cmPaymentDate}" TextColor="White" Font="14"/>
                                            <!--the label below is where the states will appear-->
                                            <Label x:Name="lblestado" Text="{Binding statusDescr}" TextColor="White" Font="14"/>
                                        </StackLayout>
                                        <StackLayout HorizontalOptions="EndAndExpand">
                                            <!--This is the button that should be true / false-->
                                            <Button  Text="Abrir" IsVisible="{Binding IsVisible}"  BackgroundColor="#1C97D5" TextColor="White"></Button>
                                            <Label Text="{Binding paymentAmount}" TextColor="White" Font="14" HorizontalOptions="End" />
                                        </StackLayout>
                                    </StackLayout>
                                </StackLayout>
                            </StackLayout>
                       </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>

code

try
            {

                string url = "payment/searchByDates/" + min + "/" + max + "/" + App.Nif + "/" + App.accountId;
                Service<Response<Payment>> servico = new Service<Response<Payment>>(url);

                var x = servico.GetByID(null).Result;

                if (x.GetType() == (typeof(Response<Payment>)))
                {
                    var pay = (Response<Payment>)x;

                        lstView.ItemsSource = pay.result;
                        UserDialogs.Instance.HideLoading();

                    //if (statusDescr == "Pago")
                    //{
                    //    lstView.ItemsSource = pay.result;
                    //    UserDialogs.Instance.HideLoading();
                    //    IsVisible = true;
                    //}
                    //else
                    //{
                    //    if (statusDescr == "Cancelado")
                    //    {
                    //        lstView.ItemsSource = pay.result;
                    //        UserDialogs.Instance.HideLoading();
                    //        IsVisible = false;
                    //    }
                    }
                }
                else
                {
                    DisplayAlert("Não encontrado", "Não foi encontrado os dados solicitados", "OK");
                }
            }
            catch (Exception ex)
            {
            DisplayAlert("Erro", ex.Message, "OK");
            UserDialogs.Instance.HideLoading();
        }

model

public class Payment
    {
        public string cmPaymentDate { get; set; }
        public string entityName { get; set; }
        public string statusDescr { get; set; }
        public string paymentNumber { get; set; }
        public float paymentAmount { get; set; }
        public bool IsVisible { get; set; }
    }
}

Answer 1

Use DataTrigger for Buttom to make Visible or InVisible Use the Below Code

<ListView x:Name="lstView" SeparatorVisibility="Default" HasUnevenRows="True" VerticalOptions="FillAndExpand">
<ListView.ItemTemplate>
    <DataTemplate>
        <ViewCell StyleId="disclosure">
            <StackLayout>
                <StackLayout Orientation="Horizontal" >
                    <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand">
                        <StackLayout>
                            <Label Text="{Binding entityName}" TextColor="White" Font="14"/>
                            <Label Text="{Binding cmPaymentDate}" TextColor="White" Font="14"/>
                            <Label x:Name="lblestado" Text="{Binding statusDescr}" TextColor="White" Font="14"/>
                        </StackLayout>
                        <StackLayout HorizontalOptions="EndAndExpand">
                            <Button  Text="Abrir" BackgroundColor="#1C97D5" TextColor="White">
                                <Button.Triggers>
                                    <DataTrigger TargetType="Button"  Binding="{Binding statusDescr" Value="canceled">
                                        <Setter Property="IsVisible" Value="False"/>
                                    </DataTrigger>
                                    <DataTrigger TargetType="Button"  Binding="{Binding statusDescr" Value="paid">
                                        <Setter Property="IsVisible" Value="True"/>
                                    </DataTrigger>
                                </Button.Triggers>
                            </Button>
                            <Label Text="{Binding paymentAmount}" TextColor="White" Font="14" HorizontalOptions="End" />
                        </StackLayout>
                    </StackLayout>
                </StackLayout>
            </StackLayout>
        </ViewCell>
    </DataTemplate>
</ListView.ItemTemplate>

Answer 2

I'm going to answer this while making two assumptions:

1. That the actual question that you're asking is "How can I bind the IsVisible property of a button to a property on my model?"
2. That your bindings for your properties are actually working. The only reason I bring this up is that I don't see INotifyPropertyChanged being used anywhere.

With the above assumptions, instead of adding an additional property to your model just to handle the view state, I recommend using a Value Converter to set the IsVisible property.

The converter would be something like:

public class StringToBoolConverter : IValueConverter
{
    public object Convert(
           object value, 
           Type targetType, 
           object parameter, 
           CultureInfo culture)
    {
        return (string)value == "paid";
    }

    public object ConvertBack(
           object value, 
           Type targetType, 
           object parameter, 
           CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Your view would then look like:

<ContentPage.Resources>
    <ResourceDictionary>
        <local:StringToBoolConverter x:Key="stringToBool" />
    </ResourceDictionary>
</ContentPage.Resources>

<!--your code --->

<Button  Text="Abrir" 
         IsVisible="{Binding statusDescr, Converter={StaticResource stringToBool}}"  
         BackgroundColor="#1C97D5" 
         TextColor="White" />

You can then remove the IsVisible property from your Payment model.

I would note that if you have any control over the API, it would be better have it send back a bool if there are only ever two states, or an Enum if there are more than 2 states. Strings can break too easy.