Xamarin Shell导航Flyout选中项标签颜色无法变更问题求助

问题原因 #

Shell 的 Flyout 选中状态仅会同步到 ItemTemplate 的根容器（你代码中的外层 Frame），嵌套在内部的 Label 不会自动接收 CommonStates 组的 Selected 状态变更，所以你单独给 Label 定义的 VisualState 规则完全不会触发，这就是选中后文字颜色无变化的核心原因。

解决方案 #

推荐两种可直接复用的修改方式，任选其一即可：

方式1：使用 DataTrigger 绑定内置的 IsSelected 属性（最简洁）

Shell 的 Flyout 项绑定上下文自带 IsSelected 字段，直接给 Label 加触发器即可，无需保留单独的 Label 样式：

<Label  Padding="25,0,0,0" 
        Text="{Binding Title}"
        FontAttributes="Bold"
        FontSize="18"
        VerticalTextAlignment="Center"
        TextColor="#6b6b6b">
    <Label.Triggers>
        <DataTrigger TargetType="Label" Binding="{Binding IsSelected}" Value="True">
            <Setter Property="TextColor" Value="#fff"/>
        </DataTrigger>
    </Label.Triggers>
</Label>

修改后可删除原 FloutItemStyles 样式代码。

方式2：将选中态规则合并到根Frame的VisualState中

直接在 ItemTemplate 的根 Frame 上定义视觉状态，通过 TargetName 同步修改子 Label 的颜色：

<Shell.ItemTemplate >
<DataTemplate  >
    <Frame x:Name="ItemRoot" Padding="25,5">                
        <FlexLayout Margin="0,5" AlignItems="Center" JustifyContent="Start">
            <Frame Padding="5" HeightRequest="30"  WidthRequest="30" CornerRadius="100"> 
                <Image Source="{Binding FlyoutIcon}" Margin="5" WidthRequest="30" HeightRequest="30" />
            </Frame>
            <Label x:Name="ItemLabel" Padding="25,0,0,0" 
                    Text="{Binding Title}"
                    FontAttributes="Bold"
                    FontSize="18"
                    VerticalTextAlignment="Center" 
                    TextColor="#6b6b6b"/>
        </FlexLayout>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroupList>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal" />
                    <VisualState x:Name="Selected">
                        <VisualState.Setters>
                            <Setter Property="BackgroundColor" Value="#384a1a"/>
                            <Setter TargetName="ItemLabel" Property="Label.TextColor" Value="#fff"/>
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateGroupList>
        </VisualStateManager.VisualStateGroups>
    </Frame>
</DataTemplate>
</Shell.ItemTemplate>

修改后可删除原 FloutItemStyle、FloutItemStyles 两个独立样式。

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