Xamarin.Forms: How to set the Color of Icons in FlyoutItems in AppShell

Question

I am implementing a Xamarin.Forms app using AppShell and can't seem to figure out how to set the color of the selected / unselected icons in the Flyout menu. Here is the section of the appshell.xaml that I believe is controlling the behavior (I used various high contrast colors to show what settings are controlling what). (The complete code sample: https://github.com/wadebaird/ShellExample for more reference):

<Style x:Name="FlyoutItem" Class="FlyoutItemLayoutStyle" TargetType="Layout" ApplyToDerivedTypes="True">
        <Setter Property="VisualStateManager.VisualStateGroups">
            <VisualStateGroupList>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal">
                        <VisualState.Setters>
                            <!-- This is the color of the unselected text for the labels in the flyout-->
                            <Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="Magenta" />
                            <Setter TargetName="FlyoutItemLabel" Property="Label.BackgroundColor" Value="Cyan" />
                            <!-- This is the background color of the selected icon in the flyout -->
                            <Setter Property="BackgroundColor" Value="Green" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="Selected">
                        <VisualState.Setters>
                            <!-- This is the color of the selected text in the flyout -->
                            <Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="Black"/>
                            <Setter TargetName="FlyoutItemLabel" Property="Label.BackgroundColor" Value="Yellow" />
                            <!-- This is the background color of the selected icon in the flyout -->
                            <Setter Property="BackgroundColor" Value="Red" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateGroupList>
        </Setter>
    </Style>

And here is the visuals from these settings. In this image, the "Entity at the top is the "selected" item. I would expect / want the icons to match the colors of the text but can't seem to find the setting.

Here is what I'm going for to show how "white" for the icons doesn't work:

I can manually set the color on the FontImageSource, but then it is always that color and doesn't match the selected / unselected:

<ShellContent Route="aboutPage" Title="About" ContentTemplate="{DataTemplate views:AboutPage}" >
    <ShellContent.Icon>
        <FontImageSource Size="{StaticResource FlyoutIconSize}" Color="Black" Glyph="{x:Static fontAwesome:FontAwesomeIcons.InfoCircle}" FontFamily="FA-Solid" />
    </ShellContent.Icon>
</ShellContent>

I tried various things such as this withing the "Common States"- "Normal"/"Selected" and couldn't get anything to work.:

<Setter Property="FontImageSource.Color" Value="{AppThemeBinding Light={StaticResource PrimaryUnselectedTextColorLight}, Dark={StaticResource PrimaryUnselectedTextColorDark}}" />

And on a side note (and this is probably a bug). It appears on iOS that when first opening the flyout nothing is "selected":

Where on Android, the proper item is selected:

I know this is a seperate item, and I'll log a bug if I can't find an existing issue/bug, but I figured I'd mention it as someone thgat knows the answer to my above probably is already aware of this issue.

Answer 1

You could use the Shell.ItemTemplate to set the background color of the Label and Icon. And use the VisualStateGroup to change the color of Selected status.

Shell.ItemTemplate:

   <Shell.ItemTemplate>
    <DataTemplate>
        <Grid ColumnDefinitions="0.2*,0.8*" ColumnSpacing="0" Style="{StaticResource FloutItemStyle}">
            <Image  x:Name="FlyoutItemIcon"  Source="{Binding FlyoutIcon}" HeightRequest="45" />
            <Label x:Name="FlyoutItemLabel"   Grid.Column="1"
                   Text="{Binding Title}"
                   FontAttributes="Italic"
                   VerticalTextAlignment="Center" />
        </Grid>
    </DataTemplate>
</Shell.ItemTemplate>

Style:

 <Style  x:Key="FloutItemStyle" Class="FlyoutItemLayoutStyle" TargetType="Layout" ApplyToDerivedTypes="True">
            <Setter Property="VisualStateManager.VisualStateGroups">
                <VisualStateGroupList>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal">
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor" Value="{x:OnPlatform UWP=Transparent, iOS=White}" />
                                <Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="{StaticResource Primary}" />
                                <Setter TargetName="FlyoutItemLabel" Property="Label.BackgroundColor" Value="Blue" />
                                <Setter TargetName="FlyoutItemIcon" Property="Image.BackgroundColor" Value="Green" />
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="Selected">
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor" Value="{StaticResource Primary}" />
                                <Setter TargetName="FlyoutItemLabel" Property="Label.BackgroundColor" Value="{StaticResource Primary}" />
                                <Setter TargetName="FlyoutItemIcon" Property="Image.BackgroundColor" Value="{StaticResource Primary}" />
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateGroupList>
            </Setter>
        </Style>