how to implement whatsapp like contextmenu item bar in xamarin forms

uday_Suddhalauday_Suddhala ✭✭USMember ✭✭

hi how can i display the context menu items same like whats app in xamarin forms?? can anyone guide me?

Best Answers

Answers

  • MabroukMabrouk ✭✭✭ USMember ✭✭✭
    edited November 2017

    Hello,

    you Need to set your ToolBarItems when an item of the list is selected.

    for example :

    private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
            {
                setWhatsAppLikeToolbar();
            }
    

    And now, just set your ToolBarLitems like :

    private void setWhatsAppLikeToolbar()
            {
                this.Title = getSelectionCount();
                ToolbarItems.Add(new ToolbarItem()
                {
                    Icon = "ic_st_white.png",
                    Text = "Add",
                    Command = new Command(ShowAlert),
                    CommandParameter = "add"
                });
                ToolbarItems.Add(new ToolbarItem()
                {
                    Icon = "ic_st_white.png",
                    Text = "delete",
                    Command = new Command(ShowAlert),
                    CommandParameter = "delete"
                });
                ToolbarItems.Add(new ToolbarItem()
                {
                    Icon = "ic_st_white.png",
                    Text = "edit",
                    Command = new Command(ShowAlert),
                    CommandParameter = "edit"
                });
            }
    

    The ShwoAlert method is in this case only for test :

    private void ShowAlert(object obj)
    {
        DisplayAlert("Alert!", $"{obj as string} Clicked!", "OK");
    }
    

    For the Title in WhatsApp is changed by the number of selected items in the list.

    I hope that helps,
    Mabrouk.

  • uday_Suddhalauday_Suddhala ✭✭ USMember ✭✭

    thanks mabrouk!!!..i have a similar approach Mabrouk. its adding toolbar but i'm unable to remove toolbar when i click the back arrow on the toolbar. And toolbar items are adding each time when i tap the itemcell. is there anyway we can acheive that?

  • CharwakaCharwaka ✭✭✭✭✭ INMember ✭✭✭✭✭
    edited November 2017

    Hi @uday_Suddhala

    While adding items to toll bar check whether items been added already or not
    and when you press back button Remove like this
    First create a Private Instance like this

    ToolbarItem deleteToolbar;
    ToolbarItem editToolbar;
    
     if(deleteToolbar!=null)
    {
                          deleteToolbar= new ToolbarItem()
                        {
                            Icon = "ic_st_white.png",
                            Text = "delete",
                            Command = new Command(ShowAlert),
                            CommandParameter = "delete"
                        });
    }
     if(editToolbar!=null)
    {
             editToolbar= new ToolbarItem()
                        {
                            Icon = "ic_st_white.png",
                            Text = "edit",
                            Command = new Command(ShowAlert),
                            CommandParameter = "edit"
                           });
    
    }   
    
      //For Adding like this
       ToolbarItems.Add(deleteToolbar);
       ToolbarItems.Add(editToolbar);
    
    
    
    //For Removing
    
     ToolbarItems.Remove(deleteToolbar);
    ToolbarItems.Remove(editToolbar);
    
  • MabroukMabrouk ✭✭✭ USMember ✭✭✭

    Hi @uday_Suddhala

    you can clear your toolbaritems after every action , maybe like :

    private void ShowAlert(object obj)
            {
                DisplayAlert("Alert!", $"{obj as string} Clicked!", "OK");
                ToolbarItems.Clear();
                this.Title = viewModel.Title;
            }
    

    I hope that helps,
    Mabrouk.

  • NMackayNMackay mod GBInsider, University mod

    If your an MVVM fan and you want to do this with binding there's a bindable toolbaritem sample here.

    https://forums.xamarin.com/discussion/40622/found-a-way-to-make-toolbaritems-visible-invisible-without-a-custom-renderer

  • uday_Suddhalauday_Suddhala ✭✭ USMember ✭✭

    @mabrok @charwaka .. ur suggestion worked for me. thank you . but i can't override my navigationbar back button to hide toolbar . as i am using pushaync to enter my mypage . i will be getting a back button on navigation bar by default . it brings you back to the previous page. any suggestions?

  • uday_Suddhalauday_Suddhala ✭✭ USMember ✭✭

    @NMackay great work. that helped me.. very flexible to use. but the thing is when i am navigating to my page i am able to see the toolbar default. as it loads ui first and then it is hiding as im setting isvisible to false. and also backbutton event is stopping me acheive whatsapp like functionality? need ur suggestion?

Sign In or Register to comment.