.NET MAUI中如何修改Flyout Shell选中项左侧蓝色条的颜色？

我正在使用.NET MAUI开发一款Windows应用，应用中使用了带有标签页的Flyout Shell。我想要修改选中项的颜色，具体是选中项左侧显示的蓝色小条的颜色。我找不到修改该元素的方法，想知道是否可以实现？

补充尝试 #

我尝试了以下代码并调整了MenuItemTemplate，但仍无法修改选中项上的蓝色小条颜色。

<Shell.MenuItemTemplate>
    <DataTemplate>
        <Grid ColumnDefinitions="0.2*,0.8*">
            <Image Source="home.png"
                   Margin="5"
                   HeightRequest="45"/>
            <Label Grid.Column="1"
                   Text="test"
                   FontAttributes="Italic"
                   VerticalTextAlignment="Center" 
                   />
            <Label Grid.Column="0"
                   Opacity="50"
                   BackgroundColor="Red"
                   />
        </Grid>
    </DataTemplate>
</Shell.MenuItemTemplate>

上述代码的效果如下：

解决方案 #

这个蓝色小条是FlyoutItem的默认选中指示器，无法通过MenuItemTemplate直接修改，提供两种可行方案：

方案1：自定义跨平台选中指示器 #

在AppShell.xaml的资源字典中添加自定义样式，用自己的指示器替换默认蓝色条：

<Shell.Resources>
    <Style TargetType="FlyoutItem">
        <Setter Property="Shell.FlyoutItemIsSelected" Value="{Binding IsSelected}" />
        <Setter Property="Shell.FlyoutItemTemplate">
            <Setter.Value>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <!-- 自定义图标和文字 -->
                        <Image Source="{Binding Icon}" Margin="5" HeightRequest="45"/>
                        <Label Grid.Column="1" Text="{Binding Title}" VerticalTextAlignment="Center"/>
                        <!-- 自定义选中指示器 -->
                        <BoxView 
                            WidthRequest="4"
                            BackgroundColor="Red"
                            IsVisible="{Binding IsSelected}"
                            HorizontalOptions="Start"
                            VerticalOptions="Fill"/>
                    </Grid>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Shell.Resources>

该方案通过绑定IsSelected属性控制自定义指示器的显示，完全替代原生蓝色条，支持跨平台使用。

方案2：Windows平台原生渲染器修改 #

针对Windows平台直接修改原生控件样式，精准替换默认蓝色条：

1. 在Windows项目中创建自定义Shell渲染器：

using Microsoft.Maui.Controls.Platform;
using Microsoft.UI.Xaml.Controls;

namespace YourAppNamespace.WinUI;

public class CustomShellRenderer : ShellRenderer
{
    protected override IShellFlyoutContentRenderer CreateShellFlyoutContentRenderer()
    {
        return new CustomShellFlyoutContentRenderer(this);
    }
}

public class CustomShellFlyoutContentRenderer : ShellFlyoutContentRenderer
{
    public CustomShellFlyoutContentRenderer(IShellContext context) : base(context) { }

    protected override void OnElementChanged(ElementChangedEventArgs<Shell> e)
    {
        base.OnElementChanged(e);
        if (ListView != null)
        {
            ListView.ItemContainerStyle = new Microsoft.UI.Xaml.Style(typeof(ListViewItem))
            {
                Setters =
                {
                    new Microsoft.UI.Xaml.Setter(ListViewItem.SelectedBorderBrushProperty, 
                        new Microsoft.UI.Xaml.Media.SolidColorBrush(Microsoft.UI.Colors.Red)),
                    new Microsoft.UI.Xaml.Setter(ListViewItem.SelectedBorderThicknessProperty, 
                        new Microsoft.UI.Xaml.Thickness(4, 0, 0, 0))
                }
            };
        }
    }
}

2. 在Windows项目的MauiProgram.cs中注册该渲染器：

builder.ConfigureMauiHandlers(handlers =>
{
#if WINDOWS
    handlers.AddHandler(typeof(Shell), typeof(CustomShellRenderer));
#endif
});

此方案直接修改Windows原生ListViewItem的选中边框样式，完全匹配原生交互逻辑。

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