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?

Need more answers on this. This is not working. Can't change ToolbarItem text and Icon. — iefpw

Roubachof Roubachof · Accepted Answer · 2019-08-11T12:34:21

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

Cannot change Toolbar icon in Xamarin Forms v4.1

1 Answers