如何修改SyncFusion Radio Button Group单选按钮组的外观样式

要实现你需要的标签式单选按钮效果，你需要重写SfRadioButton的控件模板，隐藏默认的圆形选择框，通过选中状态切换背景色、边框和文本样式即可，以下是可直接复用的实现代码：

首先在页面的Resources资源区添加对应样式：

<ContentPage.Resources>
    <Style x:Key="TagRadioButtonStyle" TargetType="radiobutton:SfRadioButton">
        <Setter Property="ControlTemplate">
            <ControlTemplate>
                <Border x:Name="RadioBorder"
                        Stroke="#c4c4c4" 
                        StrokeThickness="1" 
                        BackgroundColor="#FFFFFF"
                        Padding="12,8"
                        Margin="0">
                    <Label x:Name="RadioLabel"
                           Text="{TemplateBinding Text}" 
                           TextColor="#000000"
                           HorizontalOptions="Center"/>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CheckStates">
                            <VisualState x:Name="Checked">
                                <VisualState.Setters>
                                    <Setter TargetName="RadioBorder" Property="BackgroundColor" Value="#2196F3"/>
                                    <Setter TargetName="RadioLabel" Property="TextColor" Value="#FFFFFF"/>
                                    <Setter TargetName="RadioBorder" Property="Stroke" Value="#2196F3"/>
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="Unchecked"/>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="PointerOver">
                                <VisualState.Setters>
                                    <Setter TargetName="RadioBorder" Property="BackgroundColor" Value="#E3F2FD"/>
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                </Border>
            </ControlTemplate>
        </Setter>
    </Style>
</ContentPage.Resources>

之后修改你原来的单选组代码，给每个单选按钮应用上面的样式即可：

<radiobutton:SfRadioGroup x:Name="radioGroup" Orientation="Horizontal" HorizontalOptions="CenterAndExpand">
     <radiobutton:SfRadioButton x:Name="asc" Text="Ascending" IsChecked="True" Style="{StaticResource TagRadioButtonStyle}"/>
     <radiobutton:SfRadioButton x:Name="desc" Text="Descending" Style="{StaticResource TagRadioButtonStyle}"/>
</radiobutton:SfRadioGroup>

你可以根据需要自行修改样式里的颜色值、圆角、内边距等参数，匹配你的项目设计规范。

内容的提问来源于stack exchange，提问作者benembiid10210