.Net maui 单选按钮已检查更改的事件未使用控件模板触发答案

【问题标题】：.Net maui radio button checked changed event not firing with control template.Net maui 单选按钮已检查更改的事件未使用控件模板触发
【发布时间】：2022-11-23 11:49:30
【问题描述】：

我在 .Net Maui 中使用带有自定义单选按钮选择颜色的单选按钮控件。但是在更改选择时，它不会触发 CheckedChanged 事件。

这是代码sn-p，

看法

<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>

代码隐藏文件

private void SexRadioButton_CheckedChanged(object sender, CheckedChangedEventArgs e)
{
}

样式（单选按钮模板）

<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>

有什么方法可以使用渲染器来更改渲染器对单选按钮的选择和取消选择颜色？

【问题讨论】：

标签： radio-button maui controltemplate

【解决方案1】：

原因是单击事件已由框架处理，而不是单选按钮。因此，您可以将 TapGestureRecognizer 添加到框架中。我在 App.xaml 中使用控件模板。如：

<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>

在 App.cs 中：

private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
      {
            Frame frame = sender as Frame;
            RadioButton button = (RadioButton)frame.Parent;
            button.IsChecked = true;
    }

然后，当您单击它时，单选按钮 checked changed 事件将被触发。 (笔记: 在windows平台下，可以不用TapGestureRecognizer。）

【讨论】：