如何修改Xamarin Forms Shell FlyoutItem标题及选中项颜色？

方法1：使用Shell内置属性快速设置 #

Shell提供了直接控制Flyout样式的属性，在AppShell.xaml中配置即可：

<Shell
    ...
    FlyoutForegroundColor="#666666" <!-- 未选中的标题文字颜色 -->
    FlyoutSelectedItemForegroundColor="#FF5722" <!-- 选中项的标题文字颜色 -->
    SelectedFlyoutItemBackgroundColor="#EFEFEF" <!-- 选中项的背景色 -->
    FlyoutBackgroundColor="#FFFFFF"> <!-- Flyout整体背景色（可选） -->

    <!-- 你的FlyoutItem定义 -->
    <FlyoutItem Title="首页" Icon="home.png">
        <ShellContent ContentTemplate="{DataTemplate local:MainPage}" />
    </FlyoutItem>
    ...
</Shell>

方法2：自定义FlyoutItemTemplate（更灵活） #

如果需要个性化样式（比如结合图标颜色变化），可以自定义ItemTemplate：

<Shell ...>
    <Shell.FlyoutItemTemplate>
        <DataTemplate>
            <Grid Padding="10" HeightRequest="50">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="40" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <!-- 图标 -->
                <Image Source="{Binding Icon}" 
                       WidthRequest="24"
                       HeightRequest="24"
                       Color="{Binding IsSelected, Converter={StaticResource BoolToColorConverter}, ConverterParameter='Unselected=#999999,Selected=#FF5722'}" />
                <!-- 标题文字 -->
                <Label Grid.Column="1" 
                       Text="{Binding Title}"
                       VerticalTextAlignment="Center"
                       TextColor="{Binding IsSelected, Converter={StaticResource BoolToColorConverter}, ConverterParameter='Unselected=#666666,Selected=#FF5722'}" />
            </Grid>
        </DataTemplate>
    </Shell.FlyoutItemTemplate>

    <!-- 你的FlyoutItem -->
    <FlyoutItem Title="首页" Icon="home.png">
        <ShellContent ContentTemplate="{DataTemplate local:MainPage}" />
    </FlyoutItem>
    ...
</Shell>

然后在资源字典中添加布尔值转颜色的转换器（比如在App.xaml或AppShell.xaml的ResourceDictionary里）：

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

转换器的C#代码：

public class BoolToColorConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is bool isSelected && parameter is string param)
        {
            var parts = param.Split(',');
            var unselectedHex = parts.First(p => p.StartsWith("Unselected=")).Split('=')[1];
            var selectedHex = parts.First(p => p.StartsWith("Selected=")).Split('=')[1];
            return Color.FromHex(isSelected ? selectedHex : unselectedHex);
        }
        return Color.Default;
    }

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

方法3：平台特定样式（iOS/Android单独调整） #

如果需要针对不同平台做差异化样式，可使用自定义渲染器：

Android端 #

在Android项目中创建Shell渲染器：

[assembly: ExportRenderer(typeof(AppShell), typeof(CustomShellRenderer))]
namespace YourApp.Droid
{
    public class CustomShellRenderer : ShellRenderer
    {
        public CustomShellRenderer(Context context) : base(context)
        {
        }

        protected override IShellFlyoutAppearanceTracker CreateFlyoutAppearanceTracker()
        {
            return new CustomFlyoutAppearanceTracker();
        }
    }

    public class CustomFlyoutAppearanceTracker : IShellFlyoutAppearanceTracker
    {
        public void Dispose()
        {
        }

        public void ResetAppearance(ShellItem shellItem, IShellFlyoutItemRenderer flyoutItemRenderer)
        {
            ((TextView)flyoutItemRenderer).SetTextColor(Android.Graphics.Color.ParseColor("#666666"));
            ((TextView)flyoutItemRenderer).SetBackgroundColor(Android.Graphics.Color.Transparent);
        }

        public void SetAppearance(ShellItem shellItem, IShellFlyoutItemRenderer flyoutItemRenderer, FlyoutItemAppearance appearance)
        {
            if (shellItem.IsChecked)
            {
                ((TextView)flyoutItemRenderer).SetTextColor(Android.Graphics.Color.ParseColor("#FF5722"));
                ((TextView)flyoutItemRenderer).SetBackgroundColor(Android.Graphics.Color.ParseColor("#EFEFEF"));
            }
            else
            {
                ResetAppearance(shellItem, flyoutItemRenderer);
            }
        }
    }
}

iOS端 #

在iOS项目中创建Shell渲染器：

[assembly: ExportRenderer(typeof(AppShell), typeof(CustomShellRenderer))]
namespace YourApp.iOS
{
    public class CustomShellRenderer : ShellRenderer
    {
        protected override IShellFlyoutItemAppearanceTracker CreateFlyoutItemAppearanceTracker()
        {
            return new CustomFlyoutItemAppearanceTracker();
        }
    }

    public class CustomFlyoutItemAppearanceTracker : IShellFlyoutItemAppearanceTracker
    {
        public void Dispose()
        {
        }

        public void ResetAppearance(UITableViewCell cell)
        {
            cell.TextLabel.TextColor = UIColor.FromRGB(102, 102, 102);
            cell.BackgroundColor = UIColor.White;
        }

        public void SetAppearance(UITableViewCell cell, ShellItem item)
        {
            if (item.IsChecked)
            {
                cell.TextLabel.TextColor = UIColor.FromRGB(255, 87, 34);
                cell.BackgroundColor = UIColor.FromRGB(239, 239, 239);
            }
            else
            {
                ResetAppearance(cell);
            }
        }
    }
}

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