如何在MAUI中修改Flyout ShellContent标题文本颜色？

我需要修改Flyout里ShellContent的标题文本颜色，但ShellContent本身没有合适的前景/文本颜色属性可以直接设置，希望用C#实现这个效果。

我的现有代码 #

创建ShellContent的C#代码 #

ShellContent _ShellContent = new ShellContent
{
    Title = "Home", 
    ContentTemplate = new DataTemplate(typeof(HomePage)),
    //Route= "HomePage", 
     
    Icon = new FontImageSource
    {
        Glyph = Application.Current.Resources["Font-Home"].ToString(),
        FontFamily = "MaterialFontFamily",
        Color = _ShellIconColor
    },
};
    
ShellPages.Items.Add(_ShellContent);

AppShell.xaml代码 #

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="myProject.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:myProject"
    xmlns:test="clr-namespace:myProject.Views" 
    Shell.FlyoutBehavior="Flyout" x:Name="ShellPages"> 
        
</Shell>

解决方案 #

ShellContent本身没有直接控制标题颜色的属性，可通过以下两种C#方式实现需求：

方式1：自定义Flyout项模板（动态创建） #

在AppShell的构造函数中构建自定义布局模板，直接控制标题文本颜色：

public AppShell()
{
    InitializeComponent();

    // 构建自定义Flyout项布局模板
    var flyoutItemTemplate = new DataTemplate(() =>
    {
        var containerGrid = new Grid { Padding = new Thickness(10, 6) };
        containerGrid.ColumnDefinitions.Add(new ColumnDefinition(GridLength.Auto));
        containerGrid.ColumnDefinitions.Add(new ColumnDefinition(GridLength.Star));

        // 图标控件
        var iconImg = new Image
        {
            WidthRequest = 24,
            HeightRequest = 24,
            VerticalOptions = LayoutOptions.Center
        };
        iconImg.SetBinding(Image.SourceProperty, "Icon");

        // 标题文本，设置目标颜色
        var titleLabel = new Label
        {
            TextColor = Colors.DarkSlateBlue, // 替换为你需要的颜色
            VerticalOptions = LayoutOptions.Center,
            Margin = new Thickness(12, 0, 0, 0)
        };
        titleLabel.SetBinding(Label.TextProperty, "Title");

        containerGrid.Children.Add(iconImg);
        Grid.SetColumn(titleLabel, 1);
        containerGrid.Children.Add(titleLabel);

        return containerGrid;
    });

    // 给Shell设置自定义模板
    Shell.SetFlyoutItemTemplate(this, flyoutItemTemplate);

    // 原有添加ShellContent的代码
    Color _ShellIconColor = Colors.Gray;
    ShellContent _ShellContent = new ShellContent
    {
        Title = "Home",
        ContentTemplate = new DataTemplate(typeof(HomePage)),
        Icon = new FontImageSource
        {
            Glyph = Application.Current.Resources["Font-Home"].ToString(),
            FontFamily = "MaterialFontFamily",
            Color = _ShellIconColor
        },
    };
    ShellPages.Items.Add(_ShellContent);
}

方式2：全局样式统一设置 #

如果要统一所有Flyout项的标题颜色，可在App初始化代码中添加全局样式：

public App()
{
    InitializeComponent();

    // 创建Flyout标题文本样式
    var flyoutLabelStyle = new Style(typeof(Label))
    {
        Setters = 
        {
            new Setter(Label.TextColorProperty, Colors.ForestGreen) // 设置目标颜色
        }
    };

    Resources.Add("FlyoutItemLabelStyle", flyoutLabelStyle);

    // 绑定到Shell的Flyout标签样式
    MainPage = new AppShell();
    Shell.SetFlyoutItemLabelStyle(MainPage, (Style)Resources["FlyoutItemLabelStyle"]);
}

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