Create a Radio Button group using standard buttons

Question

The idea here is simple, I've got 2 or more buttons and want to have them act like Radio Buttons. So only one can be checked at any time, and when one is checked the others must uncheck themselves. I'm using MVVM so don't want to go down the route of code behind although it would have been easier for this.

Here is the XAML I've tried which locks up due to the buttons referencing each other.

    <Label Text="Group Header Sorting" TextColor="{DynamicResource InverseTextColor}"/>
    <StackLayout Orientation="Horizontal" Spacing="0">
        <buttons:SfButton x:Name="GroupHeaderSortAscButton" Text="Ascending" HeightRequest="35" WidthRequest="90" IsChecked="{Binding Source={x:Reference GroupHeaderSortDescButton}, Path=IsChecked, Converter={converters:InverseBoolConverter}}">
        </buttons:SfButton>

        <buttons:SfButton x:Name="GroupHeaderSortDescButton" Text="Descending" HeightRequest="35" WidthRequest="90" IsChecked="{Binding Source={x:Reference GroupHeaderSortAscButton}, Path=IsChecked, Converter={converters:InverseBoolConverter}}">
        </buttons:SfButton>
    </StackLayout>

I've also tried Data Triggers with more success but its still not perfect as it requires the unselected button pressed twice before it starts work.

        <StackLayout Orientation="Horizontal" Spacing="0">
            <buttons:SfButton x:Name="GroupHeaderSortAscButton" Text="Ascending" HeightRequest="35" WidthRequest="90" IsChecked="False">
                <buttons:SfButton.Triggers>
                    <DataTrigger TargetType="buttons:SfButton" Binding="{Binding Source={x:Reference GroupHeaderSortDescButton}, Path=IsChecked}" Value="True">
                        <Setter Property="IsChecked" Value="False"/>
                    </DataTrigger>
                    <DataTrigger TargetType="buttons:SfButton" Binding="{Binding Source={x:Reference GroupHeaderSortDescButton}, Path=IsChecked}" Value="False">
                        <Setter Property="IsChecked" Value="True"/>
                    </DataTrigger>
                </buttons:SfButton.Triggers>
            </buttons:SfButton>

            <buttons:SfButton x:Name="GroupHeaderSortDescButton" Text="Descending" HeightRequest="35" WidthRequest="90" IsChecked="True">
                <buttons:SfButton.Triggers>
                    <DataTrigger TargetType="buttons:SfButton" Binding="{Binding Source={x:Reference GroupHeaderSortAscButton}, Path=IsChecked}" Value="True">
                        <Setter Property="IsChecked" Value="False"/>
                    </DataTrigger>
                    <DataTrigger TargetType="buttons:SfButton" Binding="{Binding Source={x:Reference GroupHeaderSortAscButton}, Path=IsChecked}" Value="False">
                        <Setter Property="IsChecked" Value="True"/>
                    </DataTrigger>
                </buttons:SfButton.Triggers>
            </buttons:SfButton>
        </StackLayout>

I'm aware that from XF 4.6 they introduced the RadioButton control, I've tried this and its buggy and according to comments on Git Hub it will have major changes in XF 5, so I don't want to implement this experimental version.

This is the look I'm after:

if you are already using SF controls why don't you use their RadioButton? — Jason
Yes I could do but I'm trying to achieve a different style than the usual little circle you get with the radio. I've updated my post to show the design. — henda79
that is a segmented control, not a radio button - SF also has one, and there are a variety of open source options too — Jason
Thanks for pointing out that control, I'll have a look but it seems though I could use that. I'll still leave open this question as I'd like to see the answer. — henda79
Why dont you try to handle that programmatically in the setter part of binding context of buttons. On click of one button, change status of another buttons. Just couples of lines of code & you get what you want — Blu

Saravanan Sarwan Saravanan Sarwan · Accepted Answer · 2020-10-27T12:48:34

We have achieved your requirement by using Syncfusion SfButton. To make it as toggle type, need to set the IsCheckable property as True. Then only it will update the IsChecked property properly. To maintain the single selection, we have extended the SfButton by including the GroupKey internal with further validation.

CustomRadioButton

Create a Radio Button group using standard buttons

2 Answers