I have set a background color and text color and some other color properties like disable and unselected colors, but none seem to change the selected item background color.
Which if the properties below will I have to change to make it look the way I want? Or else what do I need to add on my code?
I have the following:
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
Title="Example"
x:Class="TrackBus.AppShell"
FlyoutHeaderBehavior="CollapseOnScroll"
FlyoutBackgroundColor="{StaticResource Primary}">
<Shell.Resources>
<ResourceDictionary>
<Style x:Key="BaseStyle" TargetType="Element">
<Setter Property="Shell.BackgroundColor" Value="{StaticResource Primary}" />
<Setter Property="Shell.ForegroundColor" Value="White" />
<!--Foreground is the menu icon color-->
<Setter Property="Shell.TitleColor" Value="White" />
<Setter Property="Shell.DisabledColor" Value="Magenta" />
<Setter Property="Shell.UnselectedColor" Value="Cyan" />
</Style>
<Style TargetType="FlyoutItem" BasedOn="{StaticResource BaseStyle}" />
<Style Class="FlyoutItemLabelStyle" TargetType="Label">
<Setter Property="TextColor" Value="Cyan"></Setter>
</Style>
<Style Class="FlyoutItemLayoutStyle" TargetType="Layout" ApplyToDerivedTypes="True">
<Setter Property="BackgroundColor" Value="Magenta"></Setter>
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="{StaticResource Secondary}" />
<Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="Blue"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="{StaticResource SecondaryLight}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
<Style Class="MenuItemLayoutStyle" TargetType="Layout" ApplyToDerivedTypes="True">
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="{StaticResource SecondaryLight}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
</ResourceDictionary>
</Shell.Resources>
<Shell.ItemTemplate>
<DataTemplate>
<Grid ColumnDefinitions="60,Auto">
<Image Source="{Binding FlyoutIcon}"
Margin="5"
HeightRequest="35" />
<Label Grid.Column="1"
Text="{Binding Title}"
VerticalTextAlignment="Center"
FontSize="Title"
TextColor="{StaticResource SecondaryLight}" />
</Grid>
</DataTemplate>
</Shell.ItemTemplate>
<Shell.MenuItemTemplate>
<DataTemplate>
<Grid ColumnDefinitions="60,Auto">
<Image Source="{Binding Icon}"
Margin="5"
HeightRequest="35" />
<Label Grid.Column="1"
Text="{Binding Text}"
VerticalTextAlignment="Center"
FontSize="Title"
TextColor="{StaticResource SecondaryLight}"/>
</Grid>
</DataTemplate>
</Shell.MenuItemTemplate>
Primary is dark blue and SecondaryLight is yellow
Currently I have this:
I want it to look like this:
We need to override the FlyoutItemLayoutStyle
,MenuItemLayoutStyle
and modify the value in CommonStates
and Selected
.
<Style Class="FlyoutItemLayoutStyle" TargetType="Layout" ApplyToDerivedTypes="True">
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="Transparent" />
<Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="Orange" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="Orange" />
<Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="Black" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
<!--
Custom Style you can apply to any Flyout Item
-->
<Style Class="MenuItemLayoutStyle" TargetType="Layout" ApplyToDerivedTypes="True">
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="Transparent" />
<Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="Orange" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="Orange" />
<Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="Black" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>