Listview Databinding

EricHanson

I am attempting to learn Xamarin Forms and MVVM (using MVVM Light) and i'm struggling to get off the ground w/ list view data binding using XAML. I have the following models.

public class MainMenuModel : GalaSoft.MvvmLight.ObservableObject
{
    private ObservableCollection<Models.Menus.Objects.MainMenuGroup> _groups;

    #region Properties
    public ObservableCollection<Models.Menus.Objects.MainMenuGroup> Groups { get { return this._groups; } }
    #endregion

    #region Constructor
    public MainMenuModel()
    {
        this._groups = new ObservableCollection<Objects.MainMenuGroup>();
    }
    #endregion
}

public class MainMenuGroup : GalaSoft.MvvmLight.ObservableObject
    {
        private string _name;
        private ObservableCollection<MainMenuItem> _menuitems;

        #region Properties
        public string Name
        {
            get
            {
                return this._name;
            }
            set
            {
                this._name = value;
                if (this._name != value)
                {
                    base.RaisePropertyChanged("Name");
                }
            }
        }

        public ObservableCollection<MainMenuItem> MenuItems
        {
            get
            {
                return this._menuitems;
            }
        }
        #endregion

        #region Constructors
        public MainMenuGroup()
        {
            this._menuitems = new ObservableCollection<MainMenuItem>();
        }
        #endregion
    }

public class MainMenuItem :  GalaSoft.MvvmLight.ObservableObject
    {
        private string _name;
        private string _image;
        private string _description;

        #region Properties
        public string Name
        {
            get
            {
                return this._name;
            }
            set
            {
                this._name = value;
                base.RaisePropertyChanged("Name");
            }
        }

        public string Image
        {
            get
            {
                return this._image;
            }
            set
            {
                this._image = value;
                base.RaisePropertyChanged("Image");
            }
        }

        public string Description
        {
            get
            {
                return this._description;
            }
            set
            {
                this._description = value;
                base.RaisePropertyChanged("Description");
            }
        }
        #endregion
    }

And the following ViewModel

public class MainMenuViewModel : MainViewModel
    {
        private Models.Menus.MainMenuModel _mainmenumodel;

        #region Constructor
        public MainMenuViewModel(INavigationService NavigationService)
        {
            this._mainmenumodel = new Models.Menus.MainMenuModel();
        }

        #endregion

        #region Properties
        public Models.Menus.MainMenuModel MainMenu
        {
            get
            {
                return _mainmenumodel;
            }
        }
        #endregion
    }

I'm trying to bind to the MainMenu.Groups ObservableCollection and display the MainMenu.Groups.MenuItems ObservableCollection for each group. I set the BindingContext in the Code Behind to the MainMenuViewModel object and I have the following XAML.

  <ListView
        x:Name="lstMainMenu"
        ItemsSource="{Binding MainMenu.Groups}" 
        IsGroupingEnabled="true" GroupDisplayBinding="{Binding Name}" >
    <ListView.ItemTemplate>
      <DataTemplate>
        <ImageCell ImageSource="{Binding Image}" Text="{Binding Name}"/>
      </DataTemplate>
    </ListView.ItemTemplate>
  </ListView>

The groups show up in my ListView, however the MenuItems do not.

I really could use some help. I'm tired of googling...

ComCon

try this way

ViewModel

public class MainMenuViewModel : MainViewModel
    {
        private Models.Menus.MainMenuModel _mainmenumodel;

        #region Constructor
        public MainMenuViewModel(INavigationService NavigationService)
        {
            this._mainmenumodel = new Models.Menus.MainMenuModel();
        }

        #endregion

        #region Properties
        public  ObservableCollection<Models.Menus.Objects.MainMenuGroup> Groups
            get
            {
                return _mainmenumodel.Groups;
            }
        }
        #endregion
    }

xaml:

<ListView
        x:Name="lstMainMenu"
        ItemsSource="{Binding Groups}" 
        IsGroupingEnabled="true" GroupDisplayBinding="{Binding Name}" >
    <ListView.ItemTemplate>
      <DataTemplate>
        <ImageCell ImageSource="{Binding Image}" Text="{Binding Name}"/>
      </DataTemplate>
    </ListView.ItemTemplate>
  </ListView>

EricHanson

I ended up declaring groups as

public class MainMenuGroup : ObservableCollection<MainMenuItem>
    {
}

This was the easiest solution.