Are usages of MAUI TabBar Tab menu items and Toolbar menu items mutually exclusive?

Question

Are usages of MAUI TabBar Tab menu items and Toolbar menu items mutually exclusive?

dg2k 1,416

I am getting strange behaviour of AppShell based navigation when using both AppShell TabBar Tab items (at the page bottom) and Toolbar items (at the page top toolbar area) for Android.

The problem shows up when navigating from one page to another. The Toolbar icons of a page navigated from appears in a page that is navigated to. It means the image binding is not updated and it requires a bit of back and forth for the icons to appear as expected. I didn't have this issue with Xamarin and only now when migrating to MAUI.

Am I missing some key settings, say for AppShell, or TabBar menu items and Toolbar menu items do not mix?

I thought there are excellent use-cases where app menu items are at the bottom (as TabBar implementation) and a few toolbar items can be used for something else at the top.

In AppShell.xaml

<TabBar
	Title="My Test Page"
	FlyoutIcon="{StaticResource MenuTestIcon}">
<Tab
	Title="tab1"
	Icon="{Binding MenuTab1ImageSource}">
	<ShellContent ContentTemplate="{DataTemplate views:MainPage}"/>
</Tab>

<Tab
	Title="tab2"
	Icon="{Binding MenuTab2ImageSource}">
	<ShellContent ContentTemplate="{DataTemplate views:MainPage}" />
</Tab>

</TabBar>

In MainPage.xaml

<ContentPage.ToolbarItems>

<ToolbarItem
	Command="{Binding ToolbarButtonTappedCommand}"
	CommandParameter="reminder"
	IconImageSource="reminder.png"
	Text="reminder" />

<ToolbarItem
	Command="{Binding ToolbarButtonTappedCommand}"
	CommandParameter="notepad"
	IconImageSource="notepad.png"
	Text="notepad" />

</ContentPage.ToolbarItems>

Accepted answer

1 additional answer

Your answer

Answer 1

Hello,

After investigation, it was found that icons did exhibit behavior that did not update as expected when using data binding in the Shell.

Therefore, you could refer to the following steps to complete this feature using Dynamic styles.

Step 1. Add string resources in App.xaml:

<ResourceDictionary>
            <x:String x:Key="Tab1IconSource">dotnet_bot.png</x:String>
            <x:String x:Key="Tab2IconSource">test.png</x:String>
</ResourceDictionary>

Step 2. Set up dynamic resources for Icons in your shell:

<Tab 
    Title="tab1"
    Icon="{DynamicResource Tab1IconSource}">
    <ShellContent ContentTemplate="{DataTemplate local:MainPage}"/>
</Tab>

<Tab
    Title="tab2"
    Icon="{DynamicResource Tab2IconSource}">
    <ShellContent ContentTemplate="{DataTemplate local:MainPage}" />
</Tab>

Step 3. You need to change the value of the dynamic resource when you need to change the icon. In this example, I swapped the icons for two tabs.

var res = App.Current.Resources["Tab1IconSource"]; 
App.Current.Resources["Tab1IconSource"] = App.Current.Resources["Tab2IconSource"];
App.Current.Resources["Tab2IconSource"] = res;

Best Regards,

Alec Liu.

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

dg2k 1,416 Reputation points

2023-04-28T20:46:39.0266667+00:00

Thank you for sharing. I will check it out an come back to you at an earliest opportunity as I'm on travel at the moment.
Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,126 Reputation points Microsoft External Staff

2023-05-01T02:09:52.6666667+00:00

Thanks for your feedback.

Have a nice holiday.
dg2k 1,416 Reputation points

2023-05-03T20:53:11.5033333+00:00

You are spot on @Yonglun Liu (Shanghai Wicresoft Co,.Ltd.)

However the question and answer could be a bit confusing to the reader.

This answer is really for the case of binding to AppShell icons. In my case the binding is both for Icon ImageSource and Caption Text. The binding will update only via DynamicResource and the normal ViewModel Binding doesn't work.

Answer 2

Alexander Petree 150

<ContentPage.ToolbarItems>

Alexander Petree 150

XAML

Copy
<TabBar
	Title="My Test Page"
	FlyoutIcon="{StaticResource MenuWalletIcon}">
<Tab
	Title="tab1"
	Icon="{Binding MenuAddSaveIconImageSource}">
	<ShellContent ContentTemplate="{DataTemplate views:MainPage}"/>
</Tab>

<Tab
	Title="tab2"
	Icon="{Binding MenuDeleteIconImageSource}">
	<ShellContent ContentTemplate="{DataTemplate views:MainPage}" />
</Tab>

</TabBar>
In MainPage.xaml

XAML

Copy
<ContentPage.ToolbarItems>

<ToolbarItem
	Command="{Binding ToolbarButtonTappedCommand}"
	CommandParameter="reminder"
	IconImageSource="reminder.png"
	Text="reminder" />

<ToolbarItem
	Command="{Binding ToolbarButtonTappedCommand}"
	CommandParameter="notepad"
	IconImageSource="notepad.png"
	Text="notepad" />

</ContentPage.ToolbarItems>

Alexander Petree 150 Reputation points

2023-04-23T01:38:45.0566667+00:00

<TabBar Title="My Test Page" FlyoutIcon="{StaticResource MenuWalletIcon}"> <Tab Title="tab1" Icon="{Binding MenuAddSaveIconImageSource}"> <ShellContent ContentTemplate="{DataTemplate views:MainPage}"/> </Tab> <Tab Title="tab2" Icon="{Binding MenuDeleteIconImageSource}"> <ShellContent ContentTemplate="{DataTemplate views:MainPage}" /> </Tab> </TabBar>
Alexander Petree 150 Reputation points

2023-04-23T01:39:05.73+00:00

Xmal section
Alexander Petree 150 Reputation points

2023-04-23T01:39:23.6966667+00:00

View in markdown
dg2k 1,416 Reputation points

2023-04-23T10:03:43.9666667+00:00

View what?
The code fragments are provided to provide some reference and it is incomplete. The issue is not programming error in my XAML, rather (I suspect) operational issues with respect to Shell navigation.

Share via

Are usages of MAUI TabBar Tab menu items and Toolbar menu items mutually exclusive?

1 additional answer

Your answer