MAUI中如何更改Flyout Menu选中项侧边指示器的颜色？

我不确定该元素的具体名称，想要更改图中选中项的颜色，附上菜单的DataTemplate和样式代码，推测问题与这些代码相关。

DataTemplate代码 #

<DataTemplate>
    <Grid Style="{StaticResource FlyoutItemStyle}" WidthRequest="280" ColumnDefinitions="Auto, *" Padding="0, 10, 0, 10">
        <Image Source="{Binding FlyoutIcon}"
               Margin="10"
               VerticalOptions="Center"
               HorizontalOptions="Center"
               HeightRequest="38"
               WidthRequest="38" />

        <Label Grid.Column="1" 
               Text="{Binding Title}" 
               FontSize="12"
               HorizontalOptions="StartAndExpand"
               VerticalOptions="Center"
               x:Name="_label">
            <Label.Style>
                <Style TargetType="Label">
                    <Setter Property="TextColor" Value="{StaticResource AusDx_Gold}" />
                    <Style.Triggers>
                        <DataTrigger TargetType="Label" Binding="{Binding IsEnabled}" Value="False">
                            <Setter Property="TextColor"  Value="{StaticResource AusDx_Blue}" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Label.Style>
        </Label>
    </Grid>
</DataTemplate>

样式代码 #

<Style x:Key="FlyoutItemStyle" TargetType="Grid">
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal" />
                <VisualState x:Name="Selected">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="LightGray"/>
                        <Setter TargetName="_label" Property="Label.TextColor" Value="Black" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

解决方案 #

原代码的核心问题：外部Style无法直接引用DataTemplate内部的本地控件名称（_label），导致Selected状态下的文字颜色设置不生效。以下是两种可行的修改方案：

方案1：将VisualState整合到DataTemplate内部

把VisualStateManager直接放到DataTemplate里的Grid中，直接访问内部控件修改选中状态颜色：

<DataTemplate>
    <Grid WidthRequest="280" ColumnDefinitions="Auto, *" Padding="0, 10, 0, 10">
        <!-- 新增VisualState配置 -->
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal" />
                <VisualState x:Name="Selected">
                    <VisualState.Setters>
                        <!-- 修改选中时的背景色 -->
                        <Setter Property="BackgroundColor" Value="LightGray"/>
                        <!-- 修改选中时的文字颜色，可替换为你的静态资源 -->
                        <Setter TargetName="_label" Property="TextColor" Value="Black" />
                        <!-- 如果是矢量图标，可添加此行修改图标颜色 -->
                        <!-- <Setter TargetName="_icon" Property="TintColor" Value="Black" /> -->
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <Image x:Name="_icon" Source="{Binding FlyoutIcon}"
               Margin="10"
               VerticalOptions="Center"
               HorizontalOptions="Center"
               HeightRequest="38"
               WidthRequest="38" />

        <Label Grid.Column="1" 
               x:Name="_label"
               Text="{Binding Title}" 
               FontSize="12"
               HorizontalOptions="StartAndExpand"
               VerticalOptions="Center">
            <Label.Style>
                <Style TargetType="Label">
                    <Setter Property="TextColor" Value="{StaticResource AusDx_Gold}" />
                    <Style.Triggers>
                        <DataTrigger TargetType="Label" Binding="{Binding IsEnabled}" Value="False">
                            <Setter Property="TextColor"  Value="{StaticResource AusDx_Blue}" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Label.Style>
        </Label>
    </Grid>
</DataTemplate>

方案2：通过ViewModel绑定选中状态

给每个侧边栏项的ViewModel添加IsSelected属性（选中时设为True），用DataTrigger控制颜色：

1. 修改Label的Style，添加选中状态触发器：

<Label.Style>
    <Style TargetType="Label">
        <Setter Property="TextColor" Value="{StaticResource AusDx_Gold}" />
        <Style.Triggers>
            <DataTrigger TargetType="Label" Binding="{Binding IsEnabled}" Value="False">
                <Setter Property="TextColor"  Value="{StaticResource AusDx_Blue}" />
            </DataTrigger>
            <!-- 新增选中状态的文字颜色设置 -->
            <DataTrigger TargetType="Label" Binding="{Binding IsSelected}" Value="True">
                <Setter Property="TextColor" Value="Black" /> <!-- 替换为目标颜色 -->
            </DataTrigger>
        </Style.Triggers>
    </Style>
</Label.Style>

2. 修改Grid的Style，用DataTrigger控制背景色：

<Style x:Key="FlyoutItemStyle" TargetType="Grid">
    <Setter Property="BackgroundColor" Value="Transparent" />
    <Style.Triggers>
        <DataTrigger Binding="{Binding IsSelected}" Value="True">
            <Setter Property="BackgroundColor" Value="LightGray" /> <!-- 替换为目标背景色 -->
        </DataTrigger>
    </Style.Triggers>
</Style>

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