Xamarin Shell Navigation Flyout Selected Label Color Not Changing

Question

• here is my code in shell.xaml selected frame colour for flyout item is working for me its green it showing well but for the selected label it is same as normal flyout label color i dont know what i am missing here

• this is for flyout item frame

  <Style x:Key="FloutItemStyle" TargetType="Frame">
  <Setter Property="VisualStateManager.VisualStateGroups">
  <VisualStateGroupList>
  <VisualStateGroup x:Name="CommonStates">
  <VisualState x:Name="Normal" />
  <VisualState x:Name="Selected">
  <VisualState.Setters>
  <Setter Property="BackgroundColor" Value="#384a1a"/>                                    
  </VisualState.Setters>
  </VisualState>
  </VisualStateGroup>
  </VisualStateGroupList>
  </Setter>
  </Style>
  

• this is for label style

  <Style x:Key="FloutItemStyles" TargetType="Label">
  <Setter Property="VisualStateManager.VisualStateGroups">
  <VisualStateGroupList>
  <VisualStateGroup x:Name="CommonStates">
  <VisualState x:Name="Normal">
  <VisualState.Setters>                                    
  <Setter Property="TextColor" Value="#6b6b6b"/>
  </VisualState.Setters>
  </VisualState>
  <VisualState x:Name="Selected">
  <VisualState.Setters>                                    
  <Setter Property="TextColor" Value="#fff"/>
  </VisualState.Setters>
  </VisualState>
  </VisualStateGroup>
  </VisualStateGroupList>
  </Setter>
  </Style>
  

• this my template

  <Shell.FlyoutHeaderTemplate>
  <DataTemplate>
  <Grid HeightRequest="110">
  <Grid.RowDefinitions>
  <RowDefinition Height="2*"/>
  </Grid.RowDefinitions>
  <FlexLayout x:Name="imageHolder" AlignItems="Center" JustifyContent="Center" Padding="20,10" BackgroundColor="#fff">
  <Image Source="logo.png" />
  <Label TextColor="#6b6b6b" x:Name="UserName"></Label>
  </FlexLayout>
  </Grid>
  </DataTemplate>
  </Shell.FlyoutHeaderTemplate>
  <Shell.ItemTemplate >
  <DataTemplate  >
  <Frame Style="{StaticResource FloutItemStyle}"  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  Style="{StaticResource FloutItemStyles}"  Padding="25,0,0,0" 
  Text="{Binding Title}"
  FontAttributes="Bold"
  FontSize="18"
  VerticalTextAlignment="Center" />
  </FlexLayout>       
  </Frame>
  </DataTemplate>
  </Shell.ItemTemplate>
  

Answer 1

I think it has to do with the label being inside the frame, and this causes that the label state does not change

If you want to trigger several changes upon selection you can check the Microsoft documentation about the flyout styling combined with this other example

In this way, when the flyout item gets selected, it triggers all the changes that you want, refering to the element by their name