Forum Xamarin.Forms

Listview Databinding

EricHansonEricHanson USMember
edited October 2016 in Xamarin.Forms

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...

Answers

  • ComConComCon DEMember ✭✭

    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>
    
  • EricHansonEricHanson USMember

    I ended up declaring groups as

    public class MainMenuGroup : ObservableCollection<MainMenuItem>
        {
    }
    

    This was the easiest solution.

Sign In or Register to comment.