MAUI RadioButton with ControlTemplate Stops Working on iOS and MacCatalyst

vsfeedback commented 1 month ago

This issue has been moved from a ticket on Developer Community.

[severity:I'm unable to use this version] When using a ControlTemplate to change the visual representation of a .NET MAUI RadioButton control, the control stops working on iOS and MacCatalyst, but works correctly on Windows and Android.

The ControlTemplate is defined as:

<ControlTemplate x:Key="RadioButtonControlTemplate">
    <Border Margin="10" Background="Transparent" StrokeThickness="0">
        <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 HorizontalOptions="Fill" VerticalOptions="Fill" ColumnDefinitions="Auto,Auto">
            <Ellipse Grid.Column="0" HeightRequest="22" WidthRequest="22" HorizontalOptions="Center" VerticalOptions="Center" StrokeThickness="1"
                     Fill="Transparent"
                     Stroke="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}" />
            <Ellipse Grid.Column="0" x:Name="_check" HeightRequest="10" WidthRequest="10" HorizontalOptions="Center" VerticalOptions="Center" StrokeThickness="1"
                     Fill="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}"
                     Stroke="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}" />
            <ContentPresenter Grid.Column="1" Margin="10" HorizontalOptions="Start" VerticalOptions="Center" />
        </Grid>
    </Border>
</ControlTemplate>

and the template is applied to RadioButton object via a style:

<Style TargetType="RadioButton">
    <Setter Property="BackgroundColor" Value="Transparent"/>
    <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}" />
    <Setter Property="FontFamily" Value="OpenSansRegular"/>
    <Setter Property="FontSize" Value="14"/>
    <Setter Property="MinimumHeightRequest" Value="44"/>
    <Setter Property="MinimumWidthRequest" Value="44"/>
    <Setter Property="ControlTemplate" Value="{StaticResource RadioButtonControlTemplate}" />
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal" />
                <VisualState x:Name="Disabled">
                    <VisualState.Setters>
                        <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Gray300}, Dark={StaticResource Gray600}}" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

You can reproduce the issue by following these steps using the reproduction project at: https://github.com/hunsra/RBCT

Steps:

Open the solution in Visual Studio 2022 V17.9.6 on a Windows computer and build and run the Windows target. Observe that the radio buttons respond normally to clicks. Repeat this test on an Android target and observe that the radio buttons respond normally to clicks. If you have a paired Mac, repeat this test on a remoted iPhone simulator target and observe the radio buttons don't response as expected to clicks.
Open the solution in Visual Studio for Mac 17.6.11 (build 400) on a Mac and build and run the MacCatalyst target. Observe that the radio buttons don't respond as expected to clicks. Repeat this test on an iPhone simulator target and observe the radio buttons don't response as expected to clicks. Repeat this test on an Android target and observe that the radio buttons respond normally to clicks.

Original Comments

Feedback Bot on 4/16/2024, 06:39 PM:

(private comment, text removed)

Original Solutions

(no solutions)

github-actions[bot] commented 1 month ago

Hi I'm an AI powered bot that finds similar issues based off the issue title.

Please view the issues below to see if they solve your problem, and if the issue describes your problem please consider closing this one and thumbs upping the other issue to help us prioritize it. Thank you!

Open similar issues:

[iOS] RadioButton with custom ContentTemplate in ResourceDictionary does not respond to taps (#19478), similarity score: 0.82
RadioButton application-level Style not working with ControlTemplate on iOS (#14949), similarity score: 0.81

Closed similar issues:

RadioButton ControlTemplate ignored on Windows (#6630), similarity score: 0.85
RadioButton rendered incorrectly in MacCatalyst (#15214), similarity score: 0.82
RadioButton ControlTemplate and Style issues (#11819), similarity score: 0.82

Note: You can give me feedback by thumbs upping or thumbs downing this comment.

dustin-wojciechowski commented 1 month ago

I've pulled this reproduction and do see the issue with click/touch events not registering and will have to look into it. This may have something to do with the way the Control Template is applied when set in the styles.xml file in the Resources folder, although I'd have to look into that a bit more.

A workaround I've found for now is to explicitly setting the style in the xaml itself, while still defining the Control Template in the styles.xml file (although I understand this is not ideal)


<VerticalStackLayout Margin="10" Spacing="10" RadioButtonGroup.GroupName="Colors" RadioButtonGroup.SelectedValue="false">
   <VerticalStackLayout.Resources>
    <Style TargetType="RadioButton">
        <Setter Property="ControlTemplate" Value="{StaticResource RadioButtonControlTemplate}"/>
    </Style>
  </VerticalStackLayout.Resources>
  <Label Text="What's your favorite color?" />
  <RadioButton GroupName="Colors" Content="Red" />
  <RadioButton GroupName="Colors" Content="Green"  />
  <RadioButton GroupName="Colors" Content="Blue"  />
  <RadioButton GroupName="Colors" Content="Other" />
</VerticalStackLayout>

dotnet / maui