繁体   English   中英

编辑Xamarin Forms中ListView的所选项的标签

[英]Edit the Label of the selected item of the ListView in Xamarin Forms

我需要根据ListView所选Slider的值编辑Label值。 当Slider的值大于2且小于20时,Label的文本应更改为“已编辑”。我唯一拥有的是附加的以下代码。 它会以不同的方式完成吗?

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";
        }
    }
}

附上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>

还有至少两种方法可以做到:

  • 使用TwoWay Mode绑定Slider Value 然后在值的setter中更改绑定到标签的值(在该部分中类似于您在上面的代码中所做的那样)
  • Label Value绑定到Slider Value并声明Converter类,它将Slider Value转换为所需的Label Value

解决方案:正如Ivan所说,您可以使用Converter

请参阅以下代码。

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();
    }
}

当数据在OneWayTwoWay绑定中从源移动到目标时,将调用Convert方法。 value参数是数据绑定源中的对象或值。 该方法必须返回数据绑定目标类型的值。

在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>

在此输入图像描述

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM