MAUI Shell：修改Flyout中MenuItem文本颜色及添加额外图标

我在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>

我尝试通过该MenuItem实现「展开/折叠手风琴」效果，点击它可显示下方更多条目，现存在两个技术问题：

问题1：MenuItem文本颜色无法改为白色 #

图标颜色已设为白色，但文本颜色修改始终无效。我尝试过以下方法：

• 在Resources/Styles/Styles.xml中添加针对FlyoutItemLabelStyle的Label样式

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

• 将上述样式直接放入<Shell.Resources>内
• 给MenuItem添加StyleClass="FlyoutItemLabelStyle"属性
  以上操作均无效果，求解决办法。

问题2：为MenuItem添加展开/折叠状态的指示图标 #

MenuItem原生只有Text和Icon两个属性，我需要额外添加一个图标来标识当前是展开还是折叠状态，不知道该如何实现。

针对问题1：修改MenuItem文本颜色 #

MAUI Shell的FlyoutItemLabelStyle类样式容易被默认样式覆盖，可通过以下两种方式解决：

1. 全局/局部覆盖MenuItem样式
   在Resources/Styles/Styles.xml中定义针对MenuItem的样式，直接设置文本颜色：

<!-- 全局应用到所有MenuItem -->
<Style TargetType="MenuItem">
    <Setter Property="TextColor" Value="White" />
</Style>

<!-- 仅应用到指定MenuItem -->
<Style TargetType="MenuItem" Class="CustomFlyoutMenuItem">
    <Setter Property="TextColor" Value="White" />
</Style>

如果用局部样式，给目标MenuItem添加样式类：

<MenuItem StyleClass="CustomFlyoutMenuItem" ... />

2. 正确配置FlyoutItemLabelStyle
   确保样式开启ApplyToDerivedTypes，并放在Shell资源中：

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

若仍无效，可自定义Shell.MenuItemTemplate强制指定文本颜色：

<Shell.MenuItemTemplate>
    <DataTemplate>
        <Grid ColumnDefinitions="40,*">
            <Image Source="{Binding Icon}" WidthRequest="24" HeightRequest="24" Margin="10" />
            <Label Grid.Column="1" Text="{Binding Text}" TextColor="White" VerticalOptions="Center" />
        </Grid>
    </DataTemplate>
</Shell.MenuItemTemplate>

针对问题2：添加展开/折叠指示图标 #

MenuItem原生不支持多图标，需通过自定义模板实现：

1. 定义Shell的MenuItem模板

<Shell.MenuItemTemplate>
    <DataTemplate>
        <Grid ColumnDefinitions="40,*,40">
            <!-- 主图标 -->
            <Image Source="{Binding Icon}" WidthRequest="24" HeightRequest="24" Margin="10" />
            <!-- 文本 -->
            <Label Grid.Column="1" Text="{Binding Text}" TextColor="White" VerticalOptions="Center" />
            <!-- 展开/折叠指示图标 -->
            <Image 
                Grid.Column="2" 
                Source="{Binding IsExpanded, Converter={StaticResource BoolToIconConverter}}" 
                WidthRequest="20" 
                HeightRequest="20" 
                Margin="10" 
                VerticalOptions="Center" />
        </Grid>
    </DataTemplate>
</Shell.MenuItemTemplate>

2. 实现布尔值转图标转换器
   创建BoolToIconConverter类，根据状态返回对应图标：

public class BoolToIconConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        bool isExpanded = (bool)value;
        return new FontImageSource
        {
            FontFamily = "FontAwesome",
            Glyph = isExpanded ? "\uf063" : "\uf062", // 向上/向下箭头Glyph
            Color = Colors.White
        };
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

3. ViewModel中添加状态属性
   在ViewModel里定义IsExpanded属性，绑定到MenuItem上下文：

private bool _isExpanded;
public bool IsExpanded
{
    get => _isExpanded;
    set => SetProperty(ref _isExpanded, value);
}

// 命令中切换状态
private void ExecuteExpandCollapse()
{
    IsExpanded = !IsExpanded;
    // 处理展开/折叠逻辑
}

4. 注册转换器
   在Resources/Styles/Styles.xml中注册转换器：

<ResourceDictionary>
    <local:BoolToIconConverter x:Key="BoolToIconConverter" />
</ResourceDictionary>

内容的提问来源于stack exchange，提问作者Vering