如何修改MAUI .NET Flyout Menu选中项默认紫色？

一、全局覆盖所有控件的选中强调色 #

如果希望一次性修改所有控件（包括标签页、Flyout菜单）的选中状态颜色，直接在Resources/Styles/Colors.xaml中替换Accent颜色值：

<Color x:Key="Accent">#FF6347</Color> <!-- 替换成你需要的颜色 -->

MAUI默认会将Accent色作为大多数控件选中、高亮状态的默认颜色，修改后全局生效。

二、单独修改Flyout菜单的选中样式 #

若仅需调整Flyout菜单的选中效果，可在AppShell.xaml中添加自定义样式：

方法1：通过触发器修改FlyoutItem样式 #

在<Shell.Resources>节点内添加以下代码：

<Style TargetType="FlyoutItem">
    <Style.Triggers>
        <Trigger TargetType="FlyoutItem" Property="IsSelected" Value="True">
            <!-- 修改选中时的文字颜色 -->
            <Setter Property="TextColor" Value="#2E8B57" />
            <!-- 修改选中时的图标颜色 -->
            <Setter Property="IconColor" Value="#2E8B57" />
            <!-- 可选：修改选中项的背景色 -->
            <Setter Property="Shell.FlyoutItemBackground" Value="#E6F7F0" />
        </Trigger>
    </Style.Triggers>
</Style>

方法2：自定义FlyoutItem模板（完全控制样式） #

如果触发器方式不生效，可通过自定义ControlTemplate实现更精细的控制：

<Shell.Resources>
    <ControlTemplate x:Key="CustomFlyoutItemTemplate">
        <Grid x:Name="RootGrid" Padding="12,8">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <!-- 未选中状态 -->
                    <VisualState x:Name="Normal">
                        <VisualState.Setters>
                            <Setter TargetName="FlyoutIcon" Property="Color" Value="{StaticResource Secondary}" />
                            <Setter TargetName="FlyoutLabel" Property="TextColor" Value="{StaticResource Secondary}" />
                        </VisualState.Setters>
                    </VisualState>
                    <!-- 选中状态 -->
                    <VisualState x:Name="Selected">
                        <VisualState.Setters>
                            <Setter TargetName="FlyoutIcon" Property="Color" Value="#FF6347" />
                            <Setter TargetName="FlyoutLabel" Property="TextColor" Value="#FF6347" />
                            <Setter TargetName="RootGrid" Property="BackgroundColor" Value="#FFE5D9" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="40" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Image x:Name="FlyoutIcon" Source="{Binding Icon}" VerticalOptions="Center" />
            <Label x:Name="FlyoutLabel" Grid.Column="1" Text="{Binding Title}" VerticalOptions="Center" FontSize="16" />
        </Grid>
    </ControlTemplate>

    <Style TargetType="FlyoutItem">
        <Setter Property="ControlTemplate" Value="{StaticResource CustomFlyoutItemTemplate}" />
    </Style>
</Shell.Resources>

三、平台特定补充配置（若上述方法仍不生效） #

部分平台可能需要单独调整原生主题：

Android平台 #

打开Platforms/Android/Resources/values/styles.xml，修改主题中的颜色属性：

<style name="Theme.Maui.Light" parent="Theme.MaterialComponents.Light.NoActionBar">
    <!-- 替换主色和强调色 -->
    <item name="colorPrimary">#FF6347</item>
    <item name="colorAccent">#FF6347</item>
    <!-- 替换控件高亮色 -->
    <item name="colorControlHighlight">#FFE5D9</item>
</style>

iOS平台 #

打开Platforms/iOS/AppDelegate.cs，在FinishedLaunching方法中添加以下代码：

public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
    // 设置导航栏和列表的选中 tint 色
    UIKit.UINavigationBar.Appearance.TintColor = UIKit.UIColor.FromHexString("#FF6347");
    UIKit.UITableView.Appearance.TintColor = UIKit.UIColor.FromHexString("#FF6347");

    Microsoft.Maui.Controls.Compatibility.Forms.Init();
    MauiProgram.CreateMauiApp().RunWindow(app.KeyWindow);

    return base.FinishedLaunching(app, options);
}

注意事项 #

• 修改后需清理项目并重新编译（尤其是平台特定配置）
• 若使用了第三方UI库，可能需要覆盖库内的默认样式
• 确保你的样式没有被更具体的局部样式覆盖

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