Cannot change Toolbar icon in Xamarin Forms v4.1

Question

Toolbar icon doesn't change during runtime when application is wrapped with XF Shell. Sample source: https://github.com/chyzy/XF-Shell-ToolbarItem-Issue

Everything works fine (icon changes correctly) if I use new NavigationPage(new MainPage) instead of Shell.

App.xaml.cs:

public partial class App : Application
    {
        public App()
        {
            InitializeComponent();

            MainPage = new AppShell();
        }
    }

AppShell.cs

public partial class AppShell : Shell
    {
        public AppShell ()
        {
            InitializeComponent ();

            this.Items.Add(new ShellSection()
            {
                Title = "Main Page",
                Items =
                {
                    new ShellContent()
                    {
                        Content = new MainPage()
                    }
                }
            });
        }
    }

MainPage.xaml

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:TISample"
             x:Class="TISample.MainPage"
             Title="Main Page">

    <ContentPage.ToolbarItems>
        <ToolbarItem x:Name="MyToolbarItem" Clicked="MyToolbarItem_OnClicked"/>
    </ContentPage.ToolbarItems>

    <StackLayout>
        <Label Text="Click the toolbar icon to change its color" 
               HorizontalOptions="Center"
               VerticalOptions="Center" />
    </StackLayout>

</ContentPage>

MainPage.xaml.cs

public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            _availableIcons = new[] { "red.png", "green.png" };
            _currentIcon = _availableIcons.First();

            MyToolbarItem.IconImageSource = ImageSource.FromFile(_currentIcon);
        }

        private string[] _availableIcons;
        private string _currentIcon;

        private void MyToolbarItem_OnClicked(object sender, EventArgs e)
        {
            _currentIcon = _availableIcons.First(ai => ai != _currentIcon);
            MyToolbarItem.IconImageSource = ImageSource.FromFile(_currentIcon);
        }
    }

Is it problem with Xamarin Forms Shell? Is it possible workaround this problem and change the icon dynamically?

Answer 1

My guess is that once the toolbar item is added to the native control in the renderers, properties changed are not propagated.

You could use the TitleView to achieve that:

<NavigationPage.TitleView>
    <StackLayout Orientation="Horizontal">
        <Image Source="back_button"
               VerticalOptions="CenterAndExpand"
               HorizontalOptions="Start" />
        <Label Text="Page Title"
               HorizontalOptions="StartAndExpand"
               VerticalOptions="CenterAndExpand"
               FontAttributes="Bold"
               FontSize="20"/>
        <ImageButton Source="green.png"
                     VerticalOptions="CenterAndExpand"
                     HorizontalOptions="End" />
    </StackLayout>
</NavigationPage.TitleView>    

https://www.andrewhoefling.com/Blog/Post/xamarin-forms-title-view-a-powerful-navigation-view

EDIT: for this to work with a TabbedPage, add first the TitleView THEN the TabbedPage Children (https://forums.xamarin.com/discussion/139894/putting-an-image-on-navigation-bar).