Multiple List Data Retrieval in Xamarin forms

aashish Published at Dev

Aashish

    Person |     fruits         |  vegetables
______________________________________________
    P1     |    Apple Banana    |  tomato, spinach
    P2     |    Orange Apple    |  Onion, Garlic

I am learning few concepts. I have the data in above format. Could someone suggest which data structure is the best I can use in this case to retrieve data. Also could some one tell me how I can have multiple lists inside a scrollview? Can i use common template by defining design in app.xaml (for fruit, vegetable list)? How can i use the retrieved data from the the above table to populate in my ScrollViewList?

My Scroll view should look like :

ColeX - MSFT

Data Structure

public class Goods
{
    public string Name { get; set; }
}

public class GoodsList : List<Goods>
{
    public string Name { get; set; }
    public List<Goods> GoodsAll => this;
}


public class Person
{
    public string Name { get; set; }
    public List<GoodsList> List;
}

You need two pages , called them PersonPage and GoodsPage.

PersonPage

  //Xaml
 <ListView ItemsSource="{Binding list}" ItemSelected="ListView_ItemSelected">
        <ListView.ItemTemplate>
            <DataTemplate>
                <TextCell Text="{Binding Name}"/>
            </DataTemplate>
        </ListView.ItemTemplate>
 </ListView>

//Code
public partial class Page1 : ContentPage
{
    public List<Person> list { get; set; }

    public Page1()
    {
        InitializeComponent();

        var list1 = new GoodsList() { new Goods { Name = "Apple" } , new Goods { Name = "Banana" } };
        list1.Name = "Fruits";

        var list2 = new GoodsList() { new Goods { Name = "Tomato" }, new Goods { Name = "Spinach" } };
        list2.Name = "Vegetables";

        var list3 = new GoodsList() { new Goods { Name = "Apple" }, new Goods { Name = "Orange" } };
        list3.Name = "Fruits";

        var list4 = new GoodsList() { new Goods { Name = "Onion" }, new Goods { Name = "Garlic" } };
        list4.Name = "Vegetables";



        list = new List<Person>();
        list.Add(new Person
        {
            Name = "P1",
            List = new List<GoodsList>() { list1,list2}
        }) ;
        list.Add(new Person
        {
            Name = "P2",
            List = new List<GoodsList>() { list3, list4}
        });

        this.BindingContext = this;
    }

    private void ListView_ItemSelected(object sender, SelectedItemChangedEventArgs e)
    {
        this.Navigation.PushAsync(new Page2(e.SelectedItem), true) ;
    }
}

GoodsPage

 //Xaml
 <ListView x:Name="listview" IsGroupingEnabled="true">
    <ListView.GroupHeaderTemplate>
        <DataTemplate>
            <ViewCell>
                <Label BackgroundColor="Pink"
                       HorizontalOptions="FillAndExpand"
                       Text="{Binding Name}" />
            </ViewCell>
        </DataTemplate>
    </ListView.GroupHeaderTemplate>

    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <Label HorizontalTextAlignment="Center"
                       FontSize="Large" 
                       HorizontalOptions="FillAndExpand" 
                       Text="{Binding Name}" />
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

//Code
public partial class Page2 : ContentPage
{
    public Page2(object obj)
    {
        InitializeComponent();
        var person = obj as Person;

        listview.ItemsSource = person.List;
    }
}