Forum Xamarin.Forms

Add menu item dynamically

neerajgoelneerajgoel USMember ✭✭

Hello All,
My app has requirement that App menu items should show if the user is authorised to see otherwise only default item menu should see.
I am using AppShell Flyout for creating menu, so i need to add menu item dynamically also i need to do it by MVVM approach.. please help me to achieve this functionality.

Answers

  • AndyFlisherAndyFlisher GBBeta, University ✭✭✭✭

    If it's just a question of 'is logged in' then you can bind the IsVisible or IsEnabled properties in your menu Xaml to an IsLoggedIn boolean in your viewmodel. If more complex than that, eg based on permissions then I would look at binding your dynamic menu items to an ObservableCollection and then 'somewhere' in your viewmodel populate that collection.

    You may also need to look at messaging to notify your page that the collection has changed and that it needs to refresh and redraw.

  • neerajgoelneerajgoel USMember ✭✭

    @AndyFlisher
    No its not only for logged in but i have to draw the menu based on the permission coming from server through api.
    If i am applying IsEnabled property then it show "Readonly" exception and there is no property like IsVisible for "Menu".

    Could you please share a example to bind Menu using 'ObservableCollection' as i am first time using Flyout so it is challenging for me.

    Thanks also for your time for sharing this suggestion.

  • AndyFlisherAndyFlisher GBBeta, University ✭✭✭✭

    I've not compiled this I've just stripped out from a working solution so fingers crossed, and this is from a Master / Detail navigation project. In the Xaml there is a listview called dynamicListView - nothign exciting, MenuPageItem is my own class to hold menu items, so name, icon etc, the codebehind looks like;

    public class MenuPageItem
    {
        public string Title { get; set; }
        public string Icon { get; set; }
        public Type Target { get; set; }
        public TankStatus TankStatus { get; set; }
    }
    
    
    public partial class MenuPage : ContentPage
        {
            public BaseViewModel viewModel;
    
            private ObservableCollection<MenuPageItem> dynamicMenuPageItems;
    
            public ListView DynamicMenuListView => dynamicListView;
    
    
    
            public MenuPage()
            {
                viewModel = new BaseViewModel();
    
                RefreshCommand = new Command(async () => await RefreshAsync());
    
                // Subscribe to events from the Booking Viewmodel (Change in tank status)
                MessagingCenter.Subscribe<BookingViewModel>(this, "MenuItemsChanged", async (sender) =>
                {
    
                    await RefreshAsync();
                });
    
    
                InitializeComponent();
    
    
    
                dynamicMenuPageItems = new ObservableCollection<MenuPageItem>();
    
    
                dynamicListView.ItemsSource = dynamicMenuPageItems;
    
                RefreshCommand.Execute(null); //Refresh
    
    
    
            }
    
    
            public Command RefreshCommand { get; }
    
            private async Task RefreshAsync()
            {
                XyrohLib.Log("Refreshing Dynamic Menu");
    
                foreach (var status in App.MenuItems)
        {
    
                    dynamicMenuPageItems.Add(new MenuPageItem
                    {
                        Title = "Status > " + status.Name,
                        Icon = "wrenchsmall.png",
                        Target = typeof(BookingsPage),
                        TankStatus = status
                    });
    
        }
            }
    
    
        }
    

    Elsewhere in a Viewmodel I have something like;

    App.MenuItems.Clear();
                    foreach (var status in statusList) App.MenuItems.Add(status);
                    MessagingCenter.Send<BookingViewModel>(this, "MenuItemsChanged"); //Norify Menupage to redraw
    

    This is the bit that populates the collection from DB and then notifies the menu page it has to update, hope that helps

  • neerajgoelneerajgoel USMember ✭✭

    @AndyFlisher
    Suggestion is good to see but i think we are going off the topic.
    Requirement was to add menu item dynamically in Flyout but you have shared the solution for Master-Detail Page instead of Flyout.

  • AndyFlisherAndyFlisher GBBeta, University ✭✭✭✭
    Yes, I was quite open about that in my post, shared as a working solution for a ‘similar’ problem that hopefully the OP can adapt to suit.

    Some help and pointers better than none surely? This isn’t stack overflow!
  • ierazoierazo Member

    I am having the exact same question

Sign In or Register to comment.