Xamarin Visual State Manager Cannot Resolve Property Type on nested element - xaml

Question

I am new to Xamarin and I wanted to try changing the radio button's appearance. But with my current codes I get the error Cannot resolve property type "TextColor" on type "Grid".
Here are my codes:
<ContentPage.Resources>
<ControlTemplate x:Key="RadioButtonTemplate">
<Grid RowSpacing="0">
<VisualStateManager.VisualStateGroups>
<VisualStateGroupList>
<VisualStateGroup x:Name="CheckedStates">
<VisualState x:Name="Checked">
<VisualState.Setters>
<Setter TargetName="checkBorderTop"
Property="BackgroundColor"
Value="{x:StaticResource PrimaryColor}"/>
<Setter TargetName="checkBorderBot"
Property="BackgroundColor"
Value="{x:StaticResource PrimaryColor}"/>
<Setter TargetName="check"
Property="BackgroundColor"
Value="{x:StaticResource PrimaryShade}"/>
<Setter TargetName="checkIcon"
Property="TextColor"
Value="{x:StaticResource PrimaryColor}"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Unchecked">
<VisualState.Setters>
<Setter TargetName="checkBorderTop"
Property="BackgroundColor"
Value="Transparent"/>
<Setter TargetName="checkBorderBot"
Property="BackgroundColor"
Value="Transparent"/>
<Setter TargetName="check"
Property="BackgroundColor"
Value="Transparent"/>
<Setter TargetName="checkIcon"
Property="TextColor"
Value="Black"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</VisualStateManager.VisualStateGroups>
<Grid.RowDefinitions>
<RowDefinition Height="2"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="2"/>
</Grid.RowDefinitions>
<BoxView x:Name="checkBorderTop"
Grid.Row="0"/>
<Frame x:Name="check"
BorderColor="Transparent"
Margin="0"
Padding="20, 10"
Grid.Row="1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Label x:Name="checkIcon"
Text="{x:Static icon:FontAwesomeIcons.Paw}"
FontFamily="IconSolid"
HorizontalOptions="Start"
FontSize="20"
VerticalTextAlignment="Center"/>
<ContentPresenter Grid.Column="1"/>
</Grid>
</Frame>
<BoxView x:Name="checkBorderBot"
Grid.Row="2"
Margin="0"/>
</Grid>
</ControlTemplate>
<Style TargetType="RadioButton">
<Setter Property="ControlTemplate"
Value="{StaticResource RadioButtonTemplate}" />
</Style>
</ContentPage.Resources>
Here is my expected output:
The code works well on changing the background color and border. But when I add
<Setter TargetName="checkIcon"
Property="TextColor"
Value="{x:StaticResource PrimaryColor}"/>
the error shows. I can't manage to change the Paw icon color when checked and unchecked.
I think its on the hierarchy between the parent and child elements since the label is on the most inner child, idk.
Need help from those who know the answer :(
Thank you in advance

Answer 1

You can check Visual State Manager.
It's often necessary to share the same Visual State Manager markup among two or more views.
That is to say you can use Style for the Grid elements in the View page:
<Style TargetType="Grid">
<Setter Property="RowSpacing" Value="0" />
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CheckedStates">
<VisualState x:Name="Checked">
<VisualState.Setters>
<Setter TargetName="checkBorderTop"
Property="BackgroundColor"
Value="{x:StaticResource PrimaryColor}"/>
<Setter TargetName="checkBorderBot"
Property="BackgroundColor"
Value="{x:StaticResource PrimaryColor}"/>
<Setter TargetName="check"
Property="BackgroundColor"
Value="{x:StaticResource PrimaryShade}"/>
<Setter TargetName="checkIcon"
Property="TextColor"
Value="{x:StaticResource PrimaryColor}"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Unchecked">
<VisualState.Setters>
<Setter TargetName="checkBorderTop"
Property="BackgroundColor"
Value="Transparent"/>
<Setter TargetName="checkBorderBot"
Property="BackgroundColor"
Value="Transparent"/>
<Setter TargetName="check"
Property="BackgroundColor"
Value="Transparent"/>
<Setter TargetName="checkIcon"
Property="TextColor"
Value="Black"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
Wish it could be helpful to you.