Shell Tabbar doesn't behave correctly when changing tab icon image (through binding or style triggers) #12105
Description
Description
Changing the App Shell tab icon using style triggers or through property binding causes the tab bar icon to behave incorrectly:
- Icon image changing mechanism starts to work after few initial clicks on tab bar icon.
- There is a strange icon shuffling/rearranging animation on tab icon change. See: App Shell tab icon change using Trigger cause rearrangement issue in Android , Works in IOS. #11520
- Tabbarselected color isn't maintained correctly when tab bar icon is being changed. It requires additional click to switch to correct state.
Steps to Reproduce
- Change Tab Icon Image through Style triggers or property binding
f.i:
<Shell.Resources>
<Style x:Key="BrowseTab1" TargetType="Tab">
<Style.Triggers>
<Trigger TargetType="Tab" Property="IsChecked" Value="False">
<Setter Property="Icon" Value="radio_off.png" />
</Trigger>
<Trigger TargetType="Tab" Property="IsChecked" Value="True">
<Setter Property="Icon" Value="radio_on.png" />
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="BrowseTab2" TargetType="Tab">
<Style.Triggers>
<Trigger TargetType="Tab" Property="IsChecked" Value="False">
<Setter Property="Icon" Value="radio_off.png" />
</Trigger>
<Trigger TargetType="Tab" Property="IsChecked" Value="True">
<Setter Property="Icon" Value="radio_on.png" />
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="BrowseTab3" TargetType="Tab">
<Style.Triggers>
<Trigger TargetType="Tab" Property="IsChecked" Value="False">
<Setter Property="Icon" Value="radio_off.png" />
</Trigger>
<Trigger TargetType="Tab" Property="IsChecked" Value="True">
<Setter Property="Icon" Value="radio_on.png" />
</Trigger>
</Style.Triggers>
</Style>
</Shell.Resources>
<TabBar>
<Tab
Title="Quotations"
Icon="radio_off.png"
Style="{StaticResource BrowseTab1}">
<ShellContent ContentTemplate="{DataTemplate local:MainPage}" Route="MainPage1" />
</Tab>
<Tab
Title="Logout"
Icon="radio_off.png"
Style="{StaticResource BrowseTab2}">
<ShellContent ContentTemplate="{DataTemplate local:MainPage}" Route="MainPage2" />
</Tab>
<Tab
Title="Timer"
Icon="radio_off.png"
Style="{StaticResource BrowseTab3}">
<ShellContent ContentTemplate="{DataTemplate local:MainPage}" Route="MainPage3" />
</Tab>
</TabBar>
Link to public reproduction project repository
https://github.com/MK1985/MauiShellTabBarIssue
Version with bug
7.0 (current)
Last version that worked well
Unknown/Other
Affected platforms
Android
Affected platform versions
Android SDK 30-33
Did you find any workaround?
Didn't find any
Relevant log output
No response