How can I change visual of flyoutitem in xamarin shell on select?

Question

I want to highlight current page by changing background color of a flyoutitem, but I also need to change text color inside a frame. My Template

<Grid ...>
 <Frame CornerRadius="10"
        Padding="0"
        BackgroundColor="White"
        Grid.Column="1">
        <Label Text="{Binding Title}"
               Margin="50,0,0,0"
               HorizontalOptions="FillAndExpand"
               VerticalOptions="FillAndExpand"
               VerticalTextAlignment="Center"
               TextColor="Black"
               Grid.Column="1"/>
</Frame>
</Grid>

I need to change Frame color to darker green and label text color to white whenever I navigate to a certain page. I've tried visual state manager, but it doesn't work even just with background-only. I found a solution to attach trigger on a Frame, but nothing happens

protected override void Invoke(Frame sender)
{
    sender.BackgroundColor = Color.FromHex("#229904");
    (sender.Content as Label).TextColor = Color.White;
}

Answer 1

Firstly, you need to add a custom style in your resources:

<Style x:Key="FloutItemStyle" 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="xxx"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

Then consume it in your Shell:

<Shell.ItemTemplate>
    <DataTemplate >
        <Grid Style="{StaticResource FloutItemStyle}">

         //...
        </Grid>
    </DataTemplate>
</Shell.ItemTemplate>