Custom ViewCell: item with a sublist

gogcamgogcam CHMember ✭✭
edited April 2016 in Xamarin.Forms

Hello

I'm new to Xamarin and I've the following problem: I would like to show teams and for each team their players in a listview. It should look something like this:
...........................................
Team 1
Max
Hans
...........................................
Team 2
Rene
Dave
...........................................
Team 3
Brad
Scott
Alain
...........................................

I've tried it this way, but only team names are shown and no players.

Team model:

public class TeamViewModel : ViewModelBase
    {
        public TeamViewModel()
        {
            Players = new List<PlayerViewModel>();
        }

        public string Name { get; set; }

        public List<PlayerViewModel> Players;
    }

Player model:

public class PlayerViewModel : ViewModelBase
    {
        public string FirstName { get; set; }
    }

Custom cell view:

class ViewCellTeamPlayers : ViewCell
    {

        public ViewCellTeamPlayers()
        {
            var team = new Label();
            team.SetBinding(Label.TextProperty, "Name");

            var playerName = new Label();
            playerName.SetBinding(Label.TextProperty, "FirstName");

            var players = new StackLayout()
            {
                Orientation = StackOrientation.Vertical,
                BindingContext = "Players",
                Children = { playerName }
            };
            //players.SetBinding(StackLayout.BindingContextProperty, "Players");

            var cellLayout = new StackLayout
            {
                Orientation = StackOrientation.Vertical,
                Children = { team, players }
            };

            this.View = cellLayout;
        }
    }

Page code:

public partial class Page2 : ContentPage
    {
        public Page2()
        {
            InitializeComponent();

            ObservableCollection<TeamViewModel> list = new ObservableCollection<TeamViewModel>
            {
                new TeamViewModel() { Name="Tübach City", Players = { new PlayerViewModel() { FirstName = "Max" }, new PlayerViewModel() { FirstName = "Hans" }, new PlayerViewModel() { FirstName = "Hubert" }} },
                new TeamViewModel() { Name="1. FC Schwangere Bergente", Players = { new PlayerViewModel() { FirstName = "Adam" }, new PlayerViewModel() { FirstName = "Bjorn" }, new PlayerViewModel() { FirstName = "Ried" }} },
                new TeamViewModel() { Name="PSV Tübach", Players = { new PlayerViewModel() { FirstName = "Luli" }, new PlayerViewModel() { FirstName = "Lumpi" }, new PlayerViewModel() { FirstName = "Franz" }} }
            };

            myListView.ItemTemplate = new DataTemplate(typeof(ViewCellTeamPlayers));
            myListView.ItemsSource = list;
        }
    }

XAML:
<ListView x:Name="myListView" />

I'm not sure if this can work and also I'm not sure if the problem is based on bindings or on layout. No error is thrown, but only team names are shown.

Any help would be great. If necessary, I can attach the project.

Thank you!

Best Answer

Answers

  • AdamPAdamP AUUniversity ✭✭✭✭✭
    edited April 2016

    @gogcam I think that ListView grouping would be a much better approach for this scenario.

    James Montemagno has a great tutorial on it here http://motzcod.es/post/94643411707/enhancing-xamarinforms-listview-with-grouping

  • gogcamgogcam CHMember ✭✭

    @AdamP Thank you for your answer. Grouping is no option for me, because I would like to be able to delete a whole team (so a team must necessary be an item and no group header).

Sign In or Register to comment.