Radiobutton with ControlTemplate doesn't recognize Click Event Correctly

[hamiddd1980]

Description

When Radiobutton visual structure is redefined with a ControlTemplate, the click event is not recognized correctly by radio button:
1-by clicking inside Radiobutton, the the Radiobutton is not selected(Checked)
2-clicking outside the Radiobutton, change Radiobutton state to Selected(Checked) state.

Steps to Reproduce

1-Create a New MAUI Project
2-Add new Page
3-Code:(code is taken from Microsoft page @ Redefine RadioButton appearance)

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             FlowDirection="LeftToRight"
             x:Class="MauiApp29.Page1"
             IconImageSource="edit.png"
             Title="page1"
             BackgroundColor="GreenYellow"
             Padding="16">
    <ContentPage.Resources>
        <ControlTemplate x:Key="RadioButtonTemplate">
            <Frame BorderColor="#F3F2F1"
                   BackgroundColor="#F3F2F1"
                   HasShadow="False"
                   HeightRequest="100"
                   WidthRequest="100"
                   HorizontalOptions="Start"
                   VerticalOptions="Start"
                   Padding="0">
                <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>
                <Grid Margin="4"
                      WidthRequest="100">
                    <Grid WidthRequest="18"
                          HeightRequest="18"
                          HorizontalOptions="End"
                          VerticalOptions="Start">
                        <Ellipse Stroke="Blue"
                                 Fill="White"
                                 WidthRequest="16"
                                 HeightRequest="16"
                                 HorizontalOptions="Center"
                                 VerticalOptions="Center" />
                        <Ellipse x:Name="check"
                                 Fill="Blue"
                                 WidthRequest="8"
                                 HeightRequest="8"
                                 HorizontalOptions="Center"
                                 VerticalOptions="Center" />
                    </Grid>
                    <ContentPresenter />
                </Grid>
            </Frame>
        </ControlTemplate>

        <Style TargetType="RadioButton">
            <Setter Property="ControlTemplate"
                    Value="{StaticResource RadioButtonTemplate}" />
        </Style>
    </ContentPage.Resources>
    <ContentPage.Content>

        <StackLayout>
            <Label Text="What's your favorite mode of transport?" />
            <RadioButton Content="Car" />
            <RadioButton Content="Bike" />
            <RadioButton Content="Train" />
            <RadioButton Content="Walking" />
        </StackLayout>

    </ContentPage.Content>
</ContentPage>

Version with bug

Release Candidate 2 (current)

Last version that worked well

Unknown/Other

Affected platforms

Android, I was not able test on other platforms

Affected platform versions

Android 8-Android 9

Did you find any workaround?

No response

Relevant log output

No response

[jindal1979]

I am also facing the exact same issue, the RadioButton with ControlTemplate doen't recognize touch or click events. I tested it on Android.

[kristinx0211]

verified repro on android 11 and 12 with the code.

[davecader]

Same issue as well. The RadioButton with ControlTemplate does not recognize click events. Tested on Android.

[ghost]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[JozefGula]

I have the same problem on android devices.

[mcpbcs]

Hello, a workaround to solve is using a gesture like this:

            <RadioButton.Content>
                <StackLayout>
                    <Image Source="cat.png"
                           HorizontalOptions="Center"
                           VerticalOptions="Center">
                    </Image>
                    <Label Text="Cat"
                           HorizontalOptions="Center"
                           VerticalOptions="End" />
                    <StackLayout.GestureRecognizers>
                        <TapGestureRecognizer NumberOfTapsRequired="1" Tapped="TapGestureRecognizer_Tapped"> 
                   </TapGestureRecognizer>
                    </StackLayout.GestureRecognizers>
                </StackLayout>
            </RadioButton.Content>
        </RadioButton>

And the code behind:

private void TapGestureRecognizer_Tapped(object sender, EventArgs e)

{
    RadioButton button = default;

    if (sender is Image)
    {
        button = ((Image)sender).Parent.Parent as RadioButton;
    }
    else if (sender is StackLayout)
    {
        button = ((StackLayout)sender).Parent as RadioButton;
    }
    else if (sender is Label)
    {
        button = ((Label)sender).Parent.Parent as RadioButton;
    }
    button.IsChecked = true;
}

[hartez]

The TapGestureRecognizer is being correctly created and added to the templated RadioButton (in the UpdateIsEnabled() method in RadioButton.cs). But it's not firing when the RadioButton is tapped. My best guess at the moment is that something happening later in the mappings is clearing out the RadioButton's GestureRecognizers collection, or replacing the default tap gesture with another one.

[hartez]

Looking at #9370, this also might be an issue where the Frame is preventing the GestureRecognizer from firing. See this comment where clicking/tapping just outside of the framed area is firing the recognizer.

[hartez]

#7121 might be a similar problem, based on this comment.

[dustin-wojciechowski]

Ran this and could confirm the issue on Android.

A workaround for this example I verified to work is to replace the Frame with a Border. (to make that work in the repro above, the "BorderWidth" attribute would need to be replaced with "StrokeThickness"). This matches observations noted in the related issues noted above.

If possible, I would suggest we make this change to the RadioButton tutorial that this example came from.

As for the underlying fault in Frame, there is a PR in the works currently to fixing the issue in Frame (looks like InputTransparent property not propagating to Frame): #12218

[vikher]

I had the same issue, but I can style the radio button using a Control Template and works fine for iOS and Android .
This is what worked for me 👍
<ContentPage.Resources>

        <Color x:Key="LightRadioButtonColor">#F3F2F1</Color>
        <Color x:Key="DarkRadioButtonColor">#9B9A99</Color>

        <ControlTemplate x:Key="ThemeRadioTemplate">
            <Grid
                Padding="0"
                BackgroundColor="{AppThemeBinding Dark={StaticResource Black},
                                                  Light={StaticResource White}}"
                HorizontalOptions="Start"
                VerticalOptions="Start">
                <Grid Margin="4" WidthRequest="80">
                    <Grid
                        HeightRequest="20"
                        HorizontalOptions="End"
                        VerticalOptions="Start"
                        WidthRequest="20">
                        <Ellipse
                            Fill="White"
                            HeightRequest="18"
                            HorizontalOptions="Center"
                            Stroke="#2E2545"
                            StrokeThickness="1"
                            VerticalOptions="Center"
                            WidthRequest="18" />
                        <Ellipse
                            x:Name="Check"
                            BackgroundColor="Transparent"
                            Fill="{AppThemeBinding Dark={StaticResource Black},
                                                   Light={StaticResource Black}}"
                            HeightRequest="10"
                            HorizontalOptions="Center"
                            Stroke="{AppThemeBinding Dark={StaticResource Black},
                                                     Light={StaticResource Black}}"
                            StrokeThickness="0"
                            VerticalOptions="Center"
                            WidthRequest="10" />
                    </Grid>
                    <!--  This enables us to put in dynamic content  -->
                    <ContentPresenter />
                </Grid>
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroupList>
                        <VisualStateGroup x:Name="CheckedStates">
                            <VisualState x:Name="Checked">
                                <VisualState.Setters>
                                    <Setter TargetName="Check" Property="Opacity" Value="1" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="Unchecked">
                                <VisualState.Setters>
                                    <Setter TargetName="Check" Property="Opacity" Value="0" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateGroupList>
                </VisualStateManager.VisualStateGroups>
            </Grid>
        </ControlTemplate>
    </ResourceDictionary>
</ContentPage.Resources>

[ghost]

Hello lovely human, thank you for your comment on this issue. Because this issue has been closed for a period of time, please strongly consider opening a new issue linking to this issue instead to ensure better visibility of your comment. Thank you!