Edit the Label of the selected item of the ListView in Xamarin Forms

Question

I need to edit the Label value according to the value of the selected Slider of the ListView. When the Slider has a value greater than 2 and less than 20 the text of the Label should change to "Edited" The only thing I have is the following code attached. Could it be done differently?

public partial class MainPage : ContentPage
{

    readonly List<Tarea> listaTarea = new List<Tarea>();
    public MainPage()
    {
        InitializeComponent();
        llenarLista();

        listaEjemplo.ItemsSource = listaTarea;
    }
    public void llenarLista()
    {

        listaTarea.Add(new Tarea{
            nombre = "Alex1",
            valor="10",
            descripcion = "Ejemplo"
        });
        listaTarea.Add(new Tarea
        {
            nombre = "Alex2",
            valor = "20",
            descripcion = "Ejemplo"
        });
        listaTarea.Add(new Tarea
        {
            nombre = "Alex3",
            valor = "30",
            descripcion = "Ejemplo"
        });
        listaTarea.Add(new Tarea
        {
            nombre = "Alex4",
            valor = "40",
            descripcion = "Ejemplo"
        });
        listaTarea.Add(new Tarea
        {
            nombre = "Alex5",
            valor = "50",
            descripcion = "Ejemplo"
        });
        /*
        if(listaTarea[2].valor.Equals("30"))
        {
            listaTarea[2].descripcion = "Cambiado";
        }*/
    }
    void Handle_ValueChanged(object sender, Xamarin.Forms.ValueChangedEventArgs e)
    {
        var sliders = sender as Slider;
        var item = sliders.Parent.BindingContext as Tarea;
        double valor = sliders.Value;


        if(valor > 2 && valor<20)
        {
            item.nombre = "Editado";
        }
    }
}

Attached the XAML

 <ListView x:Name="listaEjemplo" HasUnevenRows="True">  
    <ListView.ItemTemplate>  
        <DataTemplate>  
            <ViewCell>  
                <StackLayout Orientation="Horizontal">  
                    <StackLayout Orientation="Vertical">  
                        <Label Text="{Binding nombre}" Font="18"></Label> 
                        <Slider Minimum="0" Maximum="20" ValueChanged="Handle_ValueChanged"/>
                        <Label Text="{Binding descripcion}" TextColor="Gray"></Label> </StackLayout>  
                </StackLayout>  
            </ViewCell>  
        </DataTemplate>  
    </ListView.ItemTemplate>  
</ListView>
</StackLayout>

Answer 1

Solution: As Ivan said , you can use Converter

Refer to the following code.

public class ValueToTextConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if ((double)value < 20 && (double)value > 2)
        {
            return "Editado";
        }

        return "Ejemplo";
    }

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

The Convert method is called when data moves from the source to the target in OneWay or TwoWay bindings. The value parameter is the object or value from the data-binding source. The method must return a value of the type of the data-binding target.

in xaml

<ContentPage.Resources>
    <ResourceDictionary>
        <local:ValueToTextConverter x:Key="ValueToText" />
    </ResourceDictionary>
</ContentPage.Resources>


<StackLayout>
    <ListView x:Name="listaEjemplo" HasUnevenRows="True">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <StackLayout Orientation="Horizontal">
                        <StackLayout Orientation="Vertical">
                            <Label Text="{Binding nombre}" Font="18"></Label>
                            <Slider x:Name="slider" Minimum="0" Maximum="20" />
                            <Label Text="{Binding Source={x:Reference slider},
                                Path=Value,
                                Converter={StaticResource ValueToText}}" TextColor="Gray"></Label>
                        </StackLayout>
                    </StackLayout>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</StackLayout>

Answer 2

There are at least two more ways to do it:

• Bind the Slider Value with TwoWay Mode. Then in the setters of the value change the value bound to the label (in that part similar to what you did in the code above)
• Bind the Label Value to Slider Value and declare the Converter class that will convert Slider Value to the desired Label Value.