MAUI Shell how to change color of 'Text' in Flyout-item 'MenuItem' and add extra Icon

Question

In the AppShell.xml

<Shell 
    ...
    FlyoutBackgroundColor="#353535"
    Shell.FlyoutBehavior="Flyout">

    <MenuItem Command="{Binding ExpandCollapseHouseCommand}" Text="House">
       <MenuItem.IconImageSource>
          <FontImageSource
              FontFamily="FontAwesome"
              Glyph="{x:Static customRenderer:Icon.House}"
              Color="White" />
      </MenuItem.IconImageSource>
  </MenuItem>
  ...
</Shell>

With this MenuItem I try to mimic an "Expand/Collapse accordion" so that a click on it will show more items beneath it. I have two questions:

Question 1

I want the 'Text' and the 'Icon' to be white. Easy to change color of the icon, so thought that changing color of the text should be just as easy. In the docs

https://learn.microsoft.com/en-us/dotnet/maui/fundamentals/shell/flyout?view=net-maui-8.0#style-flyoutitem-and-menuitem-objects

it states that

Shell includes three style classes, which are automatically applied to FlyoutItem and MenuItem objects. The style class names are FlyoutItemLabelStyle, FlyoutItemImageStyle, and FlyoutItemLayoutStyle.

So I tried to insert

<Style TargetType="Label" Class="FlyoutItemLabelStyle">
    <Setter Property="TextColor" Value="White" />
</Style>

into my Resourses/Styles/Styles.xml, but that makes no difference. Also tried including it directly inside the <Shell.Resources>

<Shell.Resources>
    <Style TargetType="Label" Class="FlyoutItemLabelStyle">
        <Setter Property="TextColor" Value="White" />
    </Style>
</Shell.Resources>

Furthermore, I tried added the StyleClass="FlyoutItemLabelStyle" property to the 'MenuItem' element, but nothing works.

Any help much appreciated.

Question 2

I need to add an indicator (aka an extra icon) to the MenuItem, to indicate whether it is expanded or collapsed. Natively, the MenuItem has only a 'Text' and one 'Icon' property. I know how to style this, but do not know how to add the extra icon.

Answer 1

I can reproduce your problem on the android. But on the windows platform, it worked well. So you can report this issue on the maui repo.

And you can Define MenuItem appearance to achieve the effect you want.

   <Shell.MenuItemTemplate>
        <DataTemplate>
            <Grid ColumnDefinitions="3*,4*,3*">
                <Image Grid.Column="0"
                       Source="{Binding Icon}"
                       Margin="5"
                       HeightRequest="45" />
                <Label Grid.Column="1"
                       Text="{Binding Text}"
                       TextColor="Green"
                       FontAttributes="Italic"
                       VerticalTextAlignment="Center" />
                <Image Grid.Column="2" Source="indicator.png" HeightRequest="45"/>
            </Grid>
        </DataTemplate>
    </Shell.MenuItemTemplate>

And then declare the menuitem:

<MenuItem Text="Hello" IconImageSource="itemicon.png"/>

=================

Thanks for Vering's feed back: Declaring the <Shell.MenuItemTemplate> below the <MenuItem> will custom the special menuitem.

<MenuItem>
     <Shell.MenuItemTemplate>
        <DataTemplate>
            <Grid ColumnDefinitions="3*,4*,3*">
                <Image Grid.Column="0"
                       Source="icon.png"
                       Margin="5"
                       HeightRequest="45" />
                <Label Grid.Column="1"
                       Text="{Binding Text}"
                       TextColor="Green"
                       FontAttributes="Italic"
                       VerticalTextAlignment="Center" />
                <Image Grid.Column="2" Source="indicator.png" HeightRequest="45"/>
            </Grid>
        </DataTemplate>
    </Shell.MenuItemTemplate>
</MenuItem>