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

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>