Forum Xamarin.Forms

Add two text items to a listView with Data Binding

ganesh96ganesh96 Member ✭✭✭
edited May 2020 in Xamarin.Forms

Hi,

I'm very new to this and I did some research on how to do this, but without succes. I hope someone here is able to help me.

So I have an API which returns a value (string) when a item is given as input. Let's say that when I put "item1" in the API, it returns "value1". Now I want to show "item1" and "value1" in the same list, where "item1" is on the far left and "value1" is on the far right. This would look something like this:

item1 value1
item2 value2
item3 value3
item4 value4

I've read that Data Binding is the solution to do this. I looked at this question: https://forums.xamarin.com/discussion/57739/listview-with-2-labels-one-left-andone-right . This seems to be the solution to my problem. However, I have no idea how Data Binding works and how to set it up. I've read some documentation about this and I'm able to bind some things (like styles), but not this.

For example, looking at this part of the question asked (see link above):

I can see "Text="{Binding Text}" ", but I have no idea how to make sure the label displays the correct item and value in the correct label.

It's a bit of a long story, but I hope my problem is clear.

Regards, Ganesh

Best Answer

  • ganesh96ganesh96 Member ✭✭✭
    Accepted Answer

    I found the solution:

    I use this code in the page where the listView is:

    Then I can use items.Add(new objectModel { id = "text" }); to add values to the listView. The link I gave before can then be used to plant different labels in the listView.

Answers

  • VmurilloTVmurilloT Member ✭✭

    objectModel{ var1 = item1, var2 = value2}

    You need a ObservableCollection<objectModel> in ViewModel and a <ListView> in the Page.
    in Listview, property ItemsSource={Binding ObservableCollectionName}... then

    Label text={Binding var1}
    Label text={Binding var2}

    the struct of ListView is...

    <ListView>
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <ViewCell>
                    <Grid>
                    <Grid.ColumnDefinitions>
                    ...
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                    ...
                    </Grid.RowDefinitions>
                                    <Label text={Binding var1}>
                    <Label text={Binding var2}>
                    .
                    .
                    .
    
  • ganesh96ganesh96 Member ✭✭✭

    Hi VmurilloT,

    Thanks for the response.

    I don't quite get your solution, so I tried something and maybe you can correct me. I did this for one label for now.

    I created a class called "objectModel.cs":

    You can see that I only have one string here, but this will eventually be two strings.

    Then, from the page where I want to add the values to "id" in "objectModel", I do this (when a button is pressed):

    Finally to show the values of "objectModel" in the listView, I do this:

    Now this doesn't work (no exceptions, the list just remains empty).

    Is this in the right direction? Or am I missing something completely?

    Regards, Ganesh

  • ganesh96ganesh96 Member ✭✭✭
    Accepted Answer

    I found the solution:

    I use this code in the page where the listView is:

    Then I can use items.Add(new objectModel { id = "text" }); to add values to the listView. The link I gave before can then be used to plant different labels in the listView.

Sign In or Register to comment.