Found a way to make ToolBarItems Visible/Invisible..without a custom renderer

_PK_ · May 2015

So from what I've seen in the API Docs (http://iosapi.xamarin.com/?link=T:Xamarin.Forms.MenuItem/*) Toolbar items don't seem to have an IsVisible property.

I was able to accomplish this by defining a Binding for the "Icon" property and settings it to null when I don't want the toolbar item to display. So far, it has worked well.

Posting here so that anyone else looking to toggle visibility of toolbar items can try it out.

adamkemp · May 2015

No, that's not supported yet. Also, making an invisible icon doesn't stop it from being tapped.

AdamP · May 2015

The best way to do this is to create the toolbar items, you can keep them cached/stored in a dictionary and Add and Remove them as needed depending upon functionality present. There isn't a need to make them invisible.

alemarko · May 2015

Hi, I also stumbled into this. I needed the Toolbar to refresh after changing
item's title/name, or after adding/removing toolbar items.
So after I make changes I invoke this small Page extension method.

Disclaimer: tested and used only on Android and Xamarin.Forms 1.2.3.

public static void ForceToolbarRedraw(this Page page) { var itemList = page.ToolbarItems.ToList(); // create copy of toolbar items page.ToolbarItems.Clear(); // remove all itemList.ForEach(ti => page.ToolbarItems.Add(ti)); // add all from list }

CaptainXamtastic · December 2015

@AdamP said:
The best way to do this is to create the toolbar items, you can keep them cached/stored in a dictionary and Add and Remove them as needed depending upon functionality present. There isn't a need to make them invisible.

Adam, do you have an example of how you did this, MVVM friendly if possible!

AdamP · December 2015

@AnthonyHarrison.3194 - The MVVM XAML way to make ToolbarItems Visible/Not Visible (technically its removing and adding them, as you can't actually make them invisible).

#1. Create a new Control that inherits from ToolbarItem

      public class BindableToolbarItem: ToolbarItem
      {

        public BindableToolbarItem()
        {
            InitVisibility();
        }

        private async void InitVisibility()
        {
            OnIsVisibleChanged(this, false, IsVisible);
        }

        public new ContentPage Parent { set; get; }

        public bool IsVisible
        {
            get { return (bool)GetValue(IsVisibleProperty); }
            set { SetValue(IsVisibleProperty, value); }
        }

        public static BindableProperty IsVisibleProperty =
            BindableProperty.Create<BindableToolbarItem, bool>(o => o.IsVisible, false, propertyChanged: OnIsVisibleChanged);

        private static void OnIsVisibleChanged(BindableObject bindable, bool oldvalue, bool newvalue)
        {
            var item = bindable as BindableToolbarItem;

            if (item.Parent == null)
                return;

            var items = item.Parent.ToolbarItems;

            if (newvalue && !items.Contains(item))
            {
                items.Add(item);
            }
            else if (!newvalue && items.Contains(item))
            {
                items.Remove(item);
            }
          }
      }

#2. In your content pages attributes add this

x:Name="this"

and

xmlns:control="clr-namespace:Mobile.Controls"

#3. Add in your bindable toolbar items

<ContentPage.ToolbarItems>
       <control:BindableToolbarItem Text="Delete" Icon="delete.png" Command="{Binding DeleteCommand}" Parent="{x:Reference this}" IsVisible="{Binding IsVisible}" />
  </ContentPage.ToolbarItems>

ThomasBurkhart · January 2016

Wow, this looks excalty like what I was looking for.
@AdamP why do you have to set the Parent manually? Doesn't ToolbarItems have valid Parent?

AdamP · January 2016

@ThomasBurkhart - why yes it does, thanks for the pickup. With that said you can remove the XAML reference to the parent and change accessing the parent to

var items = ((ContentPage)item.Parent).ToolbarItems;

ThomasBurkhart · January 2016

@AdamP
I just stumbled upon this solution: http://stackoverflow.com/questions/27803038/disable-toolbaritem-xamarin-forms
Did you ever try this?

AdamP · January 2016

@ThomasBurkhart - I haven't tried using the CanExecute option, so I am not sure if it provides a disabled look about it when it is off, sounds like it does. But it would be easy to test out, just set the CanExecute parameter in the command you bind to.

ThomasBurkhart · January 2016

I just tested it. It does not change the look of the icon, it just disables the Event :-(
So your solution is still the way to go.

adamkemp · January 2016

If the result of your CanExecute callback changes you need to call ChangeCanExecute on the command object to notify any controls to update their appearance.

ThomasBurkhart · January 2016

@adamkemp Sorry, but there is no Method ChangeCanExecute in the ICommand Interface that I could call.

ThomasBurkhart · January 2016

@AdamP
I just tried what you said

@ThomasBurkhart - why yes it does, thanks for the pickup. With that said you can remove the XAML reference to the parent and change accessing the parent to

var items = ((ContentPage)item.Parent).ToolbarItems;

But item.parent is always null. No Idea why.

ThomasBurkhart · January 2016

@AdamP
I found a strange behavior in your solution. When I try to make the Icon invisible at the beginning by assigning false to my bound IsVisible Property in my ViewModell constructor nothing happens, the Icon is displayed.

When modifying the IsVisible Property later in a TextChanged Event the Icon disappears and appears as expected.

I also bound the Visibility of a normal Button to the same Property and there is works.

I now found out, that if I change the bound Property twice it works:

            if (message=="NewEntry")
            {
                SaveEnabled = true;
                SaveEnabled = false;
            }

adamkemp · January 2016

The ChangeCanExecute method is on the Command class. The interface has an event that fires to signal that the value of CanExecute changed, and the ChangeCanExecute method fires that event. If you're using a different implementation of the ICommand interface then just fire the event instead.

ThomasBurkhart · January 2016

I changed it now to a standard Command:

``` SaveCommand = new Command(Save,()=>false);

and later on

            SaveCommand.ChangeCanExecute();

```

Only thing that happens is that the ActionbarIcon does no longer react when tapped, but it stays visible. SO it looks like that this approach does not lead to the desired goal.

adamkemp · January 2016

Expected (by me) behavior is that the toolbar buttons remain visible, but appear disabled. If it's not doing that then file a bug report here: http://bugzilla.xamarin.com

ThomasBurkhart · January 2016

Are you running IOS or Android?

adamkemp · January 2016

That's the expected behavior for all platforms.

ThomasBurkhart · January 2016

Ah, sorry, misunderstood you. your wrote "expected", not observed by you.

AdamP · January 2016

@ThomasBurkhart - I actually experience the issue as well. I also (as a hack) place a delay then set the boolean value. But it has to be because some events are out of order, though haven't had a look to what I need to wait for before setting it.

ThomasBurkhart · January 2016

@AdamP
So far setting the property twice works for me well. But it would be good to know where the problem is as it works with a standard Button.

ShaneNeuville · January 2016

There's a bug here for it
https://bugzilla.xamarin.com/show_bug.cgi?id=25661
Seems like there's been some back and forth about confirming

i posted a sample in there of the issue with Android and the icon not graying out.. Hopefully that one works (doesn't work) for them

ThomasBurkhart · January 2016

Have you seen the last Comment https://bugzilla.xamarin.com/show_bug.cgi?id=25661#c12
There is a solution though a real cumbersome. And nothing said about IOS

MichaelRumpler · January 2016

Normal Buttons also don't appear disabled when CanExecute returns false. I thought that that was the whole purpose of Xamarins own implementation of Command, but it seems like they don't use it at all.

LucasLF · February 2016

PK there's my solution for that problem.

I put the toolbaritems in my xaml like that:

<TabbedPage.Children>
    <ContentPage x:Name="groupPage" Title="Grupo" BackgroundColor="{StaticResource PrimaryColorLight}">
        <ContentPage.ToolbarItems>
            <ToolbarItem Name="Editar" Order="Primary" Priority="0" Command="{ Binding EditCommand }">
            </ToolbarItem>
        </ContentPage.ToolbarItems>

In my view I subscribe my ViewModel:

public partial class GroupDetailView : TabbedPage
{
    GroupDetailViewModel groupDetailViewModel;
    public GroupDetailView (int id)
    {
        groupDetailViewModel = new GroupDetailViewModel (id);
        this.BindingContext = groupDetailViewModel;
        InitializeComponent ();

        MessagingCenter.Subscribe<GroupDetailViewModel, bool> (this, "GroupLoaded", (sender, arg) => {
            if (!arg) {
                groupPage.ToolbarItems.Clear();
                matchPage.ToolbarItems.Clear();
            }
        });
    }
}

And finally in my ViewModel I send the content:

MessagingCenter.Send<GroupDetailViewModel, bool> (this, "GroupLoaded", this.Group.GroupUserLogged.IsAdmin);

If my logged user is not an admin of the current group, hide the toolbaritems.

ChrisMcBride.2625 · April 2016

@ThomasBurkhart said:
@AdamP
I just tried what you said

@ThomasBurkhart - why yes it does, thanks for the pickup. With that said you can remove the XAML reference to the parent and change accessing the parent to

var items = ((ContentPage)item.Parent).ToolbarItems;

But item.parent is always null. No Idea why.

It is probably too late, but it looks like what is happening is OnIsVisibleChanged is being called when the BinableToolbarItem is being constructed. It hasn't been attached to a parent yet.
Override OnParentSet():

    protected override void OnParentSet()
    {
        base.OnParentSet();
        InitVisibility();
    }

Malcolm.Jack · March 2017

@ThomasBurkhart said:
@AdamP
So far setting the property twice works for me well. But it would be good to know where the problem is as it works with a standard Button.

"Setting the property twice" - is the cause not perhaps that the bindable property is not defaulted to true (the initial state of the button)?

For those interested in code, I have created a github repo here

NMackay · April 2017

@AdamP

Thanks for this adam, was really useful. I updated it slightly to make it support the new format for bindable properties, I also got an error in my app for changing the list so just made sure that was done on the UI thread. Works a treat.

Thanks again.

public class BindableToolbarItem : ToolbarItem
    {
        public static readonly BindableProperty IsVisibleProperty =
            BindableProperty.Create("BindableToolbarItem", typeof (bool), typeof (ToolbarItem),
                true, BindingMode.TwoWay, propertyChanged: OnIsVisibleChanged);

        public BindableToolbarItem()
        {
            InitVisibility();
        }

        public bool IsVisible
        {
            get { return (bool) GetValue(IsVisibleProperty); }
            set { SetValue(IsVisibleProperty, value); }
        }

        private void InitVisibility()
        {
            OnIsVisibleChanged(this, false, IsVisible);
        }

        private static void OnIsVisibleChanged(BindableObject bindable, object oldvalue, object newvalue)
        {
            var item = bindable as BindableToolbarItem;

            if (item != null && item.Parent == null)
                return;

            if (item != null)
            {
                var items = ((ContentPage) item.Parent).ToolbarItems;

                if ((bool) newvalue && !items.Contains(item))
                {
                    Device.BeginInvokeOnMainThread(() => { items.Add(item); });
                }
                else if (!(bool) newvalue && items.Contains(item))
                {
                    Device.BeginInvokeOnMainThread(() => { items.Remove(item); });
                }
            }
        }

voidstream · August 2017

@NMackay said:
@AdamP

Thanks for this adam, was really useful. I updated it slightly to make it support the new format for bindable properties, I also got an error in my app for changing the list so just made sure that was done on the UI thread. Works a treat.

Thanks again.

public class BindableToolbarItem : ToolbarItem
    {
        public static readonly BindableProperty IsVisibleProperty =
            BindableProperty.Create("BindableToolbarItem", typeof (bool), typeof (ToolbarItem),
                true, BindingMode.TwoWay, propertyChanged: OnIsVisibleChanged);

        public BindableToolbarItem()
        {
            InitVisibility();
        }

        public bool IsVisible
        {
            get { return (bool) GetValue(IsVisibleProperty); }
            set { SetValue(IsVisibleProperty, value); }
        }

        private void InitVisibility()
        {
            OnIsVisibleChanged(this, false, IsVisible);
        }

        private static void OnIsVisibleChanged(BindableObject bindable, object oldvalue, object newvalue)
        {
            var item = bindable as BindableToolbarItem;

            if (item != null && item.Parent == null)
                return;

            if (item != null)
            {
                var items = ((ContentPage) item.Parent).ToolbarItems;

                if ((bool) newvalue && !items.Contains(item))
                {
                    Device.BeginInvokeOnMainThread(() => { items.Add(item); });
                }
                else if (!(bool) newvalue && items.Contains(item))
                {
                    Device.BeginInvokeOnMainThread(() => { items.Remove(item); });
                }
            }
        }

Always great @NMackay

NMackay · November 2017

I modified this code slightly as it didn't work correctly with tabbed pages having toolbar buttons.

namespace Foobar.CustomControls
{
    public class BindableToolbarItem : ToolbarItem
    {
        public static readonly BindableProperty IsVisibleProperty =
            BindableProperty.Create("BindableToolbarItem", typeof (bool), typeof (ToolbarItem),
                true, BindingMode.TwoWay, propertyChanged: OnIsVisibleChanged);

        public BindableToolbarItem()
        {
            InitVisibility();
        }

        public bool IsVisible
        {
            get { return (bool) GetValue(IsVisibleProperty); }
            set { SetValue(IsVisibleProperty, value); }
        }

        private void InitVisibility()
        {
            OnIsVisibleChanged(this, false, IsVisible);
        }

        private static void OnIsVisibleChanged(BindableObject bindable, object oldvalue, object newvalue)
        {
            var item = bindable as BindableToolbarItem;

            if (item != null && item.Parent == null)
                return;

            if (item != null)
            {
                var items = ((Page) item.Parent)?.ToolbarItems;

                if (Equals(items, null)) return;
                if ((bool)newvalue && !items.Contains(item))
                {
                    Device.BeginInvokeOnMainThread(() => { items.Add(item); });
                }
                else if (!(bool)newvalue && items.Contains(item))
                {
                    Device.BeginInvokeOnMainThread(() => { items.Remove(item); });
                }
            }
        }
    }

Bsafer · November 2017

Thanks @NMackay for those changes/fixes. They resolved some small cleanup issues I was having with old version.

Marre · January 2018

@NMackay said:
@AdamP

Thanks for this adam, was really useful. I updated it slightly to make it support the new format for bindable properties, I also got an error in my app for changing the list so just made sure that was done on the UI thread. Works a treat.

Thanks again.

public class BindableToolbarItem : ToolbarItem
    {
        public static readonly BindableProperty IsVisibleProperty =
            BindableProperty.Create("BindableToolbarItem", typeof (bool), typeof (ToolbarItem),
                true, BindingMode.TwoWay, propertyChanged: OnIsVisibleChanged);

        public BindableToolbarItem()
        {
            InitVisibility();
        }

        public bool IsVisible
        {
            get { return (bool) GetValue(IsVisibleProperty); }
            set { SetValue(IsVisibleProperty, value); }
        }

        private void InitVisibility()
        {
            OnIsVisibleChanged(this, false, IsVisible);
        }

        private static void OnIsVisibleChanged(BindableObject bindable, object oldvalue, object newvalue)
        {
            var item = bindable as BindableToolbarItem;

            if (item != null && item.Parent == null)
                return;

            if (item != null)
            {
                var items = ((ContentPage) item.Parent).ToolbarItems;

                if ((bool) newvalue && !items.Contains(item))
                {
                    Device.BeginInvokeOnMainThread(() => { items.Add(item); });
                }
                else if (!(bool) newvalue && items.Contains(item))
                {
                    Device.BeginInvokeOnMainThread(() => { items.Remove(item); });
                }
            }
        }

@NMackay Thank you so much, I think this is the solution for the AmbiguousMatchException I was getting. I'm wondering though what change in the IsVisibleProperty it was that made it work. Is the BindingMode.TwoWay important?

Minnow · February 2018

For MVVM, I'm missing a step 4: change the BindableToolbarItem.IsVisible property in the view model. All I could get to work was in the view.xaml.cs, Appearing event was sufficient for me (MyBindableToolbarItemName.IsVisible = true/false;). This is only acceptable because the events that change menu visibility are always on other pages. If an event were to happen on the menu page itself, I'd be stuck.

How do I bind BindableToolbarItem.IsVisible to a property in the the viewmodel, or otherwise set BindableToolbarItem.IsVisible in the view model?

I don't understand why the binding of the Command goes to the view model binding context, but the IsVisible binding isn't working, or seems to be bound to.....itself? (IsVisible="{Binding IsVisible}")

40Alpha · July 2018

@NMackay you should put that thing in a Github Gist, anyway - thx.

Bsafer · July 2018

I'm using this but recently I'm getting complaints because the toolbar item shows for a second, then is hidden afterwards. I can't figure out a way to have it not visible right from the start (even when I change default). I assume it's because the default toolbaritem is visible until I hide it which gets hit later in code. Any idea how I can make it not visible from the very start and still have the Hideable tool bar listed in the XAML (rather than in codebehind)?

MehdiMll · August 6

if (item != null && item.Parent == null)

Parent is always null

emm · September 20

It works but toolbar does not update in my Master Page until I navigate to another page.

I tried Adding and Removing inside a Master Page event and have to navigate to update the toolbar too.

MichaelStgt · September 30

Adam,

this really works great, but i have timing issues on Droid and iOS. On UWP this does not happen. First, all Toolbaritems are shown and then that one with IsVisible = false will disappear. Do u have any workaround for this? Or can you investigate into a renderer hiding the toolbar items?

JosHuybrighs · October 26

I modified the above presented code a little bit to respect the Priority order of the toolbar items when one or more become visible at various points in time. Simply doing items.add will result in items that become visible later (e.g. as a result of loading something in the background) not appearing at the expected location.

This is the code I came up with to circumvent this:

    public class BindableToolbarItem : ToolbarItem
    {
        public static readonly BindableProperty IsVisibleProperty =
            BindableProperty.Create("IsVisible", typeof(bool), typeof(BindableToolbarItem),
                true, BindingMode.OneWay, propertyChanged: OnIsVisibleChanged);
        public bool IsVisible
        {
            get { return (bool)GetValue(IsVisibleProperty); }
            set { SetValue(IsVisibleProperty, value); }
        }

        private static void OnIsVisibleChanged(BindableObject bindable, object oldvalue, object newvalue)
        {
            var item = bindable as BindableToolbarItem;
            Device.BeginInvokeOnMainThread(() => { item.SetVisibility(oldvalue, newvalue); });
        }

        public BindableToolbarItem()
        { }

        protected override void OnParentSet()
        {
            base.OnParentSet();
            SetVisibility(false, IsVisible);
        }

        void SetVisibility(object oldvalue, object newvalue)
        {
            if (Parent != null)
            {
                var items = ((ContentPage)Parent).ToolbarItems;

                if ((bool)newvalue && !items.Contains(this))
                {
                    // Find the insertion point (based on Priority of other toolbar items)
                    var nextItem = items.FirstOrDefault(i => i.Priority > this.Priority);
                    var idx = (nextItem != null) ? items.IndexOf(nextItem) : items.Count;
                    // Insert this toolbar item
                    items.Insert(idx, this);
                }
                else if (!(bool)newvalue && items.Contains(this))
                {
                    items.Remove(this);
                }
            }
        }
    }

It works on android, iOS and UWP but, as already being pointed out shows an Invisible item very shortly on Android. UWP and iOS don't seem to exhibit this annoying behaviour. This is probably because it is necessary to insert/remove the toolbar items within a background thread in order not to interfere with the parent's child list being built up when the page is initialized.
I just read https://github.com/xamarin/Xamarin.Forms/issues/3838 and it seems that we have to live with this.

Xamarin

Quick Links

Found a way to make ToolBarItems Visible/Invisible..without a custom renderer

Posts