how to use radio buttons in xamarin forms

I think there is a simpler solution that is fairly easy and requires no libraries. Really a a radio group is just a fancy ListView. You would just need to create a viewModel for each radio button that has a IsSelected flag and switch between 2 images. I had a need to allow a user to select how long a token persisted:

XAML

<ListView
    HasUnevenRows="True"
    HorizontalOptions="FillAndExpand"
    ItemsSource="{Binding Durations}"
    ItemSelected="ListView_ItemSelected"
    SelectedItem="{Binding SelectedDuration}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <StackLayout
                    Orientation="Horizontal">
                    <Image
                        HeightRequest="18"
                        IsVisible="{Binding IsSelected}"
                        Source="radioButtonChecked.png"
                        WidthRequest="18"/>
                    <Image
                        HeightRequest="18"
                        IsVisible="{Binding IsUnselected}"
                        Source="radioButtonUnchecked.png"
                        WidthRequest="18"/>
                    <Label
                        Margin="8,0,0,0"
                        Text="{Binding Caption}"/>
                </StackLayout>
            </ViewCell>
         </DataTemplate>
      </ListView.ItemTemplate>
   </ListView>

We create a listview in our content page and listen for the ItemSelected event. Each list item is a horizontal stack panel where we flip between two images depending on the selected state

Code Behind

public partial class LoginPage : ContentPage
{
    LoginPageViewModel LoginPageViewModel { get; }

    public LoginTwoFactorFrequencyPage ()
    {
        BindingContext = LoginPageViewModel = new LoginPageViewModel();

        InitializeComponent ();
    }

    private void ListView_ItemSelected(object sender, SelectedItemChangedEventArgs e)
    {
        LoginPageViewModel.UpdateSelected(e.SelectedItem as PersistenceDuration);
    }
}
  • The page's code behind instantiates a view model and calls an UpdateSelected method with the newly selected item on the page's view model*

RadioButton ViewModel

The view model for each radio button:

public class PersistenceDuration : ViewModelBase
{
    bool isSelected;

    public string Caption { get; set; }
    public TwoFactorTokenPersistenceDuration Duration { get; set; }
    public bool IsSelected
    {
        get => isSelected;
        set
        {
            isSelected = value;
            OnPropertyChanged();
            OnPropertyChanged("IsUnselected");
        }
    }
    public bool IsUnselected => !IsSelected;

    public PersistenceDuration(string caption, TwoFactorTokenPersistenceDuration duration)
    {
        Caption = caption;
        Duration = duration;
        IsSelected = false;
    }
}

The radio button view model holds selection info and the caption. We make sure to fire OnPropertyChanged whenever the selected state changes

Page ViewModel

public class LoginPageViewModel : ViewModelBase
{
    PersistenceDuration duration;
    PersistenceDuration selectedDuration;

    public ObservableCollection<PersistenceDuration> Durations { get; }
    public PersistenceDuration SelectedDuration
    {
        get => selectedDuration;
        set
        {
            if (value != null)
            {
                duration = value;
                UpdateSelected(duration);
            }
            OnPropertyChanged();
        }
    }

    public LoginTwoFactorFrequencyViewModel()
    {
        Durations = new ObservableCollection<PersistenceDuration>(
            new List<PersistenceDuration>()
            {
                new PersistenceDuration(AppResources.Save_code__forever, TwoFactorTokenPersistenceDuration.Forever),
                new PersistenceDuration(AppResources.ChatRequireEvery30Days, TwoFactorTokenPersistenceDuration.ThirtyDays),
                new PersistenceDuration(AppResources.ChatRequireEveryLogin, TwoFactorTokenPersistenceDuration.None),
            });
    }

    public void UpdateSelected(PersistenceDuration persistenceDuration)
    {
        foreach (var item in Durations)
            item.IsSelected = persistenceDuration == item;
    }
}

In the page view model we create a list of radio button view models that the XAML binds to. When we UpdateSelected() all the IsSelected states are updated which trigger binding updates which flip the image.

You will still need to do something about the highlight when someone selects an item, but that is easy enough to find on the internet :)


You can use XLabs plugin from manage NuGets package. After installing you can use like this:

In Xaml:

controls:BindableRadioGroup x:Name="Radiobtn"

In C#:

string[] gender = {"MAlE","FEMALE"}
Radiobtn.Add(gender)

Refer Link
https://github.com/XLabs/Xamarin-Forms-Labs/tree/master/samples/XLabs.Samples/XLabs.Samples/Pages/Controls


Xamarin forms does not provide Radio Button.

You can either use

1)Switch

2)Picker

or any other component to fulfill your requirement

UPDATE

The xamarin forms update version 4.6 has introduced the Radio button control, Here is the official documentation