Xamarin Forms Bind Array element inside listView

Question

need to ask you a hand with this one. I'm currently developing a Xamarin Forms solution using MVVM and i'm in a new situation right now.

I've got a listView with items made by this class

 public class City
{
    public int Key { get; set; }
    public string Value { get; set; }
    public List<string> Words{ get; } = new List<string> { "One", "Two", "Three" };
}

What I want to achieve is to display a label text created using the Words list elements indicized by Key. Something like

Words[Key]

Example

 <ListView
        ItemsSource="{Binding Cities}">
        <ListView.ItemTemplate>
            <DataTemplate>
            <ViewCell>
                <StackLayout
                    HorizontalOptions="FillAndExpand"
                    VerticalOptions="StartAndExpand">

                    <Label Text="{Binding Words[Key]}"
                        FontSize="18"
                        TextColor="Black"
                        VerticalOptions="StartAndExpand" />        
                </StackLayout>

                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

The label text binding doesn't work, but tecnically is what i need to achieve. For example, if i use Words[0] it will work and returns 'One'

My ViewModel is pretty simple.

 public class TestViewModel : INotifyPropertyChanged
{
    public ObservableCollection<City> Cities { get; set; }

    public TestViewModel()
    {
        Cities = GetCities();
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected void OnPropertyChanged([CallerMemberName] string name = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
    }

    public ObservableCollection<City> GetCities()
    {
        return new ObservableCollection<City>
        {
            new City {Key = 1, Value = "Mumbai"},
            new City {Key = 2, Value = "New York"},
            new City {Key = 3, Value = "Milan"},
            new City {Key = 4, Value = "Rome"}
        };
    }
}

Do i need to create a property for indexing? In my opinion the problem is that i'm inside a list and already have an index to use.

Thanks for help guys

Setting ItemsSource will automatically do this for you. You don't have to specifically give each element to ViewCell. Just set Text="{Binding Value}" and it shows the list with same order as your ObservableCollection. Also fire OnPropertyChanged on ObservableCollection's set method probably use a backing field — shanranm
I'm sorry, I made a little mistake. I wanted to write Values[Key] because I don't want the Value property, what I want is display a List element value. I update the question changing names for better understanding — BlackShawarna
In this case you can make use of IValueConverter. Take a look, if you still have any questions, update with your implementation of converter — shanranm

Jack Hua Jack Hua · Accepted Answer · 2018-10-29T07:10:34

You can modify your model :

 public class City
    {
        public int Key { get; set; }
        public string Value { get; set; }
        public List<string> Words { get; } = new List<string> { "One", "Two", "Three" };

        public string myValue
        {
            get
            {
                return Words[Key];
            }
            set {}
        }
    }

And in your .xmal, just set Text="{Binding myValue}" and it will display a list element value of Words.

Xamarin Forms Bind Array element inside listView

1 Answers