.Net maui radio button checked changed event not firing with control template - radio-button

Question

I am using radio button control with customised radio button selection colors in .Net Maui.But when changing the selection , it doesn't fire CheckedChanged event.
Here is the code snippet,
View
<StackLayout
x:Name="SexRadioGroup"
Grid.Row="10"
Margin="24,12,0,0"
Orientation="Horizontal"
RadioButtonGroup.GroupName="SexRadioGroup"
Spacing="40">
<RadioButton
GroupName="SexRadioGroup"
IsChecked="True"
Value="Male">
<RadioButton.Content>
<StackLayout>
<Label
Margin="30,0,0,0"
Text="Male"
TextColor="{StaticResource FieldNameTextColor}"
VerticalOptions="Start" />
</StackLayout>
</RadioButton.Content>
</RadioButton>
<RadioButton
CheckedChanged="SexRadioButton_CheckedChanged"
GroupName="SexRadioGroup"
Value="Female">
<RadioButton.Content>
<StackLayout>
<Label
Margin="30,0,0,0"
Text="Female"
TextColor="{StaticResource FieldNameTextColor}"
VerticalOptions="Start" />
</StackLayout>
</RadioButton.Content>
</RadioButton>
</StackLayout>
Code behind file
private void SexRadioButton_CheckedChanged(object sender, CheckedChangedEventArgs e)
{
}
Style(RadioButton template)
<ControlTemplate x:Key="RadioButtonTemplate">
<Frame
Padding="0"
BackgroundColor="#F3F2F1"
BorderColor="#F3F2F1"
HasShadow="False"
HeightRequest="100"
HorizontalOptions="Start"
VerticalOptions="Start"
WidthRequest="100">
<Grid Margin="4" WidthRequest="100">
<Grid
HeightRequest="18"
HorizontalOptions="End"
VerticalOptions="Start"
WidthRequest="18">
<Ellipse
Fill="White"
HeightRequest="16"
HorizontalOptions="Center"
Stroke="Blue"
VerticalOptions="Center"
WidthRequest="16" />
<Ellipse
x:Name="check"
Fill="Blue"
HeightRequest="8"
HorizontalOptions="Center"
VerticalOptions="Center"
WidthRequest="8" />
</Grid>
<ContentPresenter />
</Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroupList>
<VisualStateGroup x:Name="CheckedStates">
<VisualState x:Name="Checked">
<VisualState.Setters>
<Setter Property="BorderColor" Value="#FF3300" />
<Setter TargetName="check" Property="Opacity" Value="1" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Unchecked">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="#F3F2F1" />
<Setter Property="BorderColor" Value="#F3F2F1" />
<Setter TargetName="check" Property="Opacity" Value="0" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</VisualStateManager.VisualStateGroups>
</Frame>
</ControlTemplate>
<Style TargetType="RadioButton">
<Setter Property="ControlTemplate" Value="{StaticResource RadioButtonTemplate}" />
</Style>
Is there any way to use renderer to change the selection and unselection color of the radio button by renderers?

Answer 1

The cause is the clicked event has been dealt with by the Frame, not the radio button. So you can add the TapGestureRecognizer to the Frame. I use the control template in the App.xaml. Such as:
<ControlTemplate x:Key="RadioButtonTemplate">
<Frame
Padding="0"
BackgroundColor="#F3F2F1"
BorderColor="#F3F2F1"
HasShadow="False"
HeightRequest="100"
HorizontalOptions="Start"
VerticalOptions="Start"
WidthRequest="100">
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
</Frame.GestureRecognizers>
And in the App.cs:
private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
      {
            Frame frame = sender as Frame;
            RadioButton button = (RadioButton)frame.Parent;
            button.IsChecked = true;
}
And then, the radio button checked changed event will be hit when you click it. (Note: On the windows platform, it can work without the TapGestureRecognizer.)