使用 Syncfusion 在 Xamarin.Forms 中扩展 SfRadioButton 功能

Question

我有一个针对 Android 的 Xamarin.Forms 应用程序，我正在使用 Syncfusion 的 SfRadioGroup 和 SfRadioButton 来向用户提供一些选项。但是，我想提供有关用户可以做出的每个特定选择的更多信息。

我认为实现这一点的一个好方法是在每个 RadioButton 旁边添加一个信息按钮，该按钮将打开一个弹出窗口，其中包含有关该选项的更多信息。

我尝试在 StackLayout 或 Grid 中包含 RadioButton 和信息按钮，但是按钮之间的同步将丢失。 RadioButtons 需要直接放在 SFRadioButtonGroup 中，否则选中其中一个不会取消选中其他。使用 FlowListView 和 DataTemplate 也不起作用。

我在 Wpf 中执行此操作的方法是创建一个扩展 RadioButton 的新控件，对于控件的视图，我将采用默认 Xaml 并对其进行修改以添加一个信息按钮。但是，我找不到 SfRadioButton 的 Xaml 的源代码，这使得扩展控件非常困难。

有没有一种方法可以扩展或自定义 SfRadioButton？如果没有，我有什么替代方法可以在用户选择旁边添加更多信息？

下面是一个简单的代码示例来说明我想要实现的目标（这不起作用，因为 RadioButtons 的直接父级不是 RadioButtonGroup 而是 StackLayouts）

 <buttons:SfRadioGroup
        Grid.Row="3" Grid.Column="0"
        x:Name="radioGroup"
        HorizontalOptions="Fill"
        Orientation="Vertical"
        VerticalOptions="CenterAndExpand"
        Margin="10,5,10,0">

        <StackLayout Orientation="Horizontal">
        <buttons:SfRadioButton
            TextColor="{StaticResource AppForegroundColor}"
            IsChecked="{Binding Option1, Mode=TwoWay}"
            Text="Individual"
            VerticalOptions="Center" Margin="1,1,1,1" />
        <Button Command="{Binding Path=OpenPopupInfoOption1}"/>
        </StackLayout>

        <StackLayout Orientation="Horizontal">
        <buttons:SfRadioButton
            TextColor="{StaticResource AppForegroundColor}"
            IsChecked="{Binding Option2, Mode=TwoWay}"
            Text="Sum"
            VerticalOptions="Center" Margin="1,1,1,1" />
        </StackLayout>
        <Button Command="{Binding Path=OpenPopupInfoOption2}"/>
    </buttons:SfRadioGroup>

Answer 1

我认为您无法以自己的方式实现这一目标，因为您需要将 buttons:SfRadioButton 放在 buttons:SfRadioGroup 下。

我有什么替代方法可以在旁边添加更多信息 用户的选择？

我会给你一个解决方案：

在每个SfRadioButton 下放置一个label，并在标签中写下详细信息。将标签的 IsVisible 与 SfRadioButton 的 ischecked 绑定，因此标签将显示一次 SfRadioButton isChecked 否则标签为 invisible。

如果信息很长，可以将下面的label改成button SfRadioButton。并点击按钮弹出信息。

<buttons:SfRadioGroup
        Grid.Row="3" Grid.Column="0"
        x:Name="radioGroup"
        HorizontalOptions="Fill"
        Orientation="Vertical"
        VerticalOptions="CenterAndExpand"
        Margin="10,5,10,0">


        <buttons:SfRadioButton
            x:Name="Sum"
            TextColor="Gray"
            IsChecked="{Binding Option2, Mode=TwoWay}"
            Text="Sum"
            VerticalOptions="Center" Margin="1,1,1,1" />

        <Label Text="detail Sum" BackgroundColor="Gray" BindingContext="{x:Reference Sum}" IsVisible="{Binding IsChecked}"/>


        <buttons:SfRadioButton
            x:Name="Individual"
        TextColor="Blue"
        IsChecked="{Binding Option1, Mode=TwoWay}"
        Text="Individual"
        VerticalOptions="Center" Margin="1,1,1,1" StateChanged="SfRadioButton_StateChanged"/>

        <Label Text="detail Individual" BackgroundColor="Gray" BindingContext="{x:Reference Individual}" IsVisible="{Binding IsChecked}"/>


    </buttons:SfRadioGroup>

这是一个您可以查看的 gif：

如果您有任何问题，请回复我。

Answer 2

根据 SfRadioGroup 的当前行为，只有当 RadioButton 作为直接子元素添加到 SfRadioGroup 中时，RadioButton 列表才会被视为组。为了满足您的要求，我们不能将 SfRadioButton 添加为直接子代。

因此，我们可以通过手动更改其他两个 SfRadioButton 的状态来实现您的要求。请参考以下代码sn-p。

代码片段：

private void GoogleChrome_StateChanged(object sender, Syncfusion.XForms.Buttons.StateChangedEventArgs e)  
        {  
            if(e.IsChecked.Value)  
            {  
                Instagram.IsChecked = false;  
                Skype.IsChecked = false;  
            }  
        }  

示例：http://www.syncfusion.com/downloads/support/directtrac/226145/ze/RadioButtonSample1174471588

此外，我们已经将此功能请求添加到我们的数据库中。

我们没有立即实施此功能的计划。在每个发布周期的规划阶段，我们都会审查所有开放功能。您可以从下面的反馈门户跟踪该功能。

https://www.syncfusion.com/feedback/4463

注意：我为 Syncfusion 工作。

问候，
达纳塞卡